score:2
Not too familiar with chart.js but looks like you can leverage the options object. In the plugin code, you can look for an option like isNumberShown
and add the text depending on the boolean value. Then you just provide the property in each instance.
Example: https://jsfiddle.net/28j9tgcc/
score:1
You could create another variable inside of the options of each chart that could be checked inside of your plugin function. Then add the text based on that extra option variable.
Option in chart:
options: {
chartExtraOption: 1,
The if statement in plugin:
Chart.pluginService.register({
beforeDraw: function(chart) {
var width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx;
ctx.clearRect(0, 0, width, height);
ctx.restore();
var fontSize = (height / 114).toFixed(2);
ctx.font = fontSize + "em lato";
ctx.fillStyle = "rgba(0,0,0, 0.85)"
ctx.textBaseline = "middle";
if (chart.config.options.chartExtraOption == 1) {
var textX = Math.round((width-ctx.measureText(text).width)/1.1),
textY = height / 2.5,
text = 60;
ctx.fillText(text, textX, textY);
ctx.save();
}
else{
var textX = Math.round((width-ctx.measureText(text).width)/1.1),
textY = height / 2.5,
text = 40;
ctx.fillText(text, textX, textY);
ctx.save();
}
}
});
Here is the changed fiddler you had: https://jsfiddle.net/bozhfmq6/1/
Source: stackoverflow.com
Related Query
- ChartsJS make number in middle for only one chart
- Chart JS attempt to stacked bar chart tooltip for only one dataset
- How to display value of only one datapoint in line chart
- Display a limited number of labels only on X-Axis of Line Chart using Chart.js
- Chartjs.org Chart only displaying in one page
- Empty circle - only point strok in line chart for ChartJS
- ng2Charts/chart.js changing chart type for one is impacting many charts
- Chart.js v2.0: Tooltip only for one dataset
- ChartJs(Java) Can I remove only specific gridLines for a Linear Chart withouth removing the labels on xAxis?
- How make border radius for chart area chart.js?
- Chart js - render images on only one dataset
- Chartjs chart with only one axis
- Bar chart (chart.js) with only 2 points does not show one of the bars
- Update of options for PrimeNG Chart needs two calls instead of one
- VueJS + Chartjs - Chart only renders after code change
- getting additional value fields from data source for dx.chartjs doughnut chart
- Disable tooltip for Line chart for one line
- How to limit chart JS hover to take only one value from each line chart when zoomed out?
- Chart.js how to make chart only show the most recent data
- How do I make a pie chart showing number of people in an age group with JSON and ChartJS?
- chart.js - how to draw and manage line when only one label present in chart js Linechart
- ChartJS with React: Only one value showing on time chart
- How to make one datefilter for multiple charts on one webpage?
- How to create a fixed number of y axes for a chartsjs linear graph?
- How can I make lines fully connected in a multi-line chart even when one dataset is more sparse than another?
- Javascript chart one number step
- Limit labels number on Chart.js line chart
- How can labels/legends be added for all chart types in chart.js (chartjs.org)?
- Chart Js Change Label orientation on x-Axis for Line Charts
- How to remove square label from tooltip and make its information in one line?
More Query from same tag
- How to push array multidimesional in javascript
- Charts.js candlestick (Financial Charts) Timeformat Question
- C# MVC5 JavaScript Chart.js Pie Chart with Realtime Updating from SQL Server Database without Refreshing
- Chart JS Line Graph multitooltipkey background color issue
- Is there a global setting in Chart.js for beginAtZero?
- Polar Area onclick event
- I can't display the vue-chart.js on the page
- Chart.js - shrinking legend to fit data
- Remove chartjs pie chart highlight on hover
- How to disable click in graph ChartJS
- Add new line in es6 inside a doughnut chart
- dynamic data in ChartJS
- React export component that is not diplayed to PNG
- Create Conditional Chart
- how to creat a dynamic datasets and new dynamic multi yAxes
- ChartJs events in Angular
- Remove slice onClick events on Pie Charts in Chart.js
- How can I change the cursor on pie chart segment hover in ChartJS 3?
- change legend item style when dataset is hidden
- Charts js. How to pass datasets use a select dropdown by angular instead jquery
- How to add datalabels to chartJS on Primefaces
- Radar Chart, Chart.js v3.2 labels customization
- Chartjs bar-chart does not render when values are equal
- How to change the position of the tooltip for the Bar type chart in Chart.Js
- How to configure linear labels in Time Cartesian Chartjs?
- How to change the label and grid line position on a timeseries chart in Chart.js 3?
- How to change space between columns in horizontalBar in Chart.js?
- chart.js? Specifically Radar Charta and Negative Numbers
- ChartJS: line graph with labels on the y-axis
- (chart.js v3.5.1) change bar background, label font color on click