Tick

About

A Tick object defines how ticks are placed along a chart axis. By default, they are automatically spaced and their number depends on the chart's size. You can also customize the tick placement and set the desired number of ticks.

Properties

The following properties can be set:

Property Definition Type Default
text A function that takes a raw tick value and returns a formatted value function (val) => val
placement Tick placement mode 'custom' or 'auto' 'auto'
nbTicks The number of ticks placed on the axis when the tick placement mode is set to 'custom'. Number 5
style How tick labels are rendered TextStyle {color:'black', fontSize:10, fontWeight:'normal', fontWeight: 'normal', fontFamily: 'system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif"'}

Example

In the following examples, we illustrate tick styling and the two placement modes. Ticks are automatically placed on the first chart's Y axis, making their number depend on the size of the chart. We set their number on the second chart. 

                    
                        //display X values in red with 2 decimal places
                        chart.layout.xAxis.tick = {
                            text: (val) => val.toFixed(2),
                            style: {
                                color: 'red'
                            }
                        };
                        //display Y values with 2 decimal places
                        chart.layout.yAxis.tick.text = (val) => val.toFixed(2);
                    
                
                    
                        //display 10 ticks with 2 decimal places and font size of 12
                        chart.layout.xAxis.tick = {
                            placement: 'custom',
                            nbTicks: 10,
                            text: (val) => val.toFixed(2),
                            style: {
                                fontSize: 12,
                                fontFamily: 'math, sans-serif'
                            }
                        };
                        //display 5 (default) ticks with 3 decimal places and font size of 12
                        chart.layout.yAxis.tick = {
                            placement: 'custom',
                            text: (val) => val.toFixed(3),
                            style: {
                                fontSize: 12,
                                fontFamily: 'math, sans-serif'
                            }
                        };

Comments

Contents