chartjs-plugin-datalabels supports displaying of inforamtion related to the value, data, context of the graph content. Need to display image along with the text label on each graph based on the values . Refer attached snapshot
Tried custom option for toopltip but basically need to try rendering of html in the plugin data label so as image can also be added
plugins: {
datalabels: {
anchor: 'end',
align: 'start',
font: {
size: 20,
}
}
}
Display image on the bar
Expected Result :
This can be achieved by combining chartjs-plugin-datalabels with chartjs-plugin-labels as follows:
new Chart(document.getElementById('myChart'), {
type: 'bar',
data: {
labels: ['2009', '2010', '2011', '2012'],
datasets: [{
label: 'My First Dataset',
data: [25, 59, 80, 76],
fill: false,
backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(75, 192, 192, 0.2)'],
borderColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)'],
borderWidth: 1
}]
},
options: {
plugins: {
datalabels: {
anchor: 'end',
align : 'start'
},
labels: {
render: 'image',
textMargin: -60,
images: [
null,
null,
{
src: 'https://i.stack.imgur.com/9EMtU.png',
width: 20,
height: 20
},
null
]
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
canvas {
max-width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<canvas id="myChart" width="10" height="5"></canvas>
Related
I am trying to show a tooltip with the graph data (label and y value) when the corresponding legend key is hovered over. I can only find solutions which work for older versions of Chart.js, I am using 3.8.0.
This can be done by defining a options.plugins.legend.onHover function as follows:
legend: {
onHover: (evt, legendItem) => {
const activeElement = {
datasetIndex: 0,
index: legendItem.index
};
chart.tooltip.setActiveElements([activeElement]);
chart.update();
}
}
Please take a look at the runnable code below and see how it works.
const chart = new Chart('chart', {
type: 'doughnut',
data: {
labels: ['One', 'Two', 'Three'],
datasets: [{
data: [4, 5, 3],
backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(54, 162, 235, 0.2)'],
borderColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(54, 162, 235)'],
hoverBackgroundColor: ['rgba(255, 99, 132, 0.4)', 'rgba(255, 159, 64, 0.4)', 'rgba(54, 162, 235, 0.4)'],
borderWidth: 1,
hoverBorderWidth: 3
}]
},
options: {
plugins: {
legend: {
onHover: (evt, legendItem) => {
const activeElement = {
datasetIndex: 0,
index: legendItem.index
};
chart.setActiveElements([activeElement]); // to also show thick border
chart.tooltip.setActiveElements([activeElement]);
chart.update();
}
}
}
}
});
canvas {
max-height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<canvas id="chart"></canvas>
I want to display text on slices itself rather than displaying it on hover as displayed below
While creating a doughnut chart you'll have to add required data values and labels in code as below,
{
type: 'doughnut',
data: {
datasets: [
{
data: [10, 20, 15, 5, 50],
backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', ],
},
],
labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],
},
options: {
plugins: {
datalabels: {
formatter: (value) => {
return value + '%';
}
}
}
}
}
For more info and documentation check this out : https://quickchart.io/documentation/chart-js/custom-pie-doughnut-chart-labels/
I have tried to set the legend option to display: false, but no matter what I do the legend does not go away.
I have triple checked my syntax, and scoured this site, but I cannot figure out why this label will not disappear.
See codepen:
https://codepen.io/peidj/pen/dyNrJqP
var config_overdue = {
type: 'bar',
data: {
labels: [
'90 Days Overdue',
'180 Days Overdue',
'365 Days Overdue'
],
datasets: [{
label: 'HOW DO I DELETE THIS??',
data: [100,500,1000],
backgroundColor: [
'rgba(255, 205, 86, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 99, 132, 0.2)'
],
borderColor: [
'rgb(255, 205, 86)',
'rgb(255, 159, 64)',
'rgb(255, 99, 132)'
],
borderWidth: 1
}]
},
options: {
legend: {
display: false
},
indexAxis: 'y',
plugins: {
title: {
display: true,
text: 'Overdue Trainings'
}
},
scales: {
y: {
beginAtZero: true
},
},
tooltips: {
callbacks: {
label: function (tooltipItem) {
console.log(tooltipItem)
return tooltipItem.yLabel;
}
}
}
}
};
var chart_all_uwf_overdue = document.getElementById('chart_all_uwf_overdue').getContext('2d');
new Chart(chart_all_uwf_overdue, config_overdue);
div {
max-width: 500px;
}
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.2.0/dist/chart.min.js"></script>
</head>
<body>
<div>
<canvas id="chart_all_uwf_overdue" width="600" height="400"></canvas>
</div>
</body>
</html>
In version 3 the legend has moved to the plugin section in the options so if you put it like this it will hide the legend:
options: {
plugins: {
legend: {
display: false
}
}
}
how can i customize labels in radar chart?
i'm not refer to legend's labels, but the voice at the vertex of the radar chart
in particular font and color
i search a lot but i found soluton for older version, and only for color property
I just tried to use pointLabels property but don't work.
Could someone help me?
IMAGE
This can be achieved through the following options:
scales: {
r: {
pointLabels: {
color: 'green',
font: {
size: 20,
style: 'italic'
}
}
}
}
I must admit that I didn't find the solution in the Chart.js documentation either. Therefore, I logged the entire chart to the console (console.log(chart)) and searched for "scales" to finally find the pointLabels default values.
Please take a look at below runnable sample and see how it works:
new Chart('radar-chart', {
type: 'radar',
data: {
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
datasets: [{
label: 'My First Dataset',
data: [65, 59, 90, 81, 56, 55, 40],
fill: true,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
pointBackgroundColor: 'rgb(255, 99, 132)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(255, 99, 132)'
}],
},
options: {
plugins: {
legend: {
display: false
}
},
scales: {
r: {
pointLabels: {
color: 'green',
font: {
size: 20,
style: 'italic'
}
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.min.js"></script>
<canvas id="radar-chart"></canvas>
As soon as I give the chartJS div flexible values such as width=100%, the graph is not animated anymore.
I tried to use things such as width=45vh but this doesn't fit my need as the chart should always fill 100% of the width of the div above it.
I also tried to add the flexible width to the div id="1" (outer div). The chart is then animating but the width is totally screwed.
In Codepen it's working with exactly the same code:
https://codepen.io/anon/pen/ebjvMm
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Standard", "Premium"],
datasets: [{
label: 'Noahs Box',
data: [139, 189],
backgroundColor: [
'rgba(30, 56, 79, 1)',
'rgba(30, 56, 79, 1)',
],
borderColor: [
'rgba(30, 56, 79, 1)',
'rgba(30, 56, 79, 1)',
],
borderWidth: 1
},
{
label: 'Amazon',
data: [192.30, 440.55],
backgroundColor: [
'rgba(255, 153, 0, 1)',
'rgba(255, 153, 0, 1)'
],
borderColor: [
'rgba(255, 153, 0, 1)',
'rgba(255, 153, 0, 1)'
],
borderWidth: 1
}],
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: true
},
animation: {
duration: 7500,
},
title: {
display: true,
text: 'Comparison: Noahs Box vs. Amazon'
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
<div style="height:450px">
<div style="position: relative;
margin: auto;
height: 100%;
width: 100%;">
<canvas id="myChart"></canvas></div></div>
This is the page where I have the problem: https://noahsbox.com/pages/price-comparison
As you can see I I have two graphs. The second one is working as it has a fix width.
The chart should be responsive and always take 100% of the width of the 'div id="1" class="grid__item large--one-half medium-down--one-whole right-image statistic-tile' (right side of the tile/section).
AND it should animate when loading the page and not just show up without any animation.
Helpful links:
https://github.com/chartjs/Chart.js/issues/2958
https://www.chartjs.org/docs/latest/general/responsive.html#configuration-options