Axis

About

Axes are critical to charts. A vertical and a horizontal axes are used to represent data in the Cartesian coordinate system. An Axis features other components to make charts legible.

Properties

The following properties can be set:

Property Definition Type Default
visible Axis line visibility Boolean true
style Axis line style LineStyle { stroke: 'black', strokeWidth: 1, strokeDashArray: 'none'}
title Axis title Title Void
tick Axis ticking system Tick Default Tick value
grid Axis grid system Grid Default Grid value
spy Axis spy Spy Default Spy value

Example

In the following examples, we create charts with different axis settings. Both axes appear with almost default settings on the first chart. They are customized on the second chart. 

                    
                        //show X-values with 2 decimal places
                        chart.layout.xAxis.tick.text = (val) => val.toFixed(2);
                    
                
                    
                        //add axis title, show integer values on the X-axis, thicken axis line
                        chart.layout.xAxis = {
                            title: {
                                text: 'X-axis values',
                                style: {
                                    fontSize: 14
                                }
                            },
                            tick: {
                                text: (val) => val.toFixed(0)
                            },
                            style: {
                                strokeWidth: 3
                            },
                        };
                        //hide axis line and grid, add title, show 5 ticks
                        chart.layout.yAxis = {
                            visible: false,
                            grid: {
                                visible: false
                            },
                            title: {
                                text: 'Y-axis values',
                                style: {
                                    fontSize: 14
                                }
                            },
                            tick: {
                                placement: 'custom',
                                nbTicks: 5
                            }
                        };

Comments

Contents