CODEWITHSUNDEEP
c3.js
pmiranda
pmiranda

Reputation: 8450

C3.js add color to an horizontal line

Is there a way in C3.js for to add COLOR to an horizontal line, the level 0 in axis y in bar graphs? By default you have this graph:

enter image description here

What I need is this:

enter image description here

Any idea? thanks.

UPDATE: I've made a line with this, but I need to add color.

grid: {
            y: {
                lines: [
                    {value: 0, text: ''}
                ]
            }
        }

Upvotes: 0

Views: 1686

Answers (2)

Roy Shilkrot
Roy Shilkrot

Reputation: 3548

The reference has an example for horizontal (x-axis) lines: https://c3js.org/samples/grid_x_lines.html

// Copied from the reference
var chart = c3.generate({
data: {
    columns: [
        ['sample', 30, 200, 100, 400, 150, 250],
        ['sample2', 1300, 1200, 1100, 1400, 1500, 1250],
    ],
    axes: {
        sample2: 'y2'
    }
},
axis: {
    y2: {
        show: true
    }
},
grid: {
    y: {
        lines: [
            {value: 50, text: 'Label 50 for y'},
            {value: 1300, text: 'Label 1300 for y2', axis: 'y2', position: 'start'},
            {value: 350, text: 'Label 350 for y', position: 'middle'}
        ]
    }
}
});

Also for x-axis lines (vertical): https://c3js.org/samples/grid_x_lines.html

Upvotes: 0

pmiranda
pmiranda

Reputation: 8450

In case anyone need it, this does the magic: https://github.com/c3js/c3/issues/362#issuecomment-46377069

Upvotes: 1

Related Questions