Currently I have this doughnut chart
I am trying to change tooltip style like this
var ctx = document.getElementById('mycanvas').getContext('2d');
var chart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["AA", "BB", "CC", "DD", "EE"],
datasets: [{
label: "My First dataset",
backgroundColor: ['yellow', 'pink', 'red', '#E8A3D7', '#CFA3FD'],
data: [7, 3, 3, 4, 8],
}]
},
options: {
legend: {
position: 'right',
labels: {
boxWidth: 12
}
}
}
});
But I couldn't find a way.Does anybody know if this is possible?
https://jsfiddle.net/xm80qzoo/2/
Related
I am using charts js version 2.9.4. I am creating a horizontal single-bar chart.
I want to add functionality on legends to Show and hide the single Bar on clicking every legend.
Is it possible to achieve this functionality through chart js or any other chart library?
Thanks!
barChartOptions = {
legend: {
display: true,
position: "bottom",
onHover: function (event, legendItem) {
document.getElementById("mybarChart").style.cursor = "pointer";
},
labels: {
usePointStyle: true,
generateLabels: function (chart) {
var labels = chart.data.labels;
var dataset = chart.data.datasets[0];
var legend = labels.map(function (label, index) {
return {
datasetIndex: 0,
text: label,
fillStyle: dataset.backgroundColor[index],
strokeStyle: dataset.borderColor[index],
lineWidth: 1,
};
});
return legend;
},
},
},
};
yourData = {
labels: [18, 82, 22, 80, 85, 88, 90],
datasets: [
{
data: [1, 2, 3, 4, 10, 12, 15],
barThickness: 20,
backgroundColor: [
"#ff6384",
"#36a2eb",
"#ffce56",
"#4bc0c0",
"#9966ff",
"#9966fe",
"#9955cd",
"#9966ee",
],
borderColor: ["#ff6384", "#36a2eb", "#ffce56", "#4bc0c0", "#9966ff"],
},
],
};
this.chart = new Chart(ctx, {
type: "horizontalBar",
data: yourData,
options: barChartOptions,
});
Thanks
considering the following example:
$(document).ready(function() {
var ctx = document.getElementById('mycanvas').getContext('2d');
var chart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["CL", "ML", "Spl.L", "PD", "Other Permissions"],
datasets: [{
label: "My First dataset",
backgroundColor: ['#F0CB8C', '#EE97A1', '#A9D5D4', '#E8A3D7', '#CFA3FD'],
data: [7, 3, 3, 4, 8],
}]
},
options: {
legend: {
position: 'right'
}
}
});
})
example
is there a way to have the data on the right of the single label?
like here:
You can add custom labels as advised by #LeeLenalee's solution
and here is your workin code :
$(document).ready(function() {
var ctx = document.getElementById('mycanvas').getContext('2d');
var chart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["CL", "ML", "Spl.L", "PD", "Other Permissions"],
datasets: [{
label: "My First dataset",
backgroundColor: ['#F0CB8C', '#EE97A1', '#A9D5D4', '#E8A3D7', '#CFA3FD'],
data: [7, 3, 3, 4, 8],
}]
},
options: {
legend: {
labels: {
generateLabels: (chart) => {
const datasets = chart.data.datasets;
return datasets[0].data.map((data, i) => ({
text: `${chart.data.labels[i]} ${data}`,
fillStyle: datasets[0].backgroundColor[i],
}))}
}
}
}
});
})
.chart-container {
width: 280px;
height: 280px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<div class="chart-container">
<canvas id="mycanvas"></canvas>
</div>
What I want to do it change the Z order of of a line on this chart based on the label attribute. For example, here I would like to make "Label2" plot on top. What I tried to do was mutate the data_all array to put the element I want on top first in the list, though I could not get that work. How can I change the plot order?
So I am creating an array of objects that I can put right into the "data part of chart js like so
data_all=[]
var s1 = {
label: 'Label1',
borderColor: '#00ffff',
fill: false,
data: [
{x: '2021-06-25 11:00:00', y:50.5401942},
{x: '2021-06-25 12:00:00', y:49.9631549},
{x: '2021-06-25 13:00:00', y:50.0555899}]
data_all.push(s1)
var s2 = {
label: 'Label2',
borderColor: '#00ffff',
fill: false,
data: [
{x: '2021-06-25 11:00:00', y:50.5401942},
{x: '2021-06-25 12:00:00', y:49.9631549},
{x: '2021-06-25 13:00:00', y:50.0555899}]
data_all.push(s2)
Then I create a chart by passing data_all in to a chart variable.
var ctx = document.getElementById('plotAll').getContext('2d');
var plotall = new Chart(ctx, {
type: 'line',
data: { datasets: data_all },
options: {
responsive: true,
zoom: {
enabled: true,
mode: 'x'
},
pan: {
enabled: true,
mode: 'xy'
},
scales: {
xAxes: [{
type: 'time'
}]
},
}
});
You can make use of the order property in the dataset, the lower this is, the sooner it will draw that dataset, see example, noramally red line would overlap blue line, now its reversed:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'red',
order: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'blue',
order: 0
}
]
},
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.4.0/chart.js"></script>
</body>
I would like to only have a legend label for only two of my three datasets in my chart.js stacked bar chart.
Is there a way to do this? At the moment I am only able to hide the entire legend by putting the following in my chart options:
legend: {
display: false
}
I.e. would it be possible to specify which datasets have a legend and which don't in the options? (or in the datasets if that's possible).
You can use the filter on the labels of the legend to filter out the datasets you dont want to show in the legend, see example:
var options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1,
backgroundColor: 'red'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1,
backgroundColor: 'blue'
},
{
label: 'dont show this',
data: [17, 1, 15, 18, 13, 17],
borderWidth: 1,
backgroundColor: 'orange'
}
]
},
options: {
plugins: {
legend: {
labels: {
filter: (legendItem, chartData) => (legendItem.text !== 'dont show 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.3.2/chart.js"></script>
</body>
Documentation: https://www.chartjs.org/docs/master/configuration/legend.html#legend-label-configuration
I'm getting myself familiar with Chart.js and want to do a simple thing but couldn't. I just want the chart to re-animate when clicking on a button, but couldn't get it to work. I thought by attaching chart.update to the onclick would work, but it didn't. Thanks for help.
http://jsfiddle.net/f7nj80ye/5/
$('#button1').click(function(){
chart.update();
});
You need to destroy it, and create it again :
var ctx = document.getElementById("myChart");
var config = {
type: 'bar',
data: {
labels: ["2014", "2015", "2016"],
datasets: [{
label: 'Group 1',
data: [50, -59, 64],
datalabels:{
anchor: "end",
align: "end",
color:"black",
font:{ size: 14, },
},
backgroundColor: [ '#5bbbbb', '#5bbbbb4', '#5bbbbb' ],
borderWidth: 1
},{
label: 'Group 2',
data: [69, -85, 92],
datalabels:{
anchor: "end",
align: "end",
color:"black",
font:{ size: 14, },
},
backgroundColor: ['#ddd','#ddd','#ddd'],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
max:100
}
}]
}
}
};
var chart = new Chart(ctx, config);
(function() { // self calling function replaces document.ready()
//adding event listenr to button
document.querySelector('#button1').addEventListener('click',function(){
chart.destroy();
chart = new Chart(ctx, config);
});
})();
And here is a fiddle : http://jsfiddle.net/f7nj80ye/30/