I cannot get the annotation line to work on a stacked Bar Chart.
Example JS Fiddle: https://jsfiddle.net/cledwyn/rd5q6Lsz/10/
I have the standard Annotation per https://www.chartjs.org/chartjs-plugin-annotation/latest/samples/charts/bar.html
const annotation2 = {
type: 'line',
scaleID: 'x',
borderWidth: 3,
borderColor: 'black',
value: 8,
label: {
rotation: 'auto',
position: 'start',
backgroundColor: 'black',
content: 'Line at x=Label 5',
enabled: true
}
};
but when I stack the bar charts
scales: {
xAxes: { stacked: true },
yAxes: { stacked: true }
},
then the annotation line just goes from one corner of the chart to the other.
When running your JSFiddle, you can see the following warning on the console.
"No scale found with id 'x' for annotation 'annotation2'"
Therefore, changing scales.xAxes to scales.x should solve part of your problem.
scales: {
x: { stacked: true },
y: { stacked: true }
}
You'll further have to add missing labels to data.labels and adjust annotation2.value.
Please take a look at your amended code below and see how it works.
const labels = ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5'];
const data = {
labels: labels,
datasets: [{
label: 'one',
data: [14, 21, 4, 5, 7],
backgroundColor: 'rgb(255, 99, 132)'
}, {
label: 'two',
data: [1, 3, 2, 4, 5],
backgroundColor: 'rgb(255, 199, 132)'
}, {
label: 'three',
data: [7, 1, 9, 6, 7],
backgroundColor: 'rgb(255, 99, 32)'
}]
};
const annotation2 = {
type: 'line',
scaleID: 'x',
borderWidth: 3,
borderColor: 'black',
value: 4,
label: {
rotation: 'auto',
position: 'start',
backgroundColor: 'black',
content: 'Line at x=Label 5',
enabled: true
}
};
const config = {
type: 'bar',
data: data,
options: {
plugins: {
annotation: {
annotations: {
annotation2,
}
}
},
scales: {
x: {
stacked: true
},
y: {
stacked: true
}
},
},
};
const chart = new Chart('chart', config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.4.0/chartjs-plugin-annotation.min.js"></script>
<canvas id="chart" height="110"></canvas>
Related
I struggle to let my second y-Axis scale to my second data array.
The green data should be scaled according to the right y-Axis (not working).
The red data is correctly scaled to the left y-Axis.
<div id="chartWrapper" class="card-content column is-two-thirds">
<canvas id="myChart" height="250px"></canvas>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
datasets: [{
label: 'Temperatur in C°',
yAxisID: 'A',
borderColor: "red",
data: 0
},
{
label: 'Niederschlagsmenge in mm',
yAxisID: 'B',
borderColor: "blue",
data: 0
}]
},
options: {
scales: {
A: {
type: 'linear',
beginAtZero: false,
position: 'left',
display: true
},
B: {
type: 'linear',
beginAtZero: false,
position: 'right',
display: true
}
}
}
});
</script>
</div>
Don't be confused with the data being 0, I add the data dynamically.
Thank you very much for any help.
This is because you are using V2 of chart.js in which the scales need to be configured as arrays like so:
new Chart(ctx, {
type: 'line',
data: {},
options: {
scales: {
yAxes: [{
id: 'A'
}, {
id: 'B'
}]
}
}
})
I tried using the stack and offset but it does not seem to work
This is my code:
import React, {
useEffect
} from 'react';
import {
Bar
} from 'react-chartjs-2';
import useWindowWidth from 'wa-shared/src/hooks/useWindowWidth';
const state = {
count: 0,
data: {
labels: [
['Total Users'],
['Users with', 'Active', 'Session'],
['Created 1', 'or More', 'Videos'],
['Shared 1', 'or More', 'Videos']
],
datasets: [{
backgroundColor: '#26863D',
data: [70, 66, 57, 1],
barThickness: '35',
},
{
backgroundColor: '#F2F2F2',
data: [70, 70, 70, 70],
borderRadius: '5',
barThickness: '35',
}
]
}
}
const App = ({}) => {
const width = useWindowWidth();
useEffect(() => {});
return ( <
div className = 'singlebar-chart'
id = "barchart" >
<Bar> data = {
state.data
}
options = {
{
scales: {
x: {
grid: {
display: false,
},
offset: true,
ticks: {
maxRotation: 0,
minRotation: 0,
font: {
size: 8,
}
},
},
y: {
min: 0,
max: 100,
ticks: {
fontColor: '#8A8A8A',
font: {
size: 8,
},
stepSize: 25,
callback: function(value) {
return value + "%"
},
},
scaleLabel: {
display: true,
labelString: "Percentage",
},
grid: {
display: false,
}
}
},
plugins: {
legend: {
display: false,
},
}
}
</Bar>
</div>
)
}
export default App;
.singlebar-chart{
width: 95%;
}
You can use a second x axis and map the other dataset to that axes:
var options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'pink'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
backgroundColor: 'orange',
xAxisID: 'x2'
}
]
},
options: {
scales: {
x: {},
x2: {
display: false // Dont show the axes since it is just a duplicate
}
}
}
}
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.8.0/chart.js"></script>
</body>
Although this gives the exect same result as setting stacked true on the x axis.
I am using chartjs-plugin-datalabels to display data labels in stacked bar chart using Chart.js
const stackedConfig = {
type: 'bar',
data: {
labels: ['Manager 1', 'Manager 2', 'Manager 3', 'Manager 4', 'Manager 5'],
datasets: [{
label: 'DATA1',
data: [2, 8, 3, 4, 5],
backgroundColor: '#22242C'
}, {
label: 'DATA2',
data: [1, 2, 3, 4, 5],
backgroundColor: '#FFA755'
}, {
label: 'DATA3',
data: [3, 1, 3, 4, 5],
backgroundColor: '#B48DD3'
}, {
label: 'DATA4',
data: [5, 2, 3, 4, 5],
backgroundColor: '#6160DC'
}, {
label: 'DATA5',
data: [2, 1, 3, 4, 5],
backgroundColor: '#54C5EB'
}, {
label: 'DATA5',
data: [1, 2, 3, 4, 5],
backgroundColor: '#FF4A55'
}],
barPercentage: 0.5
},
plugins: [ChartDataLabels],
options: {
barPercentage: 0.5,
plugins: {
legend: {
position: 'right',
display: false,
},
datalabels: {
anchor: 'center',
align: 'center',
color: 'white',
font: {
weight: 'bold'
},
formatter: Math.round
},
},
responsive: true,
scales: {
x: {
stacked: true,
},
y: {
stacked: true
}
}
}
};
var stackedCtx = document.getElementById("stacked-1-canvas").getContext('2d');
new Chart(stackedCtx, stackedConfig);
Even after putting anchor: 'center' in datalabels option, the labels are anchor at start. Even if I leave out the option, the default anchor should be center, but even then its anchored to the start position.
Please help me sort this out.
I have to create three line charts that share the same x-axis but are vertically stacked on top of each other with different y-axes.
Here is my current visualization.
Unfortunately, the x-axis tick marks do not line up because of the y-axis labels. How should I go about fixing this?
Just stack the axes:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Black"],
datasets: [{
label: 'Dataset 1',
data: [10, 30, 50, 20, 25, 44, -10],
borderColor: 'red',
backgroundColor: 'red'
},
{
label: 'Dataset 2',
data: [10000, 30000, 50000, 20000, 25000, 44000, -10000],
borderColor: 'blue',
backgroundColor: 'blue',
yAxisID: 'y2',
}
]
},
options: {
scales: {
y: {
type: 'linear',
position: 'left',
stack: 'demo',
grid: {
borderColor: 'red'
},
title: {
display: true,
text: 'hello'
}
},
y2: {
offset: true,
position: 'left',
stack: 'demo',
grid: {
borderColor: 'blue'
},
title: {
display: true,
text: 'hello2'
}
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.6.0/dist/chart.min.js"></script>
</body>
I am trying to create a line chart with two datasets, each with its own Y scale / axis (one to the left, one to the right of the graph) using Chart.js.
This is my code (jsfiddle):
var canvas = document.getElementById('chart');
new Chart(canvas, {
type: 'line',
data: {
labels: [ '1', '2', '3', '4', '5' ],
datasets: [
{
label: 'A',
yAxesGroup: 'A',
data: [ 100, 96, 84, 76, 69 ]
},
{
label: 'B',
yAxesGroup: 'B',
data: [ 1, 1, 1, 1, 0 ]
}
]
},
options: {
yAxes: [
{
name: 'A',
type: 'linear',
position: 'left',
scalePositionLeft: true
},
{
name: 'B',
type: 'linear',
position: 'right',
scalePositionLeft: false,
min: 0,
max: 1
}
]
}
});
However, the second axis is not visible and the second dataset is still scaled exactly as the first (0 to 100 instead of 0 to 1). What do I need to change?
For ChartJs 2.x only a couple changes need to be made (it looks like you have tried to combine 2.x options with the multi-axes options from my fork?),
The yAxes field needs to be in a scales object
the yAxis is referenced by id not name.
For the scale steps/size you just need to wrap these options in a ticks object.
No need forscalePositionLeft this is covered by position
Example:
var canvas = document.getElementById('chart');
new Chart(canvas, {
type: 'line',
data: {
labels: ['1', '2', '3', '4', '5'],
datasets: [{
label: 'A',
yAxisID: 'A',
data: [100, 96, 84, 76, 69]
}, {
label: 'B',
yAxisID: 'B',
data: [1, 1, 1, 1, 0]
}]
},
options: {
scales: {
yAxes: [{
id: 'A',
type: 'linear',
position: 'left',
}, {
id: 'B',
type: 'linear',
position: 'right',
ticks: {
max: 1,
min: 0
}
}]
}
}
});
fiddle example
The accepted answer no longer works as of 3.5, and the cause is listed as part of the breaking changes for 3.X (See 3.x Migration Guide)
The updated code below changes the scales property, from scales: {yScales: [...]} to scales: {[id]: {[options]}} , and also adds fill: true, (Was changed at 3.X from defaulting to true) and tension: 0.4 (The example provided before does have smooth curves, and seems like it was an undocumented "breaking" change)
var canvas = document.getElementById('myChart');
new Chart(canvas, {
type: 'line',
data: {
labels: ['1', '2', '3', '4', '5'],
datasets: [{
label: 'A',
yAxisID: 'A',
data: [100, 96, 84, 76, 69],
fill: true,
tension: 0.4
}, {
label: 'B',
yAxisID: 'B',
data: [1, 1, 1, 1, 0],
fill: true,
tension: 0.4
}]
},
options: {
scales: {
A: {
type: 'linear',
position: 'left',
},
B: {
type: 'linear',
position: 'right',
ticks: {
max: 1,
min: 0
}
}
}
}
});
This solution is working in react.
// "chart.js": "^2.9.4"
// "react-chartjs-2": "^2.11.1"
const lineChartData = {
data: {
labels: ['1', '2', '3', '4', '5', '6'],
datasets: [
{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
fill: false,
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgba(255, 99, 132, 0.2)',
},
{
label: '# of Votes',
data: [19, 9, 2, 1, 1, 21],
fill: false,
backgroundColor: 'rgb(122, 99, 255)',
borderColor: 'rgba(102, 99, 255, 0.2)',
}
],
},
options: {
scales: {
yAxes: [
{
type: 'linear',
display: true,
position: 'left',
ticks: {
beginAtZero: true,
},
},
{
type: 'linear',
display: true,
position: 'left',
ticks: {
beginAtZero: true,
},
},
],
},
}
}
<Line
data={lineChartData.data}
options={lineChartData.options}
height={30}
width={80}
options={{ maintainAspectRatio: true }}
/>