Hide some graphic elements, c3js, without uploading data

Question

Is it possible to hide certain rows, columns and other graphic elements from a c3js diagram without uploading or hiding data?

I want to save this data in a 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 removes the data from the tooltip.

My question is not discussed in the documentation .

A similar problem in November has not been resolved.

I don’t have the code now, just looking for an alternative to creating a custom tooltip.

thank

Answer 1

One simple solution is to use the CSS display property for svg chart elements such as: -

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 c3js chart example above, the line chart is displayed with two lines.

Each line represents the svg element of the path under the Group element. These group members will receive class attribute values, such as "c3-target-data1" and "c3-target-data2".

Using this, we can use CSS as: -

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

to hide the whole "data2" in the chart, but the tooltip will continue to show the data for "data2".

Hope this helps.