score:2
Accepted answer
A simple workaround is to add another parameter to your function to differentiate your charts from each other.
I chose to use the id of a chart for this, so that you are sure you won't affect another one.
You first need to edit a little bit your function :
// !!
// Don't forget to change the prototype
// !!
function drawChart(ctxElement, ctxType, ctxDataLabels, ctxDataSets, midLabel, id) {
var ctx = ctxElement;
var data = {
labels: ctxDataLabels,
datasets: ctxDataSets
};
Chart.pluginService.register({
afterDraw: function(chart) {
// Makes sure you work on the wanted chart
if (chart.id != id) return;
// From here, it is the same as what you had
var width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx;
// ...
}
});
// ...
}
From now, when you call your function, don't forget about the id :
// ids need to be 0, 1, 2, 3 ...
drawChart(ctxElement, ctxType, ctxDataLabels, ctxDataSets, "Canvas 1", 0);
drawChart(ctxElement, ctxType, ctxDataLabels, ctxDataSets, "Canvas 2", 1);
drawChart(ctxElement, ctxType, ctxDataLabels, ctxDataSets, "Canvas 3", 2);
You can see a fully working example on this fiddle (with 3 charts), and here is a preview :
Source: stackoverflow.com
Related Query
- Adding a label to a doughnut chart in Chart.js shows all values in each chart
- Adding custom text to Bar Chart label values using Chart.js
- Adding label inside multiseries doughnut chart through chart.js
- Show all values in Chart js y axis
- chart js - Apply different color for each x-axes label
- Chart.js line chart tooltip shows wrong label when line doesn't start at first label
- Chart Click Event - Clicking label of doughnut chart, doesn't return label ng2-charts
- Chartjs - Donut Chart label for small values not visible
- chartJS label on each side of the chart
- How to wait for all items to load within ng-repeat before then rendering a chart for each item
- Line Chart Js x-axis values all 0 on React
- Chartjs Bar chart shows undefined values
- Chart.js: adding a custom label to each item, and displaying it with a custom tooltip
- Force ChartJS to show Doughnut chart with null values
- How to change default label of each bubble in bubble chart using chartjs-plugin-datalabels
- How to rotate the Label text in doughnut chart slice vertically in chart.js canvas, Angular 12?
- ChartJS chart not scaling after adding values
- Chart.js Doughnut chart inner label different than outer
- hide label on doughnut chart of chartjs
- ChartJS : Hook before values are given to doughnut (absolute value in chart and real values in the tooltips)
- How do I get a different label for each bar in a bar chart in ChartJS?
- Charts JS: Doughnut chart and hiding tooltip for specific data index within each dataset
- Label issue in doughnut chart using chartjs
- angular-chart.js custom color based on chart label values
- Show values on each arc doughnut Chart.js
- Chart.js How can I embed additional values to each data point in radar chart
- chart js: when all the values passed to data are zeros, nothing is showing
- How can I get my Chart.JS bar chart to stack two data values together on each bar, and print a calculated value on each bar?
- Chart Piechart in only show percentage on hover but it shows data and label with percentage both i just want to show percentage only percentage
- Show the values of each arc on doughtnut chart of chart.js
More Query from same tag
- Customizing ChartJS.org
- Chart.js - Line charts: draw points between grid lines
- Chart.js Fill line chart from another value than 0
- why is the background black when with Chartjs export to a image
- Chartjs doesn't show chart properly with JSP
- Chartjs Stacked bar have a stack id per x value
- ASP.NET Core Razor Pages - Get List Data to Display on Chart.js Graph
- Hide Y-axis labels when data is not displayed in Chart.js
- Line graph with linear timescale in Chart.js
- How to use excess vertical space in stacked bar chart?
- How can I add background color of length bars in chart (chartJS)?
- How to draw the X-axis (line at Y = 0) in Chart.js?
- How do I keep chart.js charts in one JS file, and not get errors when the ID from the JS file don't exist on one specific html page?
- Javascript : import produces a syntax error
- How to add conditional fill color in Chart.js area chart?
- Chartjs graphs are not respecting height of container
- How can I change the legend label without affecting my tooltip label?
- How can I display the xAxes and yAxes data in the tooltip, Chart JS?
- How to trigger hover programmatically in chartjs
- passing json data to chartjs
- Css style not working well when resizing chart height in angular application
- Chart js v2 tooltip callback line breaks
- tc-angular-chartjs problems while assigning value to chart-data
- How to vary the thickness of doughnut chart, using ChartJs.?
- change white cell border color in chart.js
- How to style specific gridlines differently in chartJs?
- Re-render (or animate) chart.js chart on transition within deck.js
- Count the duplicates in a string array using React JS
- Why is the child component updating but not re-render Reactjs
- Draw horizontal line on chart in chart.js on v2