CODEWITHSUNDEEP
javascriptc3.js
Prabu
Prabu

Reputation: 165

How to create circle to outer of circle in line of chart in c3.js?

I started to learn C3.js. It is pretty good to work with.

I got stuck in this part, I hope anyone can help me to go forward .

How to create circle in outer of circle in line chart using c3.js .

This is my example code 

var chart = c3.generate({
  data: {
    columns: [
        ['data1', 30, 200, 100, 150, 150, 250],
        ['data12', 30, 200, 100, 150, 150, 250]
    ],
    type: 'line'
  },
});

It is giving one small circle ( Dot kind of ) but I want to create one more circle with different color and inside of that circle I need to show this small circle (Dot Kind of ) .

How to do that?

I have tried to select all circle and apply border for that .I have tried like this

 d3.selectAll('circle').each(function(){

    this.style('border-radius: 20px;');

 });

this is wrong way, also this is not working. How to do that ?

Is it possible in c3.js?

Upvotes: 1

Views: 1921

Answers (1)

potatopeelings
potatopeelings

Reputation: 41065

You can set the size of your point using chart options

...
point: {
    r: 20
}
...

and you can draw a border by using CSS

#chart .c3-circle {
    stroke: black;
    stroke-width: 4;
}

(assuming you are drawing the chart in a container with ID chart)

Fiddle - http://jsfiddle.net/yhz8k5k9/

enter image description here

Upvotes: 4

Related Questions