I'm building out a chart using chart.js, it is a stacked bar chart with a scatter type. My problem is that the scale on the x-axis of the bar chart does not properly represent the x-axis scale of the scatter. I spent the past few hours looking over the docs and browsing SOF and came up with This Answer, which makes sense with respect to the bar graph, just not the scatter graph which is plotted by x-y coordinates.
var chartDefault = {
type: 'bar',
data: {
labels: ['30', '45', '60', '90', '120', '120+'],
datasets: [{
type: 'bar',
label: 'Receivable',
data: [730, 492.5, 120, 4732.5, 2760.85, 0],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}, {
type: 'bar',
label: 'Past Due',
data: [2760.85, 0, 0, 0, 0, 0],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255,99,132,1)',
borderWidth: 1
}, {
type: 'scatter',
label: 'Invoice',
data: [{"x":106,"y":177.7},{"x":101,"y":1},{"x":92,"y":1},{"x":88,"y":120},{"x":65,"y":4},{"x":66,"y":120},{"x":59,"y":120},{"x":36,"y":372.5},{"x":35,"y":120},{"x":29,"y":120},{"x":4,"y":185},{"x":4,"y":120},{"x":1,"y":240},{"x":1,"y":65}],
xAxisID: 'invoice-time',
yAxisID: 'invoice-amount',
backgroundColor: 'rgba(75, 00, 150, 0.2)',
borderColor: 'rgba(75, 00, 150,1)',
borderWidth: 2
}]
},
options: {
scales: {
xAxes: [{
display: true,
stacked: true,
scaleLabel: {
display: true,
labelString: 'Days'
},
}, {
id: 'invoice-time',
display: false,
stacked: false,
scaleLabel: {
display: false,
labelString: 'Days'
},
ticks: {
beginAtZero: true,
stepSize: 1,
suggestedMax: 125
}
}],
yAxes: [{
display: true,
stacked: true,
scaleLabel: {
display: true,
labelString: 'Dollar Amount'
},
ticks: {
beginAtZero: true,
}
}, {
id: 'invoice-amount',
display: false,
stacked: false,
scaleLabel: {
display: false,
labelString: 'Dollar Amount'
},
ticks: {
beginAtZero: true,
}
}]
},
}
};
var chart = new Chart($('#creditSat'), chartDefault);<script src=".js/2.6.0/Chart.bundle.min.js"></script>
<script src=".1.1/jquery.min.js"></script>
<canvas id="creditSat"></canvas>I'm building out a chart using chart.js, it is a stacked bar chart with a scatter type. My problem is that the scale on the x-axis of the bar chart does not properly represent the x-axis scale of the scatter. I spent the past few hours looking over the docs and browsing SOF and came up with This Answer, which makes sense with respect to the bar graph, just not the scatter graph which is plotted by x-y coordinates.
var chartDefault = {
type: 'bar',
data: {
labels: ['30', '45', '60', '90', '120', '120+'],
datasets: [{
type: 'bar',
label: 'Receivable',
data: [730, 492.5, 120, 4732.5, 2760.85, 0],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}, {
type: 'bar',
label: 'Past Due',
data: [2760.85, 0, 0, 0, 0, 0],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255,99,132,1)',
borderWidth: 1
}, {
type: 'scatter',
label: 'Invoice',
data: [{"x":106,"y":177.7},{"x":101,"y":1},{"x":92,"y":1},{"x":88,"y":120},{"x":65,"y":4},{"x":66,"y":120},{"x":59,"y":120},{"x":36,"y":372.5},{"x":35,"y":120},{"x":29,"y":120},{"x":4,"y":185},{"x":4,"y":120},{"x":1,"y":240},{"x":1,"y":65}],
xAxisID: 'invoice-time',
yAxisID: 'invoice-amount',
backgroundColor: 'rgba(75, 00, 150, 0.2)',
borderColor: 'rgba(75, 00, 150,1)',
borderWidth: 2
}]
},
options: {
scales: {
xAxes: [{
display: true,
stacked: true,
scaleLabel: {
display: true,
labelString: 'Days'
},
}, {
id: 'invoice-time',
display: false,
stacked: false,
scaleLabel: {
display: false,
labelString: 'Days'
},
ticks: {
beginAtZero: true,
stepSize: 1,
suggestedMax: 125
}
}],
yAxes: [{
display: true,
stacked: true,
scaleLabel: {
display: true,
labelString: 'Dollar Amount'
},
ticks: {
beginAtZero: true,
}
}, {
id: 'invoice-amount',
display: false,
stacked: false,
scaleLabel: {
display: false,
labelString: 'Dollar Amount'
},
ticks: {
beginAtZero: true,
}
}]
},
}
};
var chart = new Chart($('#creditSat'), chartDefault);<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="creditSat"></canvas>So if you look at the snippet for the scatter dataset, there are 11 data points but only 6 are mapped. I would like all 11 to be mapped, I know there is some overlap and that makes sense. Essentially this is a representation of invoices, you have the Receivables, Past Due represented by the bar and then the points on the line represent the invoices themselves. Any help would be much appreciated.
Share Improve this question asked Jul 21, 2017 at 18:49 Mark Carpenter JrMark Carpenter Jr 8421 gold badge17 silver badges34 bronze badges2 Answers
Reset to default 16Found the answer, the axis for the line graph needs the type specified, like so:
{
id: 'invoice-time',
type: 'linear',
display: false,
stacked: false,
scaleLabel: {
display: false,
labelString: 'Days'
},
ticks: {
beginAtZero: true,
stepSize: 1,
suggestedMax: 125
}
}
var chartDefault = {
type: 'bar',
data: {
labels: ['30', '45', '60', '90', '120', '120+'],
datasets: [{
type: 'bar',
label: 'Receivable',
data: [730, 492.5, 120, 4732.5, 2760.85, 0],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}, {
type: 'bar',
label: 'Past Due',
data: [2760.85, 0, 0, 0, 0, 0],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255,99,132,1)',
borderWidth: 1
}, {
type: 'scatter',
label: 'Invoice',
data: [{"x":106,"y":177.7},{"x":101,"y":1},{"x":92,"y":1},{"x":88,"y":120},{"x":65,"y":4},{"x":66,"y":120},{"x":59,"y":120},{"x":36,"y":372.5},{"x":35,"y":120},{"x":29,"y":120},{"x":4,"y":185},{"x":4,"y":120},{"x":1,"y":240},{"x":1,"y":65}],
xAxisID: 'invoice-time',
yAxisID: 'invoice-amount',
backgroundColor: 'rgba(75, 00, 150, 0.2)',
borderColor: 'rgba(75, 00, 150,1)',
borderWidth: 2
}]
},
options: {
scales: {
xAxes: [{
display: true,
stacked: true,
scaleLabel: {
display: true,
labelString: 'Days'
},
}, {
id: 'invoice-time',
type: 'linear',
display: false,
stacked: false,
scaleLabel: {
display: false,
labelString: 'Days'
},
ticks: {
beginAtZero: true,
stepSize: 1,
suggestedMax: 125
}
}],
yAxes: [{
display: true,
stacked: true,
scaleLabel: {
display: true,
labelString: 'Dollar Amount'
},
ticks: {
beginAtZero: true,
}
}, {
id: 'invoice-amount',
display: false,
stacked: false,
scaleLabel: {
display: false,
labelString: 'Dollar Amount'
},
ticks: {
beginAtZero: true,
}
}]
},
}
};
var chart = new Chart($('#creditSat'), chartDefault);<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="creditSat"></canvas>The current accepted answer is not the correct way of doing this in the newer versions of Chart.js. Here is the example code from the documentation to achieve this:
const 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: {
'left-y-axis': {
type: 'linear',
position: 'left'
},
'right-y-axis': {
type: 'linear',
position: 'right'
}
}
}
});
source: https://www.chartjs.org/docs/latest/axes/cartesian/#creating-multiple-axes