CODEWITHSUNDEEP
c3.js
noeyeat
noeyeat

Reputation: 335

Set label Y position on C3 Charts

Currently I have a line chart with 2 columns on it. I'm always showing labels because I want it to show right away the details.

The problem is, when the value of the 1st column matches with the value of the 2dn column the labels overlap.

Is there a way to show the label for column 1 always ABOVE the first line and show the label for column 2 always BELOW the second line?

This is what I got right now:

var chart1 = c3.generate({ //large devices
    bindto: '#chart',
    data: {
        columns: [
            ['Col1', -0.7, -0.1, 4.6, -2.0, 4.2, 4.3, 5.4, 5.0, 0.6, 4.2, 4.9, 2.8, 2.7],
            ['Col2', -1.5, -0.9, 4.0, -2.5, 3.7, 4.0, 5.1, 4.8, 0.6, 4.2, 4.9, 2.8, 2.7]
        ],
        labels:{
            format: function(value){
                return value + '%'
            }
        }
    },
    axis: {
        x: {
            type: 'category',
            categories: ['Feb-17', 'Mar-17', 'Apr-17', 'May-17', 'Jun-17', 'Jul-17', 'Aug-17', 'Sep-17', 'Oct-17', 'Nov-17', 'Dec-17', 'Jan-18', 'Feb-18']
        },
        y: {
            show: false,
            min: -8,
            max: 8
        },
    },
    grid: {
        y: {
            lines: [{
                value: 0
            }]
        }
    },
    size: {
        height: 240
    }
});

I tried to set the Y position on the onredered method but label doesn't have a y prop.Also, I can't get the dot position, so I wouldn't know if the current Y position is above or below the line.

Upvotes: 0

Views: 1106

Answers (1)

Zoran Pandovski
Zoran Pandovski

Reputation: 2342

You can set y axis label and change its position by this option

y: {
label: {
  text: 'Your Y Axis',
  position: 'outer-middle'
}}

Check the official documentation for more info: http://c3js.org/reference.html#axis-y-label

Upvotes: 0

Related Questions