Chart.js zeros handling

chart.js, frontend, html, javascript

Solution

From reading the source code for `Chart.js` I've found that the it tries to sum each of the `value` fields in its datasource before rendering the chart (see the use of `segmentTotal` here).

To workaround this, use `null` for all the values and set one (or more) of the data points to a very small, near zero value. I've used a float notation here for one of the values:

var kPoints = null;
var mPoints = null;
var tPoints = null;
var cPoints = 1e-10;

After that, the example below re-renders the chart (after a 3 second delay) with different data values to show a case of the values updating from the default "dark" chart to a filled out version:

setTimeout(function () {

    // Generate a new, random value for each of the data points
    doughnutData.forEach(function (item) {
        item.value = Math.floor((Math.random() * 10) + 1);
    });

    var ctx = $("#profileChart").get(0).getContext("2d");
    var myDoughnut = new Chart(ctx).Doughnut(doughnutData);
}, 3000);

JSFiddle Example: http://jsfiddle.net/MasterXen/6S9DB/3/

Problem

I'm working with chart.js and to render a doughnut chart. I want to set the initial chart total value to zero so it can render a full " empty" chart. When I instatiate the chart with zeros it does not render. I cannot find how it handle zeros in the developer documentation. ``` var kPoints = 000; var mPoints = 000; var tPoints = 000; var cPoints = 000; var doughnutData = [ { value : kPoints, color : "#FF8000" }, { value : mPoints, color : "#99CC00" }, { value : tPoints, color : "#0099CC" }, { value : cPoints, color : "#333333" }, ]; var ctx = $("#profileChart").get(0).getContext("2d"); var myDoughnut = new Chart(ctx).Doughnut(doughnutData); ```

Original source