Chartjs v3 overlap stacked bar chart with groups - chart.js

I want to create stacked bar chart with groups in use chart.js v3. I
my chart output
I did it and i am getting the following image. But here, instead of the sum of label 1 and label2 appearing as 7000, how can I show the intersection of label 1 and label 2 together as 4000 by starting from the x-axis.
type: 'bar',
data: {
labels: labelsVals,
datasets: [
{
label: 'Label 1',
data: seriesValsPaid,
backgroundColor: 'rgba(21, 169, 225, 0.6)',
borderColor: 'rgba(21, 169, 225, 1)',
borderWidth: 1,
stack: 'first',
},
{
label: 'Label 2',
data: seriesValsWaiting,
backgroundColor: 'rgba(21, 122, 225, 0.6)',
borderColor: 'rgba(21, 122, 225, 1)',
borderWidth: 1,
stack: 'first',
},
{
label: 'Label 3',
data: seriesValsOutgoing,
backgroundColor: 'rgba(255, 0, 0, 0.6)',
borderColor: 'rgba(255, 0, 0, 1)',
borderWidth: 1,
stack: 'second',
}
]
},
});


options: {
responsive: true,
maintainAspectRatio: false,
scales: {
'bar-x-axis1': {
stacked: true,
display:false
},
'bar-x-axis2': {
stacked: true,
display:false
},
y: {
stacked: false,
beginAtZero: true
// display:false
}
}
}
This is how I solved the problem.

Related

react-chartjs-2 adding axes title to y axes for 2 axes line chart with 3 datasets

hi i have a question on adding title to axes for line chart. i am current using react-chartjs-2 and chart.js v4.2 . i have a line chart with 3 different datasets and i want two y axes. this is my current config for line component
const optionsMulti = {
responsive: true,
interaction: {
mode: "index" as const,
intersect: false,
},
stacked: false,
plugins: {
title: {
display: true,
text: "Test Chart",
},
},
scales: {
y: {
type: "linear" as const,
display: true,
position: "left" as const,
title: { display: true, title: "title1" },
},
y1: {
type: "linear" as const,
display: true,
position: "right" as const,
grid: {
drawOnChartArea: false,
},
title: { display: true, text: "title2" },
},
},
};
const data = {
labels: "label",
datasets: [
{
label: "one",
data: data1,
borderColor: "rgb(255, 99, 132)",
backgroundColor: "rgba(255, 99, 132, 0.5)",
yAxisID: "y",
},
{
label: "two",
data: data2,
borderColor: "rgb(53, 162, 235)",
backgroundColor: "rgba(53, 162, 235, 0.5)",
yAxisID: "y",
},
{
label: "three",
data: data3,
borderColor: "rgba(75, 192, 192)",
backgroundColor: "rgba(75, 192, 192, 0.5)",
yAxisID: "y1",
},
],
}
<Line options={optionsMulti} data={data} />
title for yAxisID: "y1", is showing but yAxisID: "y" title is not showing.
screenshot of current chart
how can i set the config for both y axes to show titles?

Multiple Axis Line Chart

I have problem getting dataset 2 (Score) to use the y1 scale, it seems to use scale for first dataset. Where is the error? I thought that using two y-scales should solve the problem with two very different datasets, but i only get the values from the "Completed" dataset, so I assume the data for "score" is there, but way way above the scale. . .
const CHART = document.getElementById("statChart");
let statChart = new Chart(CHART, {
type: 'line',
data: {
labels: ["1", "2", "3", "4", "5", "6", "7"],
datasets: [
{
type: 'line',
label: "Completed",
yAxesID: 'y',
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75, 192, 192, 0.4)",
borderColor: "rgba(75, 192, 192, 1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40]
},
{
type: 'line',
label: "Score",
yAxesID: 'y1',
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75, 192, 192, 0.4)",
borderColor: "rgba(75, 192, 192, 1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHitRadius: 10,
data: [8500, 8900, 8000, 8100, 5600, 5500, 4900]
}
]},
options: {
responsive: true,
interaction: {
mode: 'index',
intersect: false,
},
plugins:{
title: {
display: true,
text: 'Your Result'
},
tooltips: {
mode: 'nearest',
intersect: true,
},},
scales: {
y: {
type: 'linear',
display: true,
position: 'left',
min: 0,
max: 100
},
y1: {
type: 'linear',
display: true,
position: 'right',
min: 0,
max: 10000,
// grid line settings
grid: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
}
}
}
}
});

You have a typo, yAxesID should be yAxisID if you change that it will work fine as you can see in the example below:
const CHART = document.getElementById("statChart");
let statChart = new Chart(CHART, {
type: 'line',
data: {
labels: ["1", "2", "3", "4", "5", "6", "7"],
datasets: [{
type: 'line',
label: "Completed",
yAxisID: 'y',
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75, 192, 192, 0.4)",
borderColor: "rgba(75, 192, 192, 1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40]
},
{
type: 'line',
label: "Score",
yAxisID: 'y1',
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75, 192, 192, 0.4)",
borderColor: "rgba(75, 192, 192, 1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHitRadius: 10,
data: [8500, 8900, 8000, 8100, 5600, 5500, 4900]
}
]
},
options: {
responsive: true,
interaction: {
mode: 'index',
intersect: false,
},
plugins: {
title: {
display: true,
text: 'Your Result'
},
tooltips: {
mode: 'nearest',
intersect: true,
},
},
scales: {
y: {
type: 'linear',
display: true,
position: 'left',
min: 0,
max: 100
},
y1: {
type: 'linear',
display: true,
position: 'right',
min: 0,
max: 10000,
// grid line settings
grid: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
}
}
}
}
});
<body>
<canvas id="statChart" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.2/chart.js" integrity="sha512-n8DscwKN6+Yjr7rI6mL+m9nS4uCEgIrKRFcP0EOkIvzOLUyQgOjWK15hRfoCJQZe0s6XrARyXjpvGFo1w9N3xg==" crossorigin="anonymous"></script>
</body>

Wrong display of xAxes in Chartjs

I have a strange issue. I'm getting the date from the database. All visualization was good. Then I deleted one record and add another one on the same date and time. But that record moved on the right in the chart instead to be ordered on left:
The js code is this:
$(document).ready(function(){
$.ajax({
url: "js/json/otv_fil_iskar/data.php",
method: "POST",
success: function(data) {
console.log(data);
var progress = document.getElementById('animationProgress');
var dateANDtime = [];
var Gblok9osx = [];
var Gblok9osy = [];
var Gblok11osx = [];
var Gblok11osy = [];
var Gfilblok10 = [];
var Gfilblok11 = [];
var Gcvn = [];
var Gndk2 = [];
for(var i in data) {
dateANDtime.push(data[i].to_char);
Gblok9osx.push(data[i].blok9osx);
Gblok9osy.push(data[i].blok9osy);
Gblok11osx.push(data[i].blok11osx);
Gblok11osy.push(data[i].blok11osy);
Gfilblok10.push(data[i].filblok10);
Gfilblok11.push(data[i].filblok11);
Gcvn.push(data[i].cvn);
Gndk2.push(data[i].ndk2);
}
var chartdata = {
labels: dateANDtime,
datasets : [
{fill: false,
label: 'Отвес блок 9 x',
backgroundColor: 'rgba(199, 228, 238, 0.75)',
borderColor: 'rgba(1, 150, 200, 0.75)',
//hoverBackgroundColor: 'rgba(200, 200, 200, 0.75)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: Gblok9osx,
hidden: true
},
{fill: false,
label: 'Отвес блок 9 y',
backgroundColor: 'rgba(163, 147, 222, 0.75)',
borderColor: 'rgba(50, 10, 200, 0.75)',
//hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: Gblok9osy,
hidden: true
},
{fill: false,
label: 'Отвес блок 11 x',
backgroundColor: 'rgba(221, 221, 241, 0.75)',
borderColor: 'rgba(100, 100, 200, 0.75)',
//hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: Gblok11osx,
hidden: true
},
{fill: false,
label: 'Отвес блок 11 y',
backgroundColor: 'rgba(147, 227, 227, 0.75)',
borderColor: 'rgba(1, 200, 200, 0.75)',
//hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: Gblok11osy,
hidden: true
},
{fill: false,
label: 'Филтрация блок 10',
backgroundColor: 'rgba(139, 105, 132, 0.75)',
borderColor: 'rgba(255, 1, 200, 0.75)',
//hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: Gfilblok10,
hidden: true
},
{fill: false,
label: 'Филтрация блок 11',
backgroundColor: 'rgba(0, 200, 1, 1)',
borderColor: 'rgba(0, 101,1, 0.75)',
hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
hoverBorderColor: 'rgba(50, 50, 50, 1)',
data: Gfilblok11,
hidden: true
},
{fill: false,
label: 'КВН',
backgroundColor: 'rgba(30, 100, 100, 1)',
borderColor: 'rgba(100, 200,1, 0.75)',
hoverBackgroundColor: 'rgba(101, 200, 200, 1)',
hoverBorderColor: 'rgba(50, 50, 50, 1)',
data: Gcvn,
hidden: false
},
{fill: false,
label: 'Ниво дренажен кладенец',
backgroundColor: 'rgba(30, 100, 100, 1)',
borderColor: 'rgba(100, 200,1, 0.75)',
hoverBackgroundColor: 'rgba(101, 200, 200, 1)',
hoverBorderColor: 'rgba(50, 50, 50, 1)',
data: Gndk2,
hidden: true
}
]
};
$('#reset_zoom').click(function() {
barGraph.resetZoom();
})
$("#save-btn").click(function() {
$("#mycanvas").get(0).toBlob(function(blob) {
saveAs(blob, "chart_1.png");
});
});
var ctx = document.getElementById("mycanvas");
var barGraph = new Chart(ctx, {
type: 'line',
data: chartdata,
options: {
title: {
display: true,
text: 'Диаграма - Отвеси и филтрации'
},
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: '[mm] , [l/s]'
},
ticks: {
beginAtZero:false
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Дата/Час'
},
ticks: {
beginAtZero:true
}
}]
},
// Container for pan options
pan: {
// Boolean to enable panning
enabled: true,
// Panning directions. Remove the appropriate direction to disable
// Eg. 'y' would only allow panning in the y direction
mode: 'y'
},
// Container for zoom options
zoom: {
// Boolean to enable zooming
enabled: true,
// Zooming directions. Remove the appropriate direction to disable
// Eg. 'y' would only allow zooming in the y direction
mode: 'xy'
},
animation: {
duration: 2000,
onProgress: function(animation) {
progress.value = animation.currentStep / animation.numSteps;
},
onComplete: function() {
window.setTimeout(function() {
progress.value = 0;
}, 2000);
}
},
legend: {
display: true,
labels: {
//fontColor: 'rgb(255, 99, 132)'
usePointStyle: true
}
}
},
plugins: [{
beforeDraw: function(c) {
var reset_zoom = document.getElementById("reset_zoom"); //reset button
var ticks = c.scales['x-axis-0', 'y-axis-0'].ticks.length; //x-axis ticks array
var labels = c.data.labels.length; //labels array
if (ticks < labels) reset_zoom.hidden = false;
else reset_zoom.hidden = true;
}
}]
}); //end data
},
error: function(data) {
console.log(data);
}
});
});
The same think is happening when i don't have records in particular time of the day.
I changed xAxes option in the same graph and it's similar output:
xAxes: [{
type: 'time',
time: {
displayFormats: {
'hour': 'DD MMM YYYY г. HH:MM:SS ч.'
}
},
scaleLabel: {
display: true,
labelString: 'Дата/Час'
},
ticks: {
beginAtZero: true
}
}]

The order in the dataset is important because chart.js does not do any sorting of the values. Make sure that you fetch data from the database ordered by date and not id which usually is default.

Chartjs : Remove specific labels

I have the below stacked group chart.
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script>
var barChartData = {
labels: ['January', 'March', 'June', 'September', 'December'],
datasets: [{
label: 'Apple',
borderColor: 'rgba(255, 50, 50,1)',
backgroundColor: 'rgba(255, 50, 50,0.5)',
stack: 'Stack 0',
data: [3,6,4,8,2]
}, {
label: 'Orange',
borderColor: 'rgba(255, 160, 242,1)',
backgroundColor: 'rgba(255, 160, 242,0.5)',
stack: 'Stack 0',
data: [2,1,3,0,1]
}, {
label: 'Pear',
borderColor: 'rgba(79, 158, 255,1)',
backgroundColor: 'rgba(79, 158, 255,0.5)',
stack: 'Stack 0',
data: [3,4,1,5,2]
}, {
label: 'Apple',
borderColor: 'rgba(255, 50, 50,1)',
backgroundColor: 'rgba(255, 50, 50,0.5)',
stack: 'Stack 1',
data: [7,16,10,8,5]
},{
label: 'Mango',
borderColor: 'rgba(100, 244, 97,1)',
backgroundColor: 'rgba(100, 244, 97,0.5)',
stack: 'Stack 1',
data: [4,9,12,5,7]
}, {
label: 'Banana',
borderColor: 'rgba(255, 252, 91,1)',
backgroundColor: 'rgba(255, 252, 91,0.5)',
stack: 'Stack 1',
data: [3,6,13,14,5]
}, {
label: 'Orange',
borderColor: 'rgba(255, 160, 242,1)',
backgroundColor: 'rgba(255, 160, 242,0.5)',
stack: 'Stack 1',
data: [7,12,3,0,2]
}, {
label: 'Cherry',
borderColor: 'rgba(255, 132, 38,1)',
backgroundColor: 'rgba(255, 132, 38,0.5)',
stack: 'Stack 1',
data: [8,4,7,11,6]
}, {
label: 'Pear',
borderColor: 'rgba(79, 158, 255,1)',
backgroundColor: 'rgba(79, 158, 255,0.5)',
stack: 'Stack 1',
data: [8,14,9,12,16]
}]
};
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
legend: {
display:true,
},
tooltips: {
mode: 'x',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
</script>
I would like to do two things:
1) Remove the redundant Apple, Orange and Pear labels
2) Highlight/Darken just the border on the individual stacks in the graph with the colors of those individual stacks. Like how the legend is.
Any help would be greatly appreciated.
Image of my graph

You can add custom logic to legend options like:
options: {
legend: {
display: true,
labels: {
generateLabels: function (chart) { ...
You can reach the labels here, customize their color, text, you can group them etc. So in this case you have to group the labels by their text first like
const labelTexts = []
const newLabels = []
labels = Chart.defaults.global.legend.labels.generateLabels(chart);
// group labels
labels.map((label) => {
if (labelTexts.indexOf(label.text) === -1) {
labelTexts.push(label.text)
}
})
labelTexts.map((text) => {
labels.map((label) => {
if (label.text === text) {
newLabels.push(label)
}
})
})
Then you can remove the redundant labels like:
for (var i = 0; i < newLabels.length - 2; i++) {
if (newLabels[i].text !== newLabels[i + 1].text) {
newLabels2.push(newLabels[i])
}
}
Check a working example here

how to set chart.js grid color for line chart

I want to change the grids color of my line chart using options field but I have no idea from where to begin.
I First tried to change the canvas backgroud colors using gradient but the results weren't good.
canvas{
background:linear-gradient(top, #ea1a07 0%, #f4b841 75%,#f2dd43 100%);
}
However, I didn't get what I want because as you see in the above image, not only the grids were colored but also the x values, y labels and the chart legend were colored too.
Picture of the result I'm getting with this css code
Example of what I want to get
my chart.js options are
options = {
scales: {
xAxes: [{
gridLines: {
color: 'rgba(171,171,171,1)',
lineWidth: 1
}
}],
yAxes: [{
ticks: {
beginAtZero: true,
max: 100,
min: 0,
stepSize: 10
},
gridLines: {
color: 'rgba(171,171,171,1)',
lineWidth: 0.5
}
}]
},
responsive: true
};
So, is there a way to set only the grid's background to 3 different colors (with gradient or not)?
NB: I'm using chart.js with angular 2 (ng2-charts)

The easiest way to do this is to use the chartjs-plugin-annotation plugin and configure 3 box annotations bound to your Y axis (each box would have a different color).
Here is an example below (and you can see it in action with this codepen).
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Points',
data: [
{x: 0, y: 2},
{x: 1, y: 3},
{x: 2, y: 2},
{x: 1.02, y: 0.4},
{x: 0, y: -1}
],
backgroundColor: 'rgba(123, 83, 252, 0.8)',
borderColor: 'rgba(33, 232, 234, 1)',
borderWidth: 1,
fill: false,
}],
},
options: {
title: {
display: true,
text: 'Chart.js - Gridline Background',
},
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
ticks: {
min: -1,
max: 8,
stepSize: 1,
fixedStepSize: 1,
},
gridLines: {
color: 'rgba(171,171,171,1)',
lineWidth: 1
}
}],
yAxes: [{
afterUpdate: function(scaleInstance) {
console.dir(scaleInstance);
},
ticks: {
min: -2,
max: 4,
stepSize: 1,
fixedStepSize: 1,
},
gridLines: {
color: 'rgba(171,171,171,1)',
lineWidth: 0.5
}
}]
},
annotation: {
annotations: [{
type: 'box',
yScaleID: 'y-axis-0',
yMin: 1,
yMax: 4,
borderColor: 'rgba(255, 51, 51, 0.25)',
borderWidth: 2,
backgroundColor: 'rgba(255, 51, 51, 0.25)',
}, {
type: 'box',
yScaleID: 'y-axis-0',
yMin: -1,
yMax: 1,
borderColor: 'rgba(255, 255, 0, 0.25)',
borderWidth: 1,
backgroundColor: 'rgba(255, 255, 0, 0.25)',
}, {
type: 'box',
yScaleID: 'y-axis-0',
yMin: -2,
yMax: -1,
borderColor: 'rgba(0, 204, 0, 0.25)',
borderWidth: 1,
backgroundColor: 'rgba(0, 204, 0, 0.25)',
}],
}
}
});
It's important to note that the annotations are painted on top of the chart, so your annotation color needs to contain some transparency to see the stuff behind it.
There is no problem using this plugin with ng2-charts. Just add the source in a <script> in your app's html file and add the annotation property into your options object. Here is an Angular2 / ng2-charts example demonstrating how to use the annotations plugin.