Select only some data by default in multi data series c3 charts

user_6442877 0
Viewed 225

I have a very complicated multi-data chart as you can see in this picture: enter image description here

As you can see, the C3 chart enables all data series by default and shows them in the chart together.

Now I want to know if there is a way I can select one or two data series to be shown as default (I mean when the page is loaded, one or two data series are enabled instead of all data in the chart).

c3.js html javascript
1 Answers

Yes, you can do this. Let this be our example data:

data: {
   columns: [
     ['data1', 100, 200, 150, 300, 200],
     ['data2', 400, 500, 250, 700, 300],
     ['data3', 200, 150, 25, 250, 100],
   ],
 },

If you want to hide e.g. 'data2', use the following:

data: {
    hide: ['data2']
}

This will hide 'data2' series in the chart, but will still show all data series in the legend. If you also want to hide it from the legend, use:

legend: {
    hide: ['data2']
}

I have created a fiddle with two examples for you. The first one only hides the data in the chart, but still shows it in the legend. The second one hides it in both the chart and the legend: http://jsfiddle.net/hbge96xd/3/

user_80086520
Related