'How could I skip drawing empty/zero value and its value on tooltip

I want to skip some points with zero value on line chart of chartjs.

How could I do it ?

expected result

sampledata

    :labels => [
    [ 0] "10/01 (Thu)",
    [ 1] "10/02 (Fri)",
    [ 2] "10/03 (Sat)",
    [ 3] "10/04 (Sun)",
    [ 4] "10/05 (Mon)",
    [ 5] "10/06 (Tue)",
    [ 6] "10/07 (Wed)",
    [ 7] "10/08 (Thu)",
    [ 8] "10/09 (Fri)",
    [ 9] "10/10 (Sat)",
    [10] "10/11 (Sun)",
    [11] "10/12 (Mon)",
    [12] "10/13 (Tue)",
    [13] "10/14 (Wed)",
    [14] "10/15 (Thu)",
    [15] "10/16 (Fri)",
    [16] "10/17 (Sat)",
    [17] "10/18 (Sun)",
    [18] "10/19 (Mon)",
    [19] "10/20 (Tue)",
    [20] "10/21 (Wed)",
    [21] "10/22 (Thu)",
    [22] "10/23 (Fri)",
    [23] "10/24 (Sat)",
    [24] "10/25 (Sun)",
    [25] "10/26 (Mon)",
    [26] "10/27 (Tue)",
    [27] "10/28 (Wed)",
    [28] "10/29 (Thu)",
    [29] "10/30 (Fri)",
    [30] "10/31 (Sat)",
    [31] "11/01 (Sun)"
]

{
           :label => "Sample1(14:35)",
        :data => [
            [ 0] 5098.0,
            [ 1] 5098.0,
            [ 2] 5098.0,
            [ 3] 3898.0,
            [ 4] 4498.0,
            [ 5] 0,
            [ 6] 5898.0,
            [ 7] 5898.0,
            [ 8] 6698.0,
            [ 9] 6698.0,
            [10] 3898.0,
            [11] 4498.0,
            [12] 4498.0,
            [13] 4498.0,
            [14] 5898.0,
            [15] 7698.0,
            [16] 5098.0,
            [17] 4498.0,
            [18] 5898.0,
            [19] 3398.0,
            [20] 3398.0,
            [21] 3898.0,
            [22] 3398.0,
            [23] 3898.0,
            [24] 0,
            [25] 0,
            [26] 0,
            [27] 0,
            [28] 0,
            [29] 0,
            [30] 0,
            [31] 0
        ],

           :label => "Sample1(14:35)",
        :data => [
            [ 0] 5098.0,
            [ 1] 5098.0,
            [ 2] 5098.0,
            [ 3] 3898.0,
            [ 4] 4498.0,
            [ 5] 6698.0,
            [ 6] 5898.0,
            [ 7] 0,
            [ 8] 0,
            [ 9] 0,
            [10] 3898.0,
            [11] 4498.0,
            [12] 4498.0,
            [13] 4498.0,
            [14] 5898.0,
            [15] 7698.0,
            [16] 5098.0,
            [17] 4498.0,
            [18] 5898.0,
            [19] 3398.0,
            [20] 3398.0,
            [21] 3898.0,
            [22] 3398.0,
            [23] 3898.0,
            [24] 0,
            [25] 0,
            [26] 0,
            [27] 0,
            [28] 0,
            [29] 0,
            [30] 0,
            [31] 0
        ],
chart.js


Solution 1:[1]

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

Solution 2:[2]

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.

Solution 3:[3]

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.

Solution 4:[4]

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
          }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 potatopeelings
Solution 3 Umer Z
Solution 4 Shane Walker

Related Questions