score:2
change the following line of code in your plugin :
var text = 60;
to this :
var text = chart.id == 0 ? 60 : 40;
basically, when a chart is created, it is assigned an id
(0 based). so you need to set the text based on that chart-id.
also, there's no need to add two separate plugins, as you are creating a global plugin, which will be applied to all of your charts.
here is the working example on jsfiddle
score:0
use only one "chart.pluginservice.register" for all charts, because it subscribes to the chart class, so mychart and mychart2 belong to chart class, then don't use the callback "chart"... use mychart and mychart2 instead of callback to recognize each chart registered.
new code:
var charts = [{
current: mychart
, text: 60
}, {
current: mychart2
, text: 40
}];
chart.pluginservice.register({
beforedraw: function(chart) {
for (var iterator of charts) {
var width = iterator.current.chart.width,
height = iterator.current.chart.height,
ctx = iterator.current.chart.ctx;
//ctx.clearrect(0, 0, width, height);
//ctx.restore(); dont clear, this delete the previous chart, drawing only text
var fontsize = (height / 114).tofixed(2);
ctx.font = fontsize + "em lato";
ctx.fillstyle = "rgba(0,0,0, 0.85)"
ctx.textbaseline = "middle";
var text = iterator.text,
textx = math.round((width - ctx.measuretext(text).width) / 2),
texty = height / 2.5;
ctx.filltext(text, textx, texty);
ctx.save();
}
}
});
updated jsfiddle: https://jsfiddle.net/4uw1ksu1/2/
Source: stackoverflow.com
Related Query
- ChartJS number shows up on top of number
- chartjs - top and bottom padding of a chart area
- Chartjs time plot xAxis shows year 1970
- Chartjs hovering over one Chart, shows tooltip across all charts
- ChartJS Line chart cut off at the top and bottom
- Adding image on the top of bar in chartjs
- How to add ChartJS code in Html2Pdf to view image
- Points cut at half at the edges of top and bottom, at chartjs
- ChartJs - Double tooltip Top and Bottom on hover
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- ChartJS align axis label to the top
- ChartJS shows date, but not time, when displaying labels in time axis
- Chartjs not working with d3 from csv source
- Chartjs Bar chart shows undefined values
- Drawing images on top of graph doesn't work with ChartJS
- Chartjs small offset on top
- ChartJS - Moving vertical line is display on top of tooltip
- How to reduce the number of points shown on line chartjs chart with a large dataset?
- ChartJS V3 borderRadius only works on top
- ChartJs shows the wrong labels
- ChartJS 3.0 - Number format
- ChartJS - Uncaught SyntaxError: Unexpected number
- How to generate colors for unknown number of datasets in Chartjs
- How to properly feed data to ChartJS with different number of x(labels) and y(data) points
- ChartJS 2 - Adding data to chart breaks after X number of items added
- Chartjs 2 - Stacked bar with marker on top
- ChartJS shows chart but no data in ASP net core
- how to display last x float number value in chartjs
- ChartJS have xAxes labels match data source
- Chartjs removing labels and begin number
More Query from same tag
- How to make labels on both side from horizontal bar chart js
- Creating a diagonal shaded area in chart.js
- chart.js tooltip keeps remembering old data after update
- Is it possible to remove the border between the segments but leave the border around the pie chart in react-chartjs-2?
- HTML tags enable in Default tooltip labels in chart.js
- How to display value labels above graph bars using chart.js
- To display data from mock server into chartjs using ember
- ChartJS align bars to left instead of center
- Why does x axis not increment 'monthly' chart.js. Also, XAxis not taking title
- Chart.js - make background text responsive
- ChartJS: Get value from another another Chart
- Stacked bar chart with chartjs with included values
- Loop to create lines for graph chartjs
- How can I display desired/particular chart in App.vue from Charts.vue which contains different charts in Vuejs
- Django chart.js multi axis line chart
- Chart.js - Connect two datasets in a line chart at same y value
- How do I fix over limit y axis value in ChartJS
- Is it possible to make ChartJS X-Axis an automatic day based on data and formatted to month?
- How can I divide this Object.values with the total?
- The bar that contains a low value is almost invisible on the chartjs
- why my multiple chart.js does not work properly?
- ChartJS custom tooltip doesn't render background on labels (only the title)
- chart js: when all the values passed to data are zeros, nothing is showing
- Different gridline steps on chart js line chart
- Plotting multiple JSON subobjects in Chart.js Line chart ( with Time as x-axis)
- Visualizing intervals with range bar charts in chart.js
- ChartJs line chart repaint glitch while hovering over
- core.js:4197 ERROR TypeError: chart_js__WEBPACK_IMPORTED_MODULE_2__ is not a constructor
- Line Chart is not setting backgroundColor when created dynamically Chart.js
- Problems with ChartJS "Uncaught TypeError: Cannot read property 'length' of null"