score:0
the plugin core api offers a range of hooks that may be used for performing custom code. you can use the afterdraw
hook to write the text "no data" directly on the canvas using canvasrenderingcontext2d
in case the sum
of all data
values is zero.
please take a look at your amended code and see how it works.
new chart('doughnutchart', {
type: 'doughnut',
plugins: [{
afterdraw: function(chart) {
let sum = chart.data.datasets[0].data.map(v => parseint(v)).reduce((a, b) => a + b, 0);
if (sum == 0) {
let width = chart.chart.width,
height = chart.chart.height + 35,
ctx = chart.chart.ctx;
ctx.save();
let fontsize = (height / 200).tofixed(2);
ctx.font = fontsize + "em sans-serif";
ctx.textbaseline = "middle";
let text = 'no data',
textx = math.round((width - ctx.measuretext(text).width) / 2),
texty = height / 2;
ctx.filltext(text, textx, texty);
ctx.restore();
}
}
}],
data: {
labels: ['d1', 'd2'],
datasets: [{
data: ['0', '0'],
backgroundcolor: ["#f7464a", "#46bfbd", "#fdb45c", "#949fb1", "#4d5360"],
hoverbackgroundcolor: ["#ff5a5e", "#5ad3d1", "#ffc870", "#a8b3c5", "#616774"]
}]
},
options: {
responsive: true
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.4/chart.min.js"></script>
<canvas id="doughnutchart" height="80"></canvas>
Source: stackoverflow.com
Related Query
- Django Chartjs outputs "No data" when data has value 0
- JSON cyclic object value when posting data in ChartJS
- Chartjs Bar Chart showing old data when hovering
- Why can I not see a data value when hovering over a point on the radar chart?
- Want to draw data using chartjs in django
- How to make chartJs stacked bar always rounded when data is 0?
- ChartJS datasets with one data value
- Completely hide the Y-axis on chartjs when data is hidden
- How to set the chartjs bar graph scale to the highest value in the result data
- Skip labels when associated value is null in chartJS
- Can I use a custom data format when using Vue + Chartjs
- Multiple data sets not working when using ChartJS
- ChartJS have xAxes labels match data source
- Chartjs Bar Chart showing old data when hovering when use of ajax
- Chartjs unexpected visual animation effect when adding data
- Chartjs inverted bars when negative value
- How to sum the array value in javascript like chartjs data array and input value sum
- ChartJS dynamic line chart ghosting back to old data when hovered on
- Update data when pressing submit in chartjs in vuejs
- Remove white space in ChartJS when value is null
- Show/hide All nested data in ChartJS Pie chart when outer is shown/hidden
- "Maximum call stack size" Error When Adding Data to Chartjs Using Props With Fetch (Vue/Chartjs)
- JavaScript ignore commas inside ChartJS data field pulled from csv that data has commas and is enclosed by double quotes
- chartjs data isn't passing to django webpage
- Calling data from outside of Chartjs code
- ChartJS - format datetime X axis when displaying data from MySql table
- Chartjs display bug when pushing data to graph
- getting additional value fields from data source for dx.chartjs doughnut chart
- Insert value into a ChartJS with different data label
- Hide x-axis when it has no value on chart.js
More Query from same tag
- ChartJS tooltip values aren't matching the data after updating multiple charts
- Ionic2: Use chartjs inside ion-segment
- How can I add a label above just the last bar in a Chart.JS bar chart?
- chart.js not getting rendered inside ng-template in angular
- Passing JSON data from PHP array into ChartJS
- Updating chart.js with a dataset of different size not working
- vue-chartjs reactive data error
- Live update the charts.js graph on a web page using json data received from a remote server
- Chartjs in Reactjs - how can I update data dynamically?
- Can I use chartJS for drawing a stock map with rectangle?
- C# How to print html Convas element in PDF document
- Firefox is not responding when loading 800+ data sets in Bar Chart with Charts.Js
- Gradient line chart with ChartJS
- Getting data into script tag from route?
- Updating chart.js with JSON from Razor page
- Dynamic colours in chartJS based on entries in the array
- How to Convert an Array of Objects into an Object of Associative Arrays in Javascript
- bower degrades chart.js each time installing other packages
- How to put images/ charts into table?
- tooltip messes up bar chart in Chart.js
- How to always show a label in ChartJS in React
- Add Y-Axis dynamically Chartjs
- Chart.js - displaying multiple line charts using multiple labels
- chart.js - Horizontal lines per bar
- Chart.js and react-chartjs-2 property translate is missing type
- Chart.js multi line chart that has different labels
- Angular 2 ng2-charts doughnut text in the middle?
- Django admin/ Chart js error - super() takes at least 1 argument (0 given)
- Prevent label of another data from being toggled whenever a label from one data is toggled
- How to just show x-axis (at y = 0) using chartkick (chart.js)?