C3.js - Show/hide points independently for a data series

Asked 25/11, 2014 at 0:15 Answered 11/5, 2020 at 9:17

I am creating a line chart for a data series using C3.js.

I am struggling in trying to show the "points" only for one of the series.

Basically, first I am creating a multiple series line chart with some reference data, and then I am loading (with char.load) a new particular data line in which I want to show points, only for that particular line while the other reference lines remain with hidden points.

Is that possible via C3.js? If so, could you instruct me to do so, thanks! Also, any method to do so using D3.js while using C3.js is welcome.

This is the official example in which all points are hidden for a data series, just for reference: http://c3js.org/samples/point_show.html

Skatole answered 25/11, 2014 at 0:15 Comment(0)

c3.js provides comprehensive class attributes on all its elements so you can customize them with CSS. For example to hide the points on the 2nd series add this CSS:

#chart .c3-circles-data2 {
  display: none;
}

Example here.

Gambado answered 25/11, 2014 at 1:19 Comment(0)

Here's an example of using the show and hide methods of a chart object to selectively display lines:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>show hide</title>
    <meta charset="utf-8" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
</head>
<body>
    <div id="chart"></div>
    <script>
        var chart = c3.generate({
            bindto: '#chart',
            data: {
                x: 'x',
                columns: [
                    ['x',     1, 2, 3, 4, 5],
                    ['y1', 3, 5, 6, 4, 5],
                    ['y2', 2, 4, 7, 6, 5]
              ]
            }
        });

        function cbclick(a){
            var lineData = "y" + a;
            var cbID = "cb" + a
            var cb = document.getElementById(cbID);
            if (cb.checked) {
                chart.show([lineData]);
            } else {
                chart.hide([lineData]);
            }
        }
    </script>

    <div align="center">
        <input type="checkbox" id="cb1" onclick="cbclick(1)" checked="true">y1</input>
        <input type="checkbox" id="cb2" onclick="cbclick(2)" checked="true">y2</input>
    </div>
</body>

Borodin answered 8/6, 2016 at 3:34 Comment(0)

There are a code for this purpose in the C3.js library:

point: {
  show: false,
}

You can check this at here

Greed answered 11/5, 2020 at 9:17 Comment(0)

Recommended topics

Hot tags