Develop Reference

Smaller scale for volume dataset in Chart JS

I'm graphing some stocks data and I wanted to put the volume in a smaller gray bar dataset at the bottom, like in Yahoo Finance.
What I want:
The small grey dataset is at the bottom.
What I get:
Three different Y scales and the size of the volume dataset is the same a the other.
My code:
When I create the chart:
new Chart(context, {
type: 'line',
data: {
labels: timestamps.map(n =>
(new Date(n * 1000)).toLocaleString()
),
datasets: [
dataset,
vdataset
]
},
options: {
maintainAspectRatio: false,
scales: {
xAxis: {
// type: 'time'
ticks: {
//autoSkip: true,
maxTicksLimit: 10
}
},
yAxes: [{
id: 'volume',
display: false
}],
y: {
beginAtZero: false
},
},
animation: {
duration: 0
},
plugins: {
autocolors: false,
annotation: {
annotations
}
},
tooltips: {
mode: 'nearest'
},
hover: {
intersect: false
}
}
});
The volume dataset:
{
type: 'bar',
label: `Volume`,
data: ...,
backgroundColor: 'transparent',
borderColor: 'grey',
fill: 'origin',
pointRadius: 0,
borderWidth: 2,
yAxisID: 'volume'
}

you need to give every dataset a yAxisID and then you should name your axis with that id like this:
Data:
var data = {
labels: labels,
datasets: [{
label: 'My First Dataset',
data: generateTestSeries(),
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1,
yAxisID: "something",
},
{
label: 'My Second Dataset',
data: generateTestSeries(),
fill: false,
borderColor: 'rgb(182, 50, 192)',
tension: 0.1,
yAxisID: "volume",
},
]
};
Scales:
scales: {
volume: {
axis: "y",
min: -80,
max: 60,
position: 'right',
},
something: {
axis: "y",
min: -20,
max: 70,
position: 'left',
}
}
Also you shouldn't have the list yAxes, that was how axes were defined in chartjs 2.x
Here is a fiddle to see this in use: JSFiddle
edit: If you want an invisible axis just set display to false as seen in the now updated Fiddle.

problem with chart js pie chart dataset data

This is the output of the code which I don't want since each data sits inside the other, I followed the documentation and other code examples but to no avail.
here is my code
let labelCharts: string[] = ['Supplier Debt', 'Raw Material Cost', 'Product Cost', 'Customer Debt'];
let myDoughnutChart = new Chart(this.ctx, {
type: 'pie',
data: {
labels: labelCharts,
datasets: [{
backgroundColor: "#3e95cd",
borderWidth: 10,
label: 'Supplier Debt',
data: [1, 5, 1],
},
{
data: rawMatCostArr,
backgroundColor: "#8e5ea2",
borderWidth: 10,
label: 'Raw Material Cost',
},
{
data: productCostArr,
backgroundColor: "#3cba9f",
borderWidth: 10,
label: 'Product Cost',
},
{
data: agentsDebtArr,
backgroundColor: "#e8c3b9",
borderWidth: 10,
label: 'Customer Debt',
}
]
},
options: {
maintainAspectRatio: false,
title: {
display: true,
text: 'Total'
}
}
});
note that each variable inside the data property is an array

To achieve the behaviour you want you only need 1 dataset and put the sum of the data in it. If you use it like shown in this config you get the desired outcome:
const config = {
type: 'pie',
data: {
labels: ['Supplier Debt', 'Raw Material Cost', 'Product Cost', 'Customer Debt'],
datasets: [{
backgroundColor: ["#3e95cd","#8e5ea2","#3cba9f","#e8c3b9"],
borderWidth: 10,
label: 'Supplier Debt',
data: [1, 5, 3,6],
}
]
},
options: {
maintainAspectRatio: false,
title: {
display: true,
text: 'Total'
}
}
};
You might want to decrease the border with since it will make your chart look a lot better.

Chart.js stacked column does not recognize the stack parameter, all in one column

I following the example of Chart.js for a stacked colum graph
http://www.chartjs.org/samples/latest/charts/bar/stacked-group.html
But when I try to replicate for my graph... the stack parameter does not works.
I use the version 2.4.
Here is my code
var color = Chart.helpers.color;
var barChartData = {
labels: [1,2,3,4,5,6,7]<?php // echo ($asse) ?> ,
datasets: [
{
label: '2016',
backgroundColor: color('#FCB441').alpha(0.5).rgbString(),
borderColor: '#FCB441',
borderWidth: 1,
data: [2,4,6,8,10,12,14] ,
stack: 0,
},
{
label: '2017',
backgroundColor: color('#FF0000').alpha(0.5).rgbString(),
borderColor: '#FF0000',
borderWidth: 2,
data: [2,4,6,8,10,12,14] ,
stack: 0,
},
{
label: '3',
backgroundColor: color('#FFFF00').alpha(0.5).rgbString(),
borderColor: '#FFFF00',
borderWidth: 2,
data: [1,2,3,4,5,6,7] ,
stack: 1,
},
]
};
window.onload = function() {
var ctx = document.getElementById('Chart_<?php echo $this->id ?>').getContext('2d');
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true
}]
}
}
});
};
`});
Here is my graph:
My Graph
I still don't get it where's my mistake, it seems like the demo code.
Thanks in advice.
Phil

Chart JS 2.x: How to show a tooltip in a timeline chart?

I am using Chart.js 2.x line chart to create a timeline events chart.
It is working well but I can't figure out how to show a tooltip when the mouse goes over a line. The information I want to show is the same shown in the labels (in the example below 'Label A', 'Label B' or 'Label C'. I tried to add the tooltips options enabled = true and mode = label but it doesn't work.
Here is my JSFiddle
Here is my code:
HTML
<div style="height: 250px;">
<canvas id="timeline"></canvas>
</div>
Javascript
var ctx = $("#timeline").get(0).getContext("2d");
var data = {
labels: ['Red','Blue','Yellow'],
datasets: [
{
label: 'Label A',
backgroundColor: "rgba(208,255,154,1)",
borderColor: "rgba(208,255,154,1)",
fill: false,
borderWidth : 15,
pointRadius : 0,
data: [
{
x: new Date(2014,01,01),
y: 3
}, {
x: new Date(2017,10,01),
y: 3
}
]
},
{
label: 'Label B',
backgroundColor: "rgba(208,255,154,1)",
borderColor: "rgba(208,255,154,1)",
fill: false,
borderWidth : 15,
pointRadius : 0,
data: [
{
x: new Date(2009,01,01),
y: 2
}, {
x: new Date(2012,09,01),
y: 2
}
]
},
{
label: 'Label C',
backgroundColor: "rgba(246,156,85,1)",
borderColor: "rgba(246,156,85,1)",
fill: false,
borderWidth : 15,
pointRadius : 0,
data: [
{
x: new Date(2017,01,01),
y: 1
}, {
x: new Date(2017,08,01),
y: 1
}
]
},
]
};
var options = {
maintainAspectRatio: false,
legend : {
display : true
},
scales: {
xAxes: [{
type: 'time',
unit: 'month',
unitStepSize: 1,
time: {
displayFormats: {
'month': 'MM/YY',
'quarter': 'MM/YY'
}
},
position: 'bottom',
ticks : {
beginAtzero :true
}},
{
type: 'time',
unit: 'month',
unitStepSize: 1,
time: {
displayFormats: {
'month': 'MM/YY',
'quarter': 'MM/YY'
}
},
position: 'top',
ticks : {
beginAtzero :true
}
}],
yAxes : [{
display: false,
scaleLabel : {
display : false
},
ticks : {
beginAtZero :true,
max : 5
}
}]
},
tooltips: {
enabled: true,
mode: 'label',
},
};
var scatterChart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});

I had to add the intersect: false property to the tooltips
Updated JSFiddle
Tooltip code:
tooltips: {
enabled: true,
intersect: false,
titleFontSize: 0,
callbacks: {
label: function(tooltipItems, data) {
return data.datasets[tooltipItems.datasetIndex].label || 'Other';
},
}
}

Chart.js v2 - combined stacked bar chart and 2 unstacked lines

Can Chart.js v2.x generate a combined stacked bar chart with 2 unstacked lines utilizing one y-axis? If so, how?
Below fiddle has 2 y-axis. The descending line, would render better if the right y-axis had a maximum value of 6000 as does the left axis.
jsfiddle example.
Below is the code for reference.
// set default no fill beneath the line
Chart.defaults.global.elements.line.fill = false;
// stacked bar with 2 unstacked lines - nope
var barChartData = {
labels: ['2016', '2017', '2018', '2019'],
datasets: [{
type: 'bar',
label: 'a',
yAxisID: "y-axis-0",
backgroundColor: "rgba(217,83,79,0.75)",
data: [1000, 2000, 4000, 5000]
}, {
type: 'bar',
label: 'b',
yAxisID: "y-axis-0",
backgroundColor: "rgba(92,184,92,0.75)",
data: [500, 600, 700, 800]
}, {
type: 'line',
label: 'c',
yAxisID: "y-axis-0",
backgroundColor: "rgba(51,51,51,0.5)",
data: [1500, 2600, 4700, 5800]
}, {
type: 'line',
label: 'd',
yAxisID: "y-axis-1",
backgroundColor: "rgba(151,187,205,0.5)",
data: [5000, 3000, 1000, 0]
}]
};
var ctx = document.getElementById("chart").getContext("2d");
// allocate and initialize a chart
var ch = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
title: {
display: true,
text: "Chart.js Bar Chart - Stacked"
},
tooltips: {
mode: 'label'
},
responsive: true,
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true,
position: "left",
id: "y-axis-0",
}, {
stacked: false,
position: "right",
id: "y-axis-1",
}]
}
}
});

Turns out, I just needed a modification or two so that the 2 y-axis use the same scale. See this jsfiddle. Now the chart renders better. The key, in my case, is adding a ticks node and these two properties to both yAxes objects:
ticks: {
beginAtZero: true,
suggestedMax: 5800
}
Naturally, the suggestedMax value would not be hard coded. Further, since the 2 scales are now the same, I hid the right scale with this property setting display: false.
As the fiddle shows, we now have 2 unstacked lines on a stacked bar chart nicely rendered.

Use this as the data for the graph:
var barData = {
labels: ['test1','test2'],
datasets: [
{
label: 'stack1',
backgroundColor: 'yellow',
borderColor: 'white',
borderWidth: 1,
stack: '1',
data: [5,4,3,2,1]
},
{
label: 'stack2',
backgroundColor: 'blue',
borderColor: 'white',
borderWidth: 1,
stack: '2',
data: [1,2,3,4,5]
}
]
};
This is the component to render the data:
<Bar data={barData} options={{scales: { xAxes: [{stacked:true}} }], yAxes:[{stacked:true}}] } }}}} />