I´m not getting the results as axpected in using a cliping path in chartjs.
The path gets created but doesn´t clip the images.
I´m declaring the plugin clipingPath and using it as described in a youtube tutorial but never got it to work for me.
What can I do to make the zoom work?
here is the code I´m using:
const img1 = new Image();
img1.src = 'https://www.chartjs.org/docs/latest/favicon.ico'
const img2 = new Image();
img2.src = 'https://www.chartjs.org/docs/latest/favicon.ico'
const img3 = new Image();
img3.src = 'https://www.chartjs.org/docs/latest/favicon.ico'
const img4 = new Image();
img4.src = 'https://www.chartjs.org/docs/latest/favicon.ico'
const img5 = new Image();
img5.src = 'https://www.chartjs.org/docs/latest/favicon.ico'
const img6 = new Image();
img6.src = 'https://www.chartjs.org/docs/latest/favicon.ico'
const img7 = new Image();
img7.src = 'https://www.chartjs.org/docs/latest/favicon.ico'
const datapoints = [18, 12, 6, 9, 12, 3, 9];
const images = [img1, img2, img3, img4, img5, img6, img7 ];
const data = {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
datasets: [{
label: 'Weekly Sales',
data: datapoints,
backgroundColor: [
'rgba(255, 26, 104, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(0, 0, 0, 0.2)'
],
borderColor: [
'rgba(255, 26, 104, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(0, 0, 0, 1)'
],
borderWidth: 1
}]
};
const clipingPath = {
id: 'clipingPath',
afterDatasetDraw(chart, args, options){
const {ctx, chartArea: {top, bottom, left, right, width, height},
scales: {x, y}} = chart;
ctx.save();
for (var j = 0; j < datapoints.length-1; j++) {
ctx.beginPath();
var xx = x.getPixelForValue(j);
var yy = y.chart.chartArea.height+10;
var radius = 5;
var startAngle = 0;
var endAngle = Math.PI + (Math.PI ) ;
ctx.arc(xx+13, yy+15, radius, startAngle, endAngle);
ctx.drawImage(images[j], xx, yy, 30, 30);
ctx.stroke();
ctx.closePath(); }
ctx.clip();
ctx.restore();
}
}
const config = {
type: 'bar',
data,
options: {
scales: {
y: {
beginAtZero: true
}
}
},
plugins:[clipingPath]
};
const myChart = new Chart(
document.getElementById('myChart'),
config
);
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.chartMenu {
width: 100vw;
height: 40px;
background: #1A1A1A;
color: rgba(255, 26, 104, 1);
}
.chartMenu p {
padding: 10px;
font-size: 20px;
}
.chartCard {
width: 100vw;
height: calc(100vh - 40px);
background: rgba(255, 26, 104, 0.2);
display: flex;
align-items: center;
justify-content: center;
}
.chartBox {
width: 700px;
padding: 20px;
border-radius: 20px;
border: solid 3px rgba(255, 26, 104, 1);
background: white;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Getting Started with Chart JS with www.chartjs3.com</title>
<style>
</style>
</head>
<body>
<div class="chartMenu">
<p>WWW.CHARTJS3.COM (Chart JS 3.7.1)</p>
</div>
<div class="chartCard">
<div class="chartBox">
<canvas id="myChart"></canvas>
</div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</body>
</html>
Related
When i use charts.js -plugins-datalabels in my page with 2 Charts , Only the first charts show up and the second one is disappeared from the page'
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2.1.0/dist/chartjs-plugin- datalabels.min.js"></script>
First Chart
<div class="row">
<div class="col-md-4 text-center"> {{ccmonth}}
<canvas id="myChart7" height ="400"></canvas>
<script>
// setup
const data = {
labels: ['Central', 'Eastern', 'Western', 'Kingdom'],
datasets: [{
label: 'Sales',
data: [{{ordordc_month}}, {{ordorde_month}}, {{ordordw_month}},{{ordord_month}}],
backgroundColor: [
'rgba(54, 162, 235, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(54, 162, 235, 0.2)'
],
borderColor: [
'rgba(255, 26, 104, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(0, 0, 0, 1)'
],
borderWidth: 1
},{
label: 'Target',
data: [50000, 50000, 50000, 40000,],
backgroundColor:'rgba(255, 26, 104, 0.2)',
borderColor: 'rgba(255, 26, 104, 1)',
borderWidth: 1
}]
};
// config
const config1 = {
type: 'bar',
data,
options: {
scales: {
x: {
stacked: true
},
y: {
beginAtZero: true,
stacked: true
}
}
},
plugins: [ChartDataLabels],
};
// render init block
const myChart7 = new Chart(
document.getElementById('myChart7'),
config1
);
</script>
</div>
</div>
Second chart (not shown up)
<div class="row">
<div class="col-md-4 text-center"> Week {{lweek}} Achievment
<canvas id="myChart6" height ="400"></canvas>
<script>
// setup
const data = {
labels: ['Central', 'Eastern', 'Western', 'Kingdom'],
datasets: [{
label: 'Sales',
data: [{{ordordc}}, {{ordorde}}, {{ordordw}},{{ordord}}],
backgroundColor: [
'rgba(54, 162, 235, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(54, 162, 235, 0.2)'
],
borderColor: [
'rgba(255, 26, 104, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(0, 0, 0, 1)'
],
borderWidth: 1
},{
label: 'Target',
data: [50000, 50000, 50000, 40000,],
backgroundColor:'rgba(255, 26, 104, 0.2)',
borderColor: 'rgba(255, 26, 104, 1)',
borderWidth: 1
}]
};
// config
const config = {
type: 'bar',
data,
options: {
scales: {
x: {
stacked: true
},
y: {
beginAtZero: true,
stacked: true
}
}
},
plugins: [ChartDataLabels],
};
// render init block
const myChart6 = new Chart(
document.getElementById('myChart6'),
config
);
</script>
</div>
</div>
I tried to search in your awesome , and read the docommentation of the plugins-datalabels.
I expect a solution by one of your greatest users
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>
See attached screenshot with an example with what I'm trying to do.
Basically I want to be able to add custom text on certain yAxis and xAxis lines.
You can use the Plugin Core API. It offers different hooks that may be used for executing custom code. In below code snippet, I use the afterDraw hook to draw custom text on the canvas.
For positioning your text on x and y, you may use hard coded number of pixels or compute them using the Scale Interface (i.e. function getPixelForValue).
new Chart(document.getElementById('myChart'), {
type: 'bar',
plugins: {
afterDraw: chart => {
var ctx = chart.chart.ctx;
var xAxis = chart.scales['x-axis-0'];
var yAxis = chart.scales['y-axis-0'];
ctx.save();
ctx.font = "18px Arial";
ctx.fillStyle = "red";
var x = (xAxis.getPixelForValue('May') + xAxis.getPixelForValue('June')) / 2;
ctx.fillText('My custom text here', x, yAxis.getPixelForValue(65));
ctx.fillText('Another custom text here', 30, 15);
ctx.restore();
}
},
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: "My First Dataset",
data: [65, 59, 80, 81, 56, 55, 40],
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)', 'rgba(54, 162, 235, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(201, 203, 207, 0.2)'],
borderColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 255)', 'rgb(201, 203, 207)'],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="110"></canvas>
In Chart.js you can hide a section of a chart by clicking on the label on top.
picture of a pie chart with hidden section
I want a section of the chart to be hidden on startup. With another type of chart I would use the dataset hidden property, but pie chart sections do not correspond with the datasets. So if you do the same the entire dataset is hidden, not just the needed section.
(Extra information: I use a pie chart with multiple datasets)
The closest I have come to a solution is this code:
for (i = 0, ilen = (chart.data.datasets || []).length; i < ilen; ++i) {
meta = chart.getDatasetMeta(i);
meta.data[index].hidden = !meta.data[index].hidden;
}
chart.update();
Or I could overwrite the generateLabels function.
Can anyone help me find a better solution?
Thank you
You may see an implementation as a plugin here and below.
// A plugin that hides slices, given their indices, across all datasets.
var hideSlicesPlugin = {
afterInit: function(chartInstance) {
// If `hiddenSlices` has been set.
if (chartInstance.config.data.hiddenSlices !== undefined) {
// Iterate all datasets.
for (var i = 0; i < chartInstance.data.datasets.length; ++i) {
// Iterate all indices of slices to be hidden.
chartInstance.config.data.hiddenSlices.forEach(function(index) {
// Hide this slice for this dataset.
chartInstance.getDatasetMeta(i).data[index].hidden = true;
});
}
chartInstance.update();
}
}
};
Chart.pluginService.register(hideSlicesPlugin);
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
data: [15, 1, 1, 1, 45, 1],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}, {
data: [5, 1, 25, 10, 5, 1],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}],
// Hide the second (index = 1) and the fourth (index = 3) slice.
hiddenSlices: [1, 3]
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
The slices to be hidden are provided using the hiddenSlices attribute, which should be an array of indices corresponding to existing slices. The slices are hidden across all datasets using the hideSlicesPlugin, if hiddenSlices has been set.
After creating the chart, you can retrieve its metadata through .getDatasetMeta(index), change the hidden attribute of the desired slice and update the chart as shown in the following code snippet. When the user clicks on the label of the hidden slice, it will become visible again.
const chart = new Chart(document.getElementById('myChart'), {
type: 'pie',
data: {
labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],
datasets: [{
data: [100, 100, 200, 300, 140],
backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)']
}]
},
options: {
responsive: true,
maintainAspectRatio: true,
title: {
display: true,
text: 'Colors - Sample Pie Chart'
}
}
});
chart.getDatasetMeta(0).data[4].hidden = true;
chart.update();
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="150"> </canvas>
None of the answers provided here have worked for Chart.js version 3.2.1 (what I am using). Here is what I came up with (and it works):
let ctx = document.getElementById('myChart').getContext('2d');
window.chart = new Chart(ctx, {
type: 'pie',
data: {
labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],
datasets: [{
data: [100, 100, 200, 300, 140],
backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)'],
hoverOffset: 6,
}]
},
options: {
layout: { padding: 10 },
responsive: true,
maintainAspectRatio: true,
plugins: {
title: {
display: true,
text: 'Colors - Sample Pie Chart'
}
}
}
});
toggleData('red');
window.chart.render();
function toggleData(txt) {
let ci = window.chart;
let legendItems = ci.legend.legendItems;
let index;
for (index = 0; index < legendItems.length; ++index) {
let legendItem = legendItems[index];
if (legendItem.text.toLowerCase() === txt.toLowerCase()) {
// let visible = chart.getDataVisibility(index);
ci.toggleDataVisibility(index);
ci.update();
return;
}
}
}
/*
Note: Do not style the canvas element. See:
https://github.com/chartjs/Chart.js/issues/9089
*/
#myChartContainer {
width:400px;
height:400px;
}
<div id="myChartContainer">
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.2.1/dist/chart.min.js"
integrity="sha256-uVEHWRIr846/vAdLJeybWxjPNStREzOlqLMXjW/Saeo=" crossorigin="anonymous"></script>
References:
https://www.chartjs.org/docs/latest/developers/api.html#toggledatavisibility-index
https://www.chartjs.org/docs/latest/configuration/legend.html#custom-on-click-actions
Update - 17/Nov/2019
Don't do this, at the time I wrote this I was new to ChartJS and Web Development as well and it seems that the solution above already outdated, so I tried to answer with things that works for me. Maybe it's already outdated too, I haven't used ChartJS much since then. I moved to Echarts.
Since #xnakos answer is already outdated, I just wanted to share the same thing can be done easier in the current ChartJS version (2.7.3). Simply set the values to undefined, setting it to other values such as null will leave the legends being seen (or not crossed).
var ctx = document.getElementById("myDoughnut").getContext("2d");
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["Red", "Green", "Blue"],
datasets: [{
label: '# of Votes',
data: [12, 19, undefined],
// Set this value to undefined
backgroundColor: [
'#f87979',
'#79f879',
'#7979f8'
],
borderWidth: 5
}]
},
options: {
tooltips: {
mode: null
},
plugins: {
datalabels: {
borderWidth: 5,
borderColor: "white",
borderRadius: 8,
// color: 0,
font: {
weight: "bold"
},
backgroundColor: "lightgray"
}
}
}
});
<div id="app">
<div width="400">
<canvas id="myDoughnut"></canvas>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#0.4.0/dist/chartjs-plugin-datalabels.js"></script>
<!-- Made in 21 Nov 2018 -->
<!-- with ChartJS 2.7.3 -->
Here's a link to JSFiddle, for you to play around.
http://jsfiddle.net/irfandyjip89/fokbgnvz/5/
However, must be noted, if you're using datasets on Pie/Doughnut, it's better to set it into null. Because one undefined value in any of the dataset will cross the legends.
But if you do set one undefined values on any of the dataset, it will result in the legends being crossed (or strikethrough). EVEN WHEN THERE'S A VALUE ON THE NEXT DATASET.
This means that if you only use one dataset, and you don't want the data being shown in the chart and getting the legends crossed you want to set the values to undefined. Whereas, null values will get you same result without the legends being crossed.
However it's preference on how the Chart should appear, but personally I would want to use undefined values if I would like to cross the legends (usually on one dataset chart)and hide the data, and will use null values if I would like to just hide the data without getting the legends crossed (usually on multiple dataset chart).
If you want to check how it went when playing with multiple datasets, you can check this fiddle http://jsfiddle.net/irfandyjip89/fokbgnvz/19/
P.S. If you're wondering how did I put a label value on the center, it's using a plugin called chartjs-plugin-datalabels
In V3 of chartjs you can use the API they provide to toggle the visibility of an item.
chart.toggleDataVisibility(2); // toggles the item in all datasets, at index 2
chart.update(); // chart now renders with item hidden
Note: Only doughnut / pie, polar area, and bar use this.
I use canvas width and highth as follow
<canvas id="myChart" height="400" width="400" ></canvas>
However, when the page is rendered the canvas somehow becomes
<canvas height="1643" id="myChart" width="1643" style="display: block; width: 1643px; height: 1643px;"></canvas>
I found similar problem and such solution works for me too,
options: {
responsive: false
}
But I'm not sure that that is proper solution just to turn off responsive option becaouse that is one of the cool thing in chart.js
my code
<Html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.js" ></script>
</head>
<Body>
<canvas id="myChart" height="400" width="400" ></canvas>
</Body>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Steps',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
},
{
label: "Goal Line",
type:'line',
data: [{x:0,y:10},{x:0,y:10},{x:0,y:10},{x:0,y:10},{x:0,y:10},{x:0,y:10}],
fill: false,
pointRadius:[0,0,0,0,0,0,0],
borderWidth: 5,
borderColor: "rgba(243, 52, 52,1)",
borderJoinStyle: 'miter',
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
},
}],
xAxes: [{
ticks: {
beginAtZero:true
},
}]
},
}
});
</script>
</Html>
You can use css max-width and min-width if you want to avoid your chart from being too big or too small:
<canvas id="myChart" height="400" width="400" style="min-width: 200px; max-width: 600px"></canvas>
Note: You don't need to set a width via css. You can place the element within a grid column. Charts are responsive, so they will adjust the width to the size of the parent.
<div class="col-md-5">
<canvas id="myChart" ></canvas>
</div>