[Chartjs]-How could I skip drawing empty/zero value and its value on tooltip

4👍

You can add a text "N/A" instead "0" values in your data:

data: ["7", "25", "75", "78", "10", "N/A", "77", "02", "44", "N/A"]

this is the result: Image

here is an example: codepen example

0👍

You can use the onAnimationComplete function to disable points and tooltip display

var ctx = document.getElementById("myChart").getContext("2d");
var myLineChart = new Chart(ctx).Line(data, {
    animation: false,
    onAnimationComplete: function () {
        // prevents the update from triggering an infinite loop
        if (!this.clearCycle) {
            this.clearCycle = true;

            this.datasets.forEach(function (dataset) {
                dataset.points.forEach(function (point) {
                    if (point.value === 0) {
                        point.display = false;
                        point.hasValue = function () {
                            return false;
                        }
                    }
                })
            })

            this.update();
        }
        else
            delete this.clearCycle;
    }
});

Fiddle – http://jsfiddle.net/u7dsy6ep/


If you are using animation, the logic needs to be moved to the onAnimationProgress and executed only once, unless you don’t mind seeing the dots while the animation is in progress.

0👍

I am not sure if it was possible with previous versions of Chart.js 2, for the tooltips just add this property to Chart object:

filter: x => return x.yLabel > 0

A simple one liner.
I know it’s old, but people might be still confused.

0👍

To hide these values from your tooltip on your chart object, options -> plugins -> tooltip -> filter accepts a function that returns a boolean to render the tooltip.

github

filter: (e: TooltipItem<TType>, index: number, array: TooltipItem<TType>[], data: ChartData) => boolean;

TooltipItem has a raw attribute which represents the data value.

in my case this is what my filter function looks like

filter: (label) => {
            if (typeof (label.raw) === "number")
              return label.raw > 0
            else return true
          }

Leave a comment