CODEWITHSUNDEEP
d3.jschartsc3.js
VicM
VicM

Reputation: 2479

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

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

Upvotes: 5

Views: 5661

Answers (3)

ram
ram

Reputation: 1

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

point: {
  show: false,
}

You can check this at here

Upvotes: 0

dreme
dreme

Reputation: 4961

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>

Upvotes: 0

Mark
Mark

Reputation: 108567

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.

Upvotes: 7

Related Questions