CODEWITHSUNDEEP
javascriptjqueryc3.js
Rakesh K
Rakesh K

Reputation: 712

C3.js line chart - issues with axis labels

I'm having some trouble with C3.js.

  1. On the "X" axis, the last date is not completely visible (see attached screenshot).
  2. On the "Y" axis, I want to display only whole numbers and not decimals.

How can I resolve these issues?

enter image description here

Upvotes: 0

Views: 3988

Answers (3)

Dekai
Dekai

Reputation: 21

The first trouble is caused by the late date is out of svg range. So you could give svg padding area on the right by adding

var chart = c3.generate({
    data: {
        x: 'x',
        columns: [
            ['x', '2010-01-01', '2011-01-01', '2012-01-01', '2013-01-01', '2014-01-01', '2015-01-01', '2016-01-01'],
            ['sample', 1.2, 2.3, 0.5, 0.8, 1.5, 2]
       ]
    },
    padding: {
        right: 22
    }
}

Upvotes: 1

Alex Beauchemin
Alex Beauchemin

Reputation: 1181

You can also fix this with jquery once the graph is loaded

var $chartContainer = $('.c3');
var $lastTick = $chartContainer.find('.c3-axis.c3-axis-x .tick').last();
var translateValue = parseInt($lastTick.attr('transform').replace('translate(', ''),10);
var tickWidth = $lastTick[0].getBoundingClientRect().width / 2;

$lastTick.attr('transform', 'translate(' + (translateValue - tickWidth) + ',0)');

Upvotes: 0

Sean
Sean

Reputation: 15144

You could try adding a fake (null) point at the end of the data and then not show that point, to give yourself more space on the x-axis.

For the y-Axis you can deliberately set the y-axis values.

Here's an example: http://jsfiddle.net/bfcnzm1z/

var chart = c3.generate({

    data: {
        x: 'x',
        columns: [
            ['x', '2010-01-01', '2011-01-01', '2012-01-01', '2013-01-01', '2014-01-01', '2015-01-01', '2016-01-01'],
            ['sample', 1.2, 2.3, 0.5, 0.8, 1.5, 2, null]
        ]
    },
    axis: {
        x: {padding: {right:200},
            type: 'timeseries',
            tick: {
                format: function (x) {
                    return x.getFullYear();
                },
                outer: false,
                values: ['2010-01-01', '2011-01-01', '2012-01-01', '2013-01-01', '2014-01-01', '2015-01-01']
            }
        },
        y: {
            tick: {
                format: d3.format('d'),
                outer: false,
                values: [0,1,2]
            }
        }
    }
});

Upvotes: 4

Related Questions