CODEWITHSUNDEEP
d3.jsc3.js
Tomi
Tomi

Reputation: 179

C3 - Add Custom Labels on Line Graph

I have a C3 chart,

I would like to add a label on each point reading its y value with a percentage symbol appended to it.

e.g. 400%.

There is a solution for bar charts 

labels: {
                format: {
                    y: d3.format("$,")
                    //y: function (v, id) { return "Custom Format: " + id; }
                }

But this doesn't work for line graphs.

There is also good answer on custom labels for bar charts, however, this doesn't seem to transfer to line charts.

There is this good answer on custom tooltips, but I can't work out how to do custom labels in a line graph.

Attempt: http://jsfiddle.net/7kYJu/6547/

Also, for some reason using % will prevent the graph from appearing, whereas $ will work, e.g 

y: d3.format("$,")

Upvotes: 2

Views: 790

Answers (1)

Ravi Teja
Ravi Teja

Reputation: 192

Try This 

`var chart = c3.generate({
   data: {
                columns: [
                    ['data1', 30, 200, 100, 400, 150, 250],
                    ['data2', 130, 100, 140, 200, 150, 50]
                ],
                type: 'line',
                labels: {
                    format: {
                        data1: d3.format("$,")
                        //data1: function (v, id) { return "Custom Format: " + id; }
                    }
                }
            }
});`

it should be the data array and not the axis to be mentioned as key in format object

Upvotes: 2

Related Questions