Menu
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.
805
Click anywhere in the chart you want to change to a combo chart to show the CHART TOOLS. Click DESIGN > Change Chart Type. On the All Charts tab, choose Combo, and then pick the Clustered Column - Line on Secondary Axis chart.
A multi-axis line chart, as the name suggests, is an interactive line chart that can be configured for multiple axes. It is a special type of chart that allows multiple y-axes to be rendered in the same chart.
Mixed Chart Types. With Chart.js, it is possible to create mixed charts that are a combination of two or more different chart types. A common example is a bar chart that also includes a line dataset. Creating a mixed chart starts with the initialization of a basic chart.
Our example below contains two series, in which the bars describe the projected sales for each month in a calendar year, and the line chart describes the real sales for the same months done by our company. The post [Simple Trick]-How to Combined Bar and line charts Using Chart.js? appeared first on Software Development | Programming Tutorials.
A mix of bars and lines in the same graph can be useful when comparing values in different datasets since the mix provides a clear view of which dataset is high, lower, or equal. Let’s understand with an example using the chart js, let’s I want to create a combination chart to compare the projected sales with the real sales for each month.
To create a chart with multiple lines, we can just create a line chart that display multiple data sets. To do that, we first start with including the Chart.js library. Also, we add the moment.js library for formatting dates, and a canvas element for Chart.js to render the chart in.
Found 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>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