Hide some graphic elements, c3js, without unloading data

Question

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

Grus

Answer 1

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

http://jsfiddle.net/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.

Legalize

That certainly helps. Cheers – Grus

For reference, this seems to work well with line chart. However, bar charts will not look the best, especially if you're hiding bars that are longer than the rest. – Grus

Your are correct, this solution works well for line and area chart. May look bad for grouped or stacked bar charts. To make it work for bar charts some c3js method overriding is needed. Just CSS won't work well. – Legalize

What is that case if one more data column having string values? i don't want to display it on chart line but need to display in tooltip – Bomber