Is it possible to hide certain lines, bars and other graphic elements from a c3js chart, without unloading or hiding data?

I wish to keep that data in the tooltip but hide some graphic elements. Hover over one bar and see data for other hidden bars.

I know about the hide method - chart.hide(['data2', 'data3']); - but this also deletes the data from the tooltip.

My question is not discussed in the documentation it seems.

A similar issue in November was not solved.

I don't have any code right now - just looking for an alternative to making a custom tooltip.

Thanks

Is it possible to hide certain lines, bars and other graphic elements from a c3js chart, without unloading or hiding data?

I wish to keep that data in the tooltip but hide some graphic elements. Hover over one bar and see data for other hidden bars.

I know about the hide method - chart.hide(['data2', 'data3']); - but this also deletes the data from the tooltip.

My question is not discussed in the documentation it seems.

A similar issue in November was not solved.

I don't have any code right now - just looking for an alternative to making a custom tooltip.

Thanks

• javascript
• d3.js
• charts
• c3.js

1 Answer 1

One easy solution is to use CSS display property for the chart svg elements like:-

http://jsfiddle/chetanbh/j9vx0dmg/

var chart = c3.generate({
  data: {
    columns: [
        ['data1', 100, 200, 150, 300, 200],
        ['data2', 400, 500, 250, 700, 300],
    ]
  }
});

In the above c3js chart example a line chart is rendered with two lines.

Each line is a Path svg element under a Group element. These group elements will get class attribute values like 'c3-target-data1' and 'c3-target-data2'.

Taking advantage of this we can use CSS like:-

.c3-target-data2 {
    display: none;
}

to hide the entire 'data2' in the chart, but tooltip will continue to show the data for 'data2'.

Hope this helps.