* 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>
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.