Billboard.js: show hide lines and points after initializing

[mafar]

IS there a way to turn points on and off after it is initialized

http://c3js.org/samples/point_show.html allows to show/hide points before initialization

like there are options for legend

API legend.show
API legend.hide

Consider an example here I have a bb chart and over chart I have 2 check boxes
[x] Show Lines
[x] Show Points

It was possible with float chart library but i am hard time with bb

there should be similar option for points

API points.show
API points.hide

and similar option for lines (means I only want to show points not lines)

API lines.show
API lines.hide

[porfirioribeiro]

Also faced this issue, i found no way to do it apart from regenerating the chart

[netil]

You can achieve this very easily.

function showHidePointsLInes(type, show) {
    var shape = { point: "circle", line: "path" };

    d3.selectAll(".bb-chart-line "+ shape[type])
        .style("display", show ? null : "none");
}

// hide & show points
showHidePointsLInes("point", false);
showHidePointsLInes("point", true);

// hide & show lines
showHidePointsLInes("line", false);
showHidePointsLInes("line", true);

If think this is useful, I'll consider adding for the next release.

[mafar]

@netil
Thankx for the solution

please see sample jsfiddle https://jsfiddle.net/bababalcksheep/39rxjoep/35/

But I have following questions and problems

1. I am using multiple charts in one page and hence d3.selectAll tends to turn on and off stuff on all charts, see jsfiddle
2. is it possible to select d3 instace from chart api on events like oninit: function() {} , so that I can show hide using that instance and toggle only relevant poitns and lines

[mafar]

Ok here is how i did this by modifying function a little bit

https://jsfiddle.net/bababalcksheep/39rxjoep/44/

// containment (string ) is id of given chart 
// usage showHidePointsLInes("point", false, '#chartLine');
function showHidePointsLInes(type, show, containment) {
  var shape = {
    point: "circle",
    line: "path"
  };

  d3.selectAll(containment + " .bb-chart-line " + shape[type])
    .style("display", show ? null : "none");
}

To avoid these problems,
it is pivotal for billboard.js to provide api as suggested above