C3 - Add Custom Labels on Line Graph

Question

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("$,")

score 2 · Accepted Answer · answered Aug 06 '18 at 08:27

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

C3 - Add Custom Labels on Line Graph

1 Answers1