Menu
There is a way to create two label for y-axes. But how do you make a multiple x-axes label in chart.js? eg: example as in this picture: How to group (two-level) axis labels
627
One way to solve this problem is to right-click the axis on the chart and select Format Axis from the shortcut menu. Then in the Format Axis task pane, under Labels, set the Label Position to Low. 21.
Horizontal axis labels represent the X axis. They do not apply to pie, funnel, or gauge charts. Vertical axis labels represent the Y1 axis in a single axis chart. They represent a numeric scale, usually located on the left side of a vertical chart.
This question has already been answered on github here
Here is a working JSFiddle
var ctx = $("#c");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["January;2015", "February;2015", "March;2015", "January;2016", "February;2016", "March;2016"],
datasets: [{
label: '# of Votes',
xAxisID:'xAxis1',
data: [12, 19, 3, 5, 2, 3]
}]
},
options:{
scales:{
xAxes:[
{
id:'xAxis1',
type:"category",
ticks:{
callback:function(label){
var month = label.split(";")[0];
var year = label.split(";")[1];
return month;
}
}
},
{
id:'xAxis2',
type:"category",
gridLines: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
},
ticks:{
callback:function(label){
var month = label.split(";")[0];
var year = label.split(";")[1];
if(month === "February"){
return year;
}else{
return "";
}
}
}
}],
yAxes:[{
ticks:{
beginAtZero:true
}
}]
}
}
});<body>
<canvas id="c" width="400" height="300"></canvas>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
</body>
var myChart = new Chart(ctx, {
type: "line",
data: {
datasets: [{
data: [20, 50, 100, 75, 25, 0],
label: "Left dataset",
// This binds the dataset to the left y axis
yAxisID: "left-y-axis",
}, {
data: [0.1, 0.5, 1.0, 2.0, 1.5, 0],
label: "Right dataset",
// This binds the dataset to the right y axis
yAxisID: "right-y-axis",
}],
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
},
options: {
scales: {
yAxes: [{
id: "left-y-axis",
type: "linear",
position: "left",
}, {
id: "right-y-axis",
type: "linear",
position: "right",
}],
},
},
});
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
