CODEWITHSUNDEEP
chart.js
newBike
newBike

Reputation: 14992

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
        ],

Upvotes: 2

Views: 9206

Answers (5)

user1763306
user1763306

Reputation: 1

To remove a point in a chart.js graph just set its value to NULL. I just discovered this by trial and error, I could not find this very basic info by Googling.

Upvotes: 0

Shane Walker
Shane Walker

Reputation: 401

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
          }

Upvotes: 0

emer_abraxas
emer_abraxas

Reputation: 51

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

Upvotes: 5

Umer Z
Umer Z

Reputation: 1

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.

Upvotes: 0

potatopeelings
potatopeelings

Reputation: 41075

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.

Upvotes: 0

Related Questions