CODEWITHSUNDEEP
javascriptchartsc3.js
Swati Jadhav
Swati Jadhav

Reputation: 1

c3.js : How to hide dots for specific data-set?

Suppose I have two dataset, data1 and data2 but I want to hide points/ circles on data2. How can I do it?

var chart = c3.generate({
  data: {
      columns: [
          ['data1', 30, 200, 100, 400, 150, 250],
          ['data2', 50, 20, 10, 40, 15, 25]
      ]
  }

})

Upvotes: 0

Views: 1191

Answers (2)

Suchit kumar
Suchit kumar

Reputation: 11869

Try This using CSS: Source Here. c3-circles-data2 and c3-circles-data1 are the classes generated by c3 for the given labels key like data1,data2.

var chart = c3.generate({
  data: {
      columns: [
          ['data1', 30, 200, 100, 400, 150, 250],
          ['data2', 50, 20, 10, 40, 15, 25]
      ]
  }
})
#chart .c3-circles-data2 {
  display: none;
}
<link href="https://unpkg.com/[email protected]/c3.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://unpkg.com/[email protected]/c3.js"></script>
<div class='chart'>
<div id='chart'></div>
</div>

NOTE: in case in you want to remove dots from both the series you can add

point: { show: false }

after data.

Upvotes: 2

Vinod Louis
Vinod Louis

Reputation: 4876

Not a js solution but for all the points c3 adds a class on the wrapper group element as c3-circles-data1 c3-circles-data2 for respective labels, which you can use for you data with label data2 which you can extend in css display none as : 

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

Sample FIDDLE

Upvotes: 0

Related Questions