CODEWITHSUNDEEP
javascriptjqueryhtmlsvgc3.js
Kaushik Rajan
Kaushik Rajan

Reputation: 3

How do I set the ID attribute to the SVG element created using C3.js?

I'm exploring C3.js and have been using it to build basic charts. I have built a simple bar chart based on the template that was provided in the C3 website and modified it to display a different color based on the value.

The following is the JS code: 

var chart = c3.generate({
data: {
    columns: [
        ['data1', 30, 20, 50, 40, 60, 50],
    ],
    type: 'bar',
    colors: {
        data1: '#0000ff'
    },
    color: function(color, d) {
        return d.value < 25 ? '#ff0000' : color
    }
}
});

The code runs fine and the bar graph is rendered as expected.

When I inspect the HTML, I see an SVG tag (which essentially is the bar graph) that is generated with no ID attribute.

Wanted to know if there is any way to set and access the ID attribute for the SVG tag that is generated.

Thanks in advance!

Upvotes: 0

Views: 1405

Answers (1)

Dmitry Demidovsky
Dmitry Demidovsky

Reputation: 8197

You can use c3.js oninit callback with d3.js attr function:

var chart = c3.generate({
    oninit: function() {
        this.svg.attr('id', 'your_id')
    },
    ...

Upvotes: 3

Related Questions