Chart.js/docs/axes/labelling.md
Evert Timberg ed2b96eeaf
Switch docs to Vuepress to match other chart.js repositories (#8751)
* Initial work

* Update doc commands

* Updated sidebar config

* Move docs

* Update theme version and enable

* Convert to chart.js sample

* Update scripts to point to local build

* Chart.js from local build

* Simplify getting-started example

* Axis docs updated except for imported content

* Common ticks import works

* Chart type docs ported to editor plugin

* Last pages to use editor

* Fix small errors

* Frontmatter title to heading

* Remove duplicate example

* Update sidebar

* Add paths

* Remove paths

* Add getting-started back

* Update menus and add copyright to license section of the docs

* Add GA plugin

* Style sub-groups

* Remove unneeded license page since it is covered on the main page

* Remove docusaurus readme page

* Remove docusaurus files

* Fix issues in docs

* Build and deploy scripts for docs work

* Conditional base URL for nice local testing

* Use eslint-plugin-markdown

* Remove hard coded lines

* Remove mentions of docusaurus

Co-authored-by: Jukka Kurkela <jukka.kurkela@gmail.com>
2021-03-30 10:32:39 -04:00

1.9 KiB

Labeling Axes

When creating a chart, you want to tell the viewer what data they are viewing. To do this, you need to label the axis.

Scale Title Configuration

Namespace: options.scales[scaleId].title, it defines options for the scale title. Note that this only applies to cartesian axes.

Name Type Default Description
display boolean false If true, display the axis title.
align string 'center' Alignment of the axis title. Possible options are 'start', 'center' and 'end'
text string|string[] '' The text for the title. (i.e. "# of People" or "Response Choices").
color Color Chart.defaults.color Color of label.
font Font Chart.defaults.font See Fonts
padding Padding 4 Padding to apply around scale labels. Only top and bottom are implemented.

Creating Custom Tick Formats

It is also common to want to change the tick marks to include information about the data type. For example, adding a dollar sign ('$'). To do this, you need to override the ticks.callback method in the axis configuration. In the following example, every label of the Y-axis would be displayed with a dollar sign at the front.

If the callback returns null or undefined the associated grid line will be hidden.

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            y: {
                ticks: {
                    // Include a dollar sign in the ticks
                    callback: function(value, index, values) {
                        return '$' + value;
                    }
                }
            }
        }
    }
});

The third parameter passed to the callback function is an array of labels, but in the time scale, it is an array of {label: string, major: boolean} objects.