How to remove checkmarks when lines on nvd3 chart are deselected by default

33 views Asked by At

I would like to set all the lines on nvd3 chart to be deselected by default. I modified the code on the live chart from nvd3 website. here (Sorry, I don't know how to save the code).

I added legend: { vers: 'furious' } in chart block, and added disabled: true to the series objects. code snippet:

chart: {
    type: 'lineChart',
    height: 450,
    margin : {
        top: 20,
        right: 20,
        bottom: 40,
        left: 55
    },
    legend: {
        vers: 'furious'
    },
    x: function(d){ return d.x; },
    y: function(d){ return d.y; },
    useInteractiveGuideline: true,
    dispatch: {
        stateChange: function(e){ console.log("stateChange"); },
        changeState: function(e){ console.log("changeState"); },
        tooltipShow: function(e){ console.log("tooltipShow"); },
        tooltipHide: function(e){ console.log("tooltipHide"); }
    },
    xAxis: {
        axisLabel: 'Time (ms)'
    },
    yAxis: {
        axisLabel: 'Voltage (v)',
        tickFormat: function(d){
            return d3.format('.02f')(d);
        },
        axisLabelDistance: -10
    },
    callback: function(chart){
        console.log("!!! lineChart callback !!!");
    }
}

and

function sinAndCos() {
    var sin = [],sin2 = [],
        cos = [];

    //Data is represented as an array of {x,y} pairs.
    for (var i = 0; i < 100; i++) {
        sin.push({x: i, y: Math.sin(i/10)});
        sin2.push({x: i, y: i % 10 == 5 ? null : Math.sin(i/10) *0.25 + 0.5});                 cos.push({x: i, y: .5 * Math.cos(i/10+ 2) + Math.random() / 10});
    }

    //Line chart data should be sent as an array of series objects.
    return [
        {
            values: sin,      //values - represents the array of {x,y} data points
            key: 'Sine Wave', //key  - the name of the series.
            color: '#ff7f0e',  //color - optional: choose your own line color.
            strokeWidth: 2,
            classed: 'dashed',
            disabled: true
        },
        {
            values: cos,
            key: 'Cosine Wave',
            color: '#2ca02c',
            disabled: true
        },
        {
            values: sin2,
            key: 'Another sine wave',
            color: '#7777ff',
            area: true      //area - set to true if you want this line to turn into a filled area chart.
        }
    ];
};

Everything works expected but the checkmarks are checked. The result is shown here: Result image My question is how to remove the checkmarks by default? Thank you very much.

============================ Solution ============================

I found the solution, just simply add following statement.

userDisabled: true

0

There are 0 answers