plotly.js

The open source JavaScript graphing library that powers Plotly

Show Sidebar Hide Sidebar
Plotly.js

Button Events in plotly.js

How to bind callback functions to custom buttons in D3.js-based JavaScript charts.

var d3 = Plotly.d3,
    y1 = d3.range(100).map(d3.random.normal(6)),
    y2 = d3.range(100).map(d3.random.normal(9)),
    layout = {
        title:'Click buttons to toggle traces',
        showlegend:false
    },
    data = [{
        y:y1, marker: {color: 'fuchsia'}
    }, {
      y:y2, marker: {color: '#FFD966'}
    }];

Plotly.plot("myDiv", data, layout);

$('.hideshow button').click(function(){
    var btn_id = this.parentNode.id,
        data_index = ( btn_id === 'top' ) ? 0 : 1,
        myDiv = document.getElementById("myDiv"),
        visible = myDiv.data[data_index].visible;

    if( visible === undefined ) visible = true;

    Plotly.restyle("myDiv", 'visible', !visible, data_index);
});

plotly.js runs on all SVG-compatible browsers

Still need help?
Contact Us

For guaranteed 24 hour response turnarounds, upgrade to a Developer Support Plan.