This is my current doughnut chart and I want to show the values of each arc on the arc itself.
This is the configurations of the chart.
const genderConfig={
plugins: {
title: {
display: true,
text: "GENDER",
font: {
size: 20,
},
},
legend: {
labels: {
boxHeight: 20,
boxWidth: 25,
},
position: "bottom",
},
},
}
P.s. I know that there is a very similar question, I already tried the solution mentioned in that thread but I think that solution is not existing anymore to the current version of Chart.js.
You can make use of the chart.js datalabels plugin, vor V3 they currently have a release candidate, there is 1 issue thats needs to be resolved before it can be released officially according to this issue of them: https://github.com/chartjs/chartjs-plugin-datalabels/discussions/213
V3 example:
Chart.register(ChartDataLabels)
var options = {
type: 'pie',
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: {}
}
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.2.1/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2.0.0-rc/dist/chartjs-plugin-datalabels.min.js"></script>
</body>
Related
I am working on a chart in Chart.js and my x-axis looks like this:
I have already looked into documentation and GitHub and it doesn't seem possible to realign the far left label to the right and the far right label to the left a little. However, I am wondering if it is possible to have the tick marks going up from the x-axis instead of down?
You can use the mirror option in the ticks like so:
const 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: {
mirror: true
}
}
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.js"></script>
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>
I don't believe this is possible in Chart.js as of now.
When you hover over a specific data point on a chartjs linechart the point's value can be shown. But let's say you hover on the graph, not on a specific data point but over the "empty space". In that case there should be some function to show the values of the points vertically aligned with the pointer. Does any such solution exist?
Basically the reason I'm asking is to be able to make mobile-friendly graphs and it can be difficult/irritating for the user to try and hit the small data points with their fingers.
Yes, you can set intersect to false in the tooltip config:
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: {
plugins: {
tooltip: {
intersect: false
}
}
}
}
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.0/chart.js"></script>
</body>
I can't figure out why my console.log isn't triggered in the Chart.js tooltip itemSort function. Do I miss something ?
plugins: {
legend: {
display: false,
},
tooltip: {
backgroundColor: "transparent",
titleColor: "black",
titleAlign: "center",
bodyColor: "black",
bodyAlign: "center",
displayColors: false,
callbacks: {
label: (element) => element.raw,
},
itemSort: (elements) => {
console.log("elements", elements);
return elements;
},
},
},
This is because by default the interaction mode is 'point' so it only shows a single value and thus can not be sorted. So chart.js does not call the method. If you make it another interaction mode like 'index' where it shows the tooltip for all datapoints at that data index it is getting called:
const 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: {
plugins: {
tooltip: {
mode: 'index',
itemSort: (e, x) => {
console.log(e.raw, x.raw) // Dont log entire objects since stack does not like that
}
}
}
}
}
const 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.0/chart.js"></script>
</body>
Edit:
From your comment on deleted answer if you want to change the order of the label and the value you should use the label callback instead of using the sort function
const 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: {
plugins: {
tooltip: {
callbacks: {
label: (e) => (`${e.formattedValue}, ${e.label}`)
}
}
}
}
}
const 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.0/chart.js"></script>
</body>
I want to show all tooltip always (not only hover), so that when i download it as pdf i can see the tooltip data. I used chartjs 3.1. it is possile?
If you want all datapoints you cant use the tooltip for that, you will have to use the datalabels plugin for that: https://v2_0_0-beta_1--chartjs-plugin-datalabels.netlify.app/samples/charts/line.html
If you only want to show 1 datapoint with the tooltip on download you can programaticatlly trigger the tooltip like so:
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: {}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
var chart = new Chart(ctx, options);
document.getElementById("triggger").addEventListener("click", () => {
const tooltip = chart.tooltip;
if (tooltip.getActiveElements().length > 0) {
tooltip.setActiveElements([], {
x: 0,
y: 0
});
} else {
const chartArea = chart.chartArea;
tooltip.setActiveElements([{
datasetIndex: 0,
index: 2,
}, {
datasetIndex: 1,
index: 2,
}]);
}
chart.update();
});
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<br>
<button id="triggger">
trigger hover
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.js" integrity="sha512-opXrgVcTHsEVdBUZqTPlW9S8+99hNbaHmXtAdXXc61OUU6gOII5ku/PzZFqexHXc3hnK8IrJKHo+T7O4GRIJcw==" crossorigin="anonymous"></script>
</body>
I have a simple question:
How can i align this two chartjs charts so to have exact the same grid?
The two charts have same min and max value, furthermore there is a missmatch because in the first chart the y tick labels are letters so the widthes of y axis are different.
Any advice would be usefull,
Chris Pappas
To my knowledge there is no nice way of doing this. The only dirty workaround I could think of is putting a whole lot of spaces before the tick in the callback from the chart which has to be indented more:
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: {
yAxes: [{
ticks: {
callback: (val) => (` ${val}`)
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
canvas {
background-color: #eee;
}
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>