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.
Related
I have a chartjs line chart that has multiple lines like that;
I have been trying to add a date-time selector but I am not able to update my chart because I don't get how to reach the datas of my chart. Here is my chart decleration;
var ctx = document.getElementById('canvas');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: time1, time2,
datasets: [
{
label: 'Temperature - 1',
data: temp1,
backgroundColor: 'transparent',
borderColor: 'red',
borderWidth: 3
},
{
label: 'Temperature - 2',
data: temp2,
backgroundColor: 'transparent',
borderColor: 'purple',
borderWidth: 3
},
{
label: 'Humidity - 1',
data: hum1,
backgroundColor: 'transparent',
borderColor: 'green',
borderWidth: 3
},
{
label: 'Humidity - 2',
data: hum2,
backgroundColor: 'transparent',
borderColor: 'yellow',
borderWidth: 3
}]
},
options: {
elements: {
line: {
tension: 0
}
},
scales: {
y: {
title: "Temperature/Humidity",
beginAtZero: true,
min: 10,
max: 60
}
}
}
});
time1, time2, temp1, temp2, hum1, hum2 are all array. When I want to update the chart using chart.update() function that I read at its own documentation, as I said I don't get it how to reach to data arrays like temp1, temp2.
Something like myChart.data.datasets.data would not work, making them like json;
{first_data:{
label: 'Temperature - 1',
data: temp1,
backgroundColor: 'transparent',
borderColor: 'red',
borderWidth: 3
}},
Doesn't work also, how can I reach to temp1 for example?
SOLUTION:
Because of my carelessness I had asked a nonsense question. Because of myChart.data.datasets is an object, I am able to reach to temp1 like myChart.data.datasets[0].data, sorry everyone
You will need to target the specific dataset you want to get the data from so to get the data of the Temperature - 1 dataset you will need to target it like this: myChart.data.datasets[0].data
Example:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'orange'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'pink'
}
]
},
options: {}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
const myChart = new Chart(ctx, options);
console.log(myChart.data.datasets[0].label)
console.log(myChart.data.datasets[0].data)
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>
I'm using a chartJS Horizontal Bar to visualize some data & the annotation plugin to add vertical lines in the plot area.
What I want to accomplish: showing annotation values/color-box in the tooltip.
What I've done thus far: I've added in bar charts to get the values in the tooltip. (see images & code below).
Where I'm stuck: I would like to hide/offset aBar 1 & aBar 2; in other words, I don't want these bars to appear at all, but I do want the entries to appear in the tooltip. (please see second image).
Current Output
Desired Output
Code
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: false, // RANGE
datasets: [
{
type: 'horizontalBar',
label: 'Bar 1',
backgroundColor: 'rgba(121,185,29,0.85)',
stack: 'Stack 0',
data: [
16 ],
borderColor: 'white',
borderWidth: 0.5
},
{
type: 'horizontalBar',
label: 'Bar 2',
backgroundColor: 'rgba(246,171,0,0.3125)',
stack: 'Stack 0',
data: [
24 ]
},
{
type: 'horizontalBar',
label: 'Bar 3',
backgroundColor: 'rgba(226,33,27,0.5)',
stack: 'Stack 0',
data: [
80 ]
},
{
type: 'horizontalBar',
label: 'aBar 1',
backgroundColor: '#20C5CB',
stack: 'Stack 1',
data: [
6 ]
},
{
type: 'horizontalBar',
label: 'aBar 2',
backgroundColor: '#7f3391',
stack: 'Stack 2',
data: [
120 ]
},
]
},
options: {
responsive: true,
legend:false,
responsive: true,
maintainAspectRatio: false,
title: false,
tooltips: {
mode: 'index',
intersect: true,
bodyFontSize:10,
titleFontSize:0,
titleMarginBottom:0,
},
plugins: {
labels:false,
},
scales: {
xAxes: [{
ticks: {
max: 124,
min: 0,
stepSize: 10
}
}]
},
annotation: {
annotations: [
{
type: 'line',
mode: 'vertical',
scaleID: 'x-axis-0',
value: 6,
borderColor: '#20C5CB',
borderWidth: 3,
borderDash: [6,3],
label: {
enabled: false,
content: 'Annotation 2',
fontSize: 8,
fontStyle: 'normal',
rotation: 0,
xPadding: 2,
yPadding: 2,
cornerRadius: 1,
}
},
{
type: 'line',
mode: 'vertical',
scaleID: 'x-axis-0',
value: 120,
borderColor: '#7f3391',
borderWidth: 3,
label: {
enabled: false,
content: 'Annotation 1',
fontSize: 8,
fontStyle: 'normal',
rotation: 0,
xPadding: 2,
yPadding: 2,
cornerRadius: 1,
}
}
]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.min.js"></script>
<canvas id="myChart"></canvas>
Add the hidden tag to datasets of the series you want to hide like this:
type: 'horizontalBar',
label: 'aBar 1',
backgroundColor: '#20C5CB',
stack: 'Stack 1',
hidden: true,
data: [6],
and use a callback to the label tooltip like this:
tooltips: {
mode: 'index',
intersect: true,
bodyFontSize:10,
titleFontSize:0,
titleMarginBottom:0,
callbacks: {
label: function(tooltipItem, data) {
return data.datasets.map(ds => ds.label + ': ' + ds.data[tooltipItem.index])
}
}
},
Found solution here: Chartjs show hidden data on tooltip
How can you disable tooltips on one of the plots on my multi plot graph, but keep the others.
I have tried to set 'showToolTip' to false on the plot I dont want tooltips for but this does not work.
let ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'scatter',
data :{
labels : cLabels,
datasets : [{
label: 'Points',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
pointStyle: 'circle',
pointRadius: 10,
data : cData,
showTooltips: false, //<- THis line does not work, and there is a global property to remove all tooltips
order: 2,
},{
label: '',
backgroundColor: 'rgb(255, 255, 255)',
borderColor: 'rgb(255, 255, 255)',
pointStyle: 'circle',
pointRadius: 5,
data : cData,
order: 1,
},{
You can use a tooltip filter callback function. It returns true if a tooltip should be displayed, false otherwise. The following example specifies that tooltips should be displayed for the first dataset only.
options: {
...
tooltips: {
filter: tooltipItem => tooltipItem.datasetIndex == 0
}
Please have a look at the runnable code sample that follows.
const data = [
{
series: [
{date: '2020-01', value: 5 },
{date: '2020-02', value: 20 },
{date: '2020-03', value: 10 },
{date: '2020-04', value: 15 }
]
},
{
series: [
{date: '2020-01', value: 10 },
{date: '2020-02', value: 8 },
{date: '2020-03', value: 16 },
{date: '2020-04', value: 12 }
]
}
];
new Chart(document.getElementById('canvas'), {
type: 'line',
data: {
datasets: [{
label: data[0].name,
fill: false,
backgroundColor: 'red',
borderColor: 'red',
data: data[0].series.map(x => ({ x: new Date(x.date), y: x.value }))
}, {
label: data[1].name,
fill: false,
backgroundColor: 'blue',
borderColor: 'blue',
data: data[1].series.map(x => ({ x: new Date(x.date), y: x.value }))
}]
},
options: {
responsive: true,
title: {
display: false
},
legend: {
display: false
},
tooltips: {
filter: tooltipItem => tooltipItem.datasetIndex == 0
},
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'month',
displayFormats: {
'month': 'MMM YYYY',
},
tooltipFormat: 'MMM YYYY'
}
}],
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="canvas" height="90"></canvas>
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
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}}] } }}}} />