I have a stacked chart with 3 datasets: Red, Green, Blue.
Here is the link to JSFiddle: https://jsfiddle.net/bwcfL58v/
Let's imagine that these are the layers, which overlay each others:
Red as bottom layer, then Green as middle layer and Blue as top layer.
Take a look at the third day: we don't see the red value, cause it behind the green value (red smaller than green here). So, the question is how to move Green to the bottom layer and Red higher. I need the biggest value to be always at the bottom and the smallest value - at the top, this will allow us to see all the datasets for each day.
All I need is to datasets always be visible and do not hide each others.
let ctx = document.getElementById("myChart");
let myChart = new Chart(ctx, {
type: "bar",
data: {
labels: ["Day 1", "Day 2", "Day 3"],
datasets: [
{
label: 'Blueberry',
data: [25, 30, 40],
backgroundColor: 'blue',
},
{
label: 'Greenberry',
data: [50, 60, 100],
backgroundColor: 'green',
},
{
label: 'Strawberry',
data: [100, 120, 50],
backgroundColor: 'red',
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [{
stacked: true,
gridLines: {
drawOnChartArea: false
},
}],
yAxes: [{
stacked: false,
display: false,
gridLines: {
drawOnChartArea: false
},
ticks: {
beginAtZero: true,
},
}]
},
legend: {
display: false
}
}
});
Related
I'm trying to get a stacked bar chart with two bars sharing a label next to each other on the x-axis but I'm having issues with getting the 2nd bar to display - currently it sits underneath the first bar (if you hide the 2021 value, you will see the 2022 bar will appear):
var barChartData = {
labels: ["January", "February"],
datasets: [{
data: [10, 20],
label: '2021',
backgroundColor: "#ffe100",
yAxisId: 'y-stacked',
}, {
data: [15, 30],
label: '2021 Total',
backgroundColor: "#ee0000",
yAxisId: 'y-stacked',
}, {
data: [6, 19],
label: '2022 YTD',
backgroundColor: "#555555",
}]
};
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = 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: false,
ticks: {
beginAtZero: true,
}
}, {
id: "y-stacked",
stacked: true,
display: false,
ticks: {
beginAtZero: true,
min: 0,
},
type: 'linear'
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.js"></script>
<div style="width: 100%">
<canvas id="canvas"></canvas>
</div>
Is there any way I can get the 2022 bar to show next to the 2021 bar?
I have tried adding another x-axis and changing the value of the x-axis stack to false but this just unstacks all three bars and sits them all next to each other
Turns out there is a stacked property you can use on the datasets and you don't need multiple axes
var barChartData = {
labels: ["January", "February"],
datasets: [{
data: [10, 20],
label: '2021',
backgroundColor: "#ffe100",
stack: 'stack 1',
}, {
data: [15, 30],
label: '2021 Total',
backgroundColor: "#ee0000",
stack: 'stack 1',
}, {
data: [6, 19],
label: '2022 YTD',
backgroundColor: "#555555",
stack: 'stack 2',
}]
};
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = 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,
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.js"></script>
<div style="width: 100%">
<canvas id="canvas"></canvas>
</div>
I'm using Chart.js 2 (React-chart-js 2) to display a line chart.
Does anyone have any reference to keeping the vertical gridline between each displayed label?
It seems like the vertical gridline only showing on each displayed label.
You can make use of the scriptable options for this, see example that hides every second label, you can adjust it to hide a bigger step if you want.
Example:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
scales: {
x: {
ticks: {
callback: function(val, index) {
return index % 2 === 0 ? this.getLabelForValue(val) : '';
}
}
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0/chart.js"></script>
</body>
You can try using following configuration
var config = {
type: 'line',
showDatapoints: true,
legend: { position: 'top' },
data: data,
options: {
responsive: true,
hoverMode: 'index',
stacked: false,
title: {
display: true,
text: 'Chart Title'
},
scales: {
yAxes: [{
type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: 'left',
id: 'y-axis-1',
},
{
type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: 'right',
id: 'y-axis-2',
// grid line settings
gridLines: {
drawOnChartArea: true, // only want the grid lines for one axis to show up
},
}],
}
}
};
Just a warning: I am new to chart.js!
I have a couple of horizontal bar charts and it works fine except one issue that I cannot shake off. I have 5 labels in y-axis but the legend on top of the graph only shows one small rectangle in the color of the first (topmost) bar and even that does not display the label itself, followed by list of labels. I thought it would display each label next to small bar same color as in chart.
Unfortunately, this is an intranet app and I cannot provide a link but here is what I have (data is passed to this function from an ajax call):
function drawRespChart(chartLabels, chartData) {
var ctx = $("#rtChart");
console.log("Labels Array: " + chartLabels);
console.log("Data Array: " + chartData);
if (chartRespTime)
chartRespTime.destroy();
var chart = {
labels: chartLabels,
datasets: [
{
label: chartLabels,
backgroundColor: ["#c45850", "#e8c3b9", "#3cba9f", "#8e5ea2", "#3e95cd"],
data: chartData
}
]
};
chartRespTime = new Chart(ctx, {
type: 'horizontalBar',
data: chart,
datalabels: {
anchor: 'end',
align: 'start',
},
options: {
title: {
display: true,
text: 'IDC Database Response Time (mili-seconds)'
},
legend: {
display: true,
labels: {
fontColor: 'rgb(255, 99, 132)'
}
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Count'
},
ticks: {
major: {
fontStyle: 'bold',
fontColor: '#FF0000'
}
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Response Time (ms)'
}
}]
},
plugins: {
datalabels: {
color: 'white',
display: function (context) {
return context.dataset.data[context.dataIndex] > 15;
},
font: {
weight: 'bold'
},
formatter: Math.round
}
},
maintainAspectRatio: true,
responsive: true,
showInlineValues: true,
centeredInllineValues: true,
tooltipCaretSize: 0
}
});
}
This is what I see in console window:
Labels Array: 0-350,350-700,700-1000,1000-1500
Data Array: 5065,32,27,3
What I see as legend is one rectangle, same color as first bar, followed by list of labels.
It seems that charts.js labels only works when you split the datasets.
Leaving an example.
https://jsfiddle.net/code4mk/1j62ey38/
datasets: [ {
label: 'Result',
fill:false,
data: aDatasets1,
backgroundColor: '#E91E63',
},
{
label: 'Result2',
fill:false,
data: aDatasets2,
backgroundColor: '#E91E93',
}];
As seen on image below, how can i stop the gridlines from crossing the y-axis? I think it looks cleaner that way.
Set options.scales.yAxes[0].gridLines.drawTicks to false and and some padding in gridLines.ticks.padding:
{
type: 'bar',
data: {
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
datasets: [{
label: 'Users',
data: [50, 60, 70, 180]
}]
},
options: {
scales: {
yAxes: [{
gridLines: {
drawTicks: false,
},
ticks: {
padding: 8,
}
}]
}
}
}
I am new to front-end and I created something like this: https://codepen.io/mihaela-dobre/pen/RwWGbNp
I have 3 side buttons and if I click on them, I see the same chart displayed.
How can I write a JS function in order to display something else? For example, I want to display this chart when clicking on the second button:
var ctx_3 = document.getElementById('chartEight').getContext('2d');
var chartEight = new Chart(ctx_3, {
type: 'line',
data: {
labels: ['2020-03-10','2020-03-11','2020-03-12'],
datasets: [{
label: 'Trust Higher Than Eight Profit Per Day',
data: [100,800,600],
borderColor: [
'rgba(251,127,20,1)',
'rgba(251,127,20,1)',
'rgba(251,127,20,1)'
],
borderWidth: 3,
lineTension: 0
}]
},
options: {
scales: {
yAxes: [{
ticks: {
fontColor: "#CCC",
beginAtZero: true
},
gridLines: {
zeroLineColor: "#CCC"
}
}],
xAxes: [{
display:true,
ticks: {
fontColor: "#CCC",
}
}]
},
legend: {
labels: {
fontSize: 20
}
},
hover: {
mode: 'y-axis'
},
tooltips: {
titleFontSize: 14,
bodyFontSize: 14
}
}
});
Can anyone help me with how I can make this chart appear when I click on the second button, the one with K/D?
Just add a click-listener on the label representing the button and draw the new chart:
document.getElementById("1").addEventListener('click', () => {
// ... create the new chart ...
});
Full code here: https://jsfiddle.net/akmjxynq/