I'm facing a dilemma whether this is a bug or if there's something I'm overlooking because I'm unable to apply custom formatting to the y-axis labels on my Chart.js 2.0 Beta bar chart.
Referencing the Chart.js 2.0 Beta Docs, here are the configuration options:
Chart.js 2.0 Beta DocsBelow are the configuration options for my bar chart:
options: {
maintainAspectRatio: false,
responsive: true,
scales: {
xAxes: [
{
stacked: true,
gridLines: {
show: false
}
}
],
yAxes: [
{
stacked: true,
display: true,
labels: {
show: false
}
}
]
}options: {
// Boolean - if true, bars stack on top of each other
stacked: false,
hover: {
// String - We use a label hover mode since the x axis displays data by the index in the dataset
mode: "label"
},
scales: {
// The bar chart officially supports only 1 x-axis but uses an array to keep the API consistent. Use a scatter chart if you need multiple x axes.
xAxes: [{
// String - type of axis to use. Should not be changed from 'dataset'.
scaleType: "dataset", // scatter should not use a dataset axis
// Boolean - if true, show the scale
display: true,
// String - position of the scale. possible options are "top" and "bottom" for dataset scales
position: "bottom",
// String - id of the axis so that data can bind to it
id: "x-axis-1", // need an ID so datasets can reference the scale
// grid line settings
gridLines: {
// Boolean - if true, show the grid lines
show: true,
// String - color of the grid lines
color: "rgba(0, 0, 0, 0.05)",
// Number - width of the grid lines
lineWidth: 1,
// Boolean - if true draw lines on the chart area
drawOnChartArea: true,
// Boolean - if true draw ticks in the axis area
drawTicks: true,
// Number - width of the grid line for the first index (index 0)
zeroLineWidth: 1,
// String - color of the grid line for the first index
zeroLineColor: "rgba(0,0,0,0.25)",
// Boolean - if true, offset labels from grid lines
offsetGridLines: false,
},
// label settings
labels: {
// Boolean - if true show labels
show: true,
// String - template string for labels
template: "<%=value%>",
// Number - label font size
fontSize: 12,
// String - label font style
fontStyle: "normal",
// String - label font color
fontColor: "#666",
// String - label font family
fontFamily: "Helvetica Neue",
},
}],
yAxes: [{
// String - type of axis. 'linear' is the default but extensions may provide other types such as logarithmic
scaleType: "linear",
// Boolean - if true, show the scale
display: true,
// String - position of axis. Vertical axes can have either "left" or "right"
position: "left",
// ID of the axis for data binding
id: "y-axis-1",
// grid line settings
gridLines: {
// Boolean - if true, show the grid lines
show: true,
// String - color of the grid lines
color: "rgba(0, 0, 0, 0.05)",
// Number - width of the grid lines
lineWidth: 1,
// Boolean - if true draw lines on the chart area
drawOnChartArea: true,
// Boolean - if true draw ticks in the axis area
drawTicks: true,
// Number - width of the grid line representing a numerical value of 0
zeroLineWidth: 1,
// String - color of the grid line representing a numerical value of 0
zeroLineColor: "rgba(0,0,0,0.25)",
},
// Boolean - if true ensures that the scale always has a 0 point
beginAtZero: false,
// Object - if specified, allows the user to override the step generation algorithm.
// Contains the following values
// start: // number to start at
// stepWidth: // size of step
// steps: // number of steps
override: null,
// label settings
labels: {
// Boolean - if true show labels
show: true,
// String - template string for labels
template: "<%=value%>",
// Function - if specified this is passed the tick value, index, and the array of all tick values. Returns a string that is used as the label for that value
userCallback: null,
// Number - label font size
fontSize: 12,
// String - label font style
fontStyle: "normal",
// String - label font color
fontColor: "#666",
// String - label font family
fontFamily: "Helvetica Neue",
},
}],
},
};Despite the functioning of the chart being fine, I've encountered this specific issue. I've also attempted altering the labels on the provided demo charts that come with the Beta, but the outcomes have remained consistent.