Is it possible to use C3 and D3 together?

Question

I'm looking into charting libraries and I'm very impressed by the power of D3 , but I'm kind of mind-boggled by its documentation. It would be a much easier decision to go with C3 instead if I knew that I could still use D3 to fill in whatever limitations C3 has.

So is it possible, with C3, to use D3 functionality to enhance charts generated with C3?

Answer 1

Your question is a little too vague to be answerable -- how exactly do you want to use d3 to modify a c3 generated chart?

That said, I'll take a shot at answering anyway. d3 is all about selecting/appending DOM elements, binding data to them and then manipulating them. After c3 does it's thing, there is nothing stopping you from selecting on what it generated and modifying it further.

Here's the simplest example I can think of:

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

// select all it's "circles" and make them red
d3.selectAll(".c3-circle")
  .style("fill","red");

If I was you, though, I'd bite the bullet and just learn d3 . If you are looking at a plotting library built on top of d3 and saying you need more, your code will be cleaner and more maintainable built from the ground up with straight d3 .