CODEWITHSUNDEEP
javascriptc3.js
Peter Krauss
Peter Krauss

Reputation: 13982

Need to display none or not generate chart marks

This CSS is working for remove marks... 

#mychart .c3-circles-avg2017,
#mychart .c3-circles-avg2018 {
   display: none;
}

is a ugly way to do it, because all configs and chart definitions are at Javascrpt. I need to do by Javascript, ideal is to use C3 or D3... I try D3 and it is not working:

d3.selectAll('#mychart .c3-circles-avg2017').style("display","none");
d3.selectAll('#mychart .c3-circles-avg2018').style("display","none");

how to obtain same CSS effect by Javascript? (or say to C3 not put marks).

(edit after @thatOneGuy comment)

oops, sorry, my D3 command is working... So it is only a C3 question

https://jsfiddle.net/jo1h0dyb/

Upvotes: 0

Views: 90

Answers (1)

mgraham
mgraham

Reputation: 6207

If this is for the circles in a line graph, and you want to do it in the config, point.r is what needs set. It's not clear from the reference but it can take a function that has a datapoint {id, index, value, x} as an argument as well as a fixed value.

https://c3js.org/reference.html#point-r

Try this in your case:

point: {
  r: function (d) { return (d.id === "avg2017" || d.id === "avg2018") ? 0 : 5 }
}

Upvotes: 1

Related Questions