I have this settings
const options = {
responsive: true,
plugins: {
legend: {
position: 'bottom',
labels: {
usePointStyle: true,
pointStyle: 'circle',
// fontSize: 2,
// boxWidth: 6,
// pointStyleWidth: 10,
template: {
maxWidth: 10,
},
},
},
title: {
display: false,
},
},
}
const data = {
labels: ['E-commerce', 'Enterprise', 'Yellow', 'Green', 'Purple'],
datasets: [
{
label: '# of Votes',
data: [12, 19, 3, 5, 3],
backgroundColor: ['#C07CC3', '#9C3848', '#9DDBAD', '#ADA8B6', '#606EDA'],
borderWidth: 1,
},
],
}
I get this chart with this settings
I want to make that points smaller but when I uncomment the pointStyleWidth prop it makes width smaller but the height remains the same
Like this
I figured out, I need both boxWidth and boxHeight, and remove the pointStyleWidth
Related
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>
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 trying to edit it in the labels:{}, but only color is changing but not the text
do let me know if there is a way
plugins: {
legend: {
display: true,
position: 'top',
labels: {
text: "qasim",
color: "red",
}
},
title: {
display: false,
text: "Status",
},
tooltip: {
enabled: false,
position: "nearest",
external: ""
}
}
You will need to use a custom generateLabels function for this:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange'
}
]
},
options: {
plugins: {
legend: {
labels: {
generateLabels: (chart) => {
const datasets = chart.data.datasets;
const {
labels: {
usePointStyle,
pointStyle,
textAlign,
color
}
} = chart.legend.options;
return chart._getSortedDatasetMetas().map((meta) => {
const style = meta.controller.getStyle(usePointStyle ? 0 : undefined);
const borderWidth = Chart.helpers.toPadding(style.borderWidth);
return {
text: 'Custom text: ' + datasets[meta.index].label,
fillStyle: style.backgroundColor,
fontColor: color,
hidden: !meta.visible,
lineCap: style.borderCapStyle,
lineDash: style.borderDash,
lineDashOffset: style.borderDashOffset,
lineJoin: style.borderJoinStyle,
lineWidth: (borderWidth.width + borderWidth.height) / 4,
strokeStyle: style.borderColor,
pointStyle: pointStyle || style.pointStyle,
rotation: style.rotation,
textAlign: textAlign || style.textAlign,
borderRadius: 0, // TODO: v4, default to style.borderRadius
// Below is extra data used for toggling the datasets
datasetIndex: meta.index
};
}, this);
}
}
}
}
}
}
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.7.1/chart.js"></script>
</body>
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'm trying to create a legend for a doughnut chart created with chart js. The problem is I have two doughnut charts stacked and when creating the legend it defaults to the labels of the first.
I want the legend to show up with the blue label as CPU and a green label as MEM.
Currently the labels when hovering on either doughnut is free and used which I'd like to keep.
here is the script used to create the chart
var responseChartLoad = new Chart(responseChartCanvas, {
type: 'doughnut',
data: {
labels: ["Used", "Free"],
datasets: [{
data: [0, 100],
backgroundColor: [
'#42a5f5',
'#eceff1',
],
borderColor: [
'#FFF',
'#FFF'
],
borderWidth: 2
}, {
data: [0, 100],
backgroundColor: [
'#4db6ac',
'#eceff1',
],
borderColor: [
'#FFF',
'#FFF'
],
borderWidth: 2
}]
},
options: {
responsive: true,
cutoutPercentage: 50,
animation: {
animateRotate: true
},
legend: {
display: true,
position: 'bottom'
},
elements: {
center: {
text: 'CPU/MEM',
fontStyle: 'Helvetica', //Default Arial
sidePadding: 50 //Default 20 (as a percentage)
}
}
}
});
To accomplish that you would have to generate custom legend items, which could be done using the generateLabels method of legend's labels, as such :
legend: {
labels: {
generateLabels: function() {
return [{
text: 'CPU',
fillStyle: '#42a5f5',
strokeStyle: '#fff'
}, {
text: 'MEM',
fillStyle: '#4db6ac',
strokeStyle: '#fff'
}];
}
}
}
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
var responseChartLoad = new Chart('responseChartCanvas', {
type: 'doughnut',
data: {
labels: ["Used", "Free"],
datasets: [{
data: [10, 100],
backgroundColor: [
'#42a5f5',
'#eceff1',
],
borderColor: [
'#FFF',
'#FFF'
],
borderWidth: 2
}, {
data: [5, 100],
backgroundColor: [
'#4db6ac',
'#eceff1',
],
borderColor: [
'#FFF',
'#FFF'
],
borderWidth: 2
}]
},
options: {
responsive: true,
cutoutPercentage: 50,
animation: {
animateRotate: true
},
legend: {
display: true,
position: 'bottom',
labels: {
generateLabels: function() {
return [{
text: 'CPU',
fillStyle: '#42a5f5',
strokeStyle: '#fff'
}, {
text: 'MEM',
fillStyle: '#4db6ac',
strokeStyle: '#fff'
}];
}
}
},
elements: {
center: {
text: 'CPU/MEM',
fontStyle: 'Helvetica', //Default Arial
sidePadding: 50 //Default 20 (as a percentage)
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="responseChartCanvas"></canvas>