CODEWITHSUNDEEP
javascriptd3.jsdata-visualizationc3
Shail Patel
Shail Patel

Reputation: 1814

How to remove axis line overflow in c3js line graph

Line chart

If you take a look at those red circled areas, you can see that the axis is overflowing on the bottom left corner, and that there are axis ticks on the top of the Y axis and end of the X axis.

The only custom CSS I have for the axis and the c3 chart config:

.tick line {
  display: none;
}

var rateConfig = {
  bindto: '#line-chart',
  data: {
    x: 'date',
    xFormat: '%m%d',
    columns: [],
  },
  legend: {
    show: false,
  },
  point: {
    r: 4,
  },
  axis: {
    y: {
      tick: {
        format: function (d) { return d + '%'; },
        count: 5,
      },
      max: 100,
      padding: {
        top: 0,
        bottom: 0,
      },
    },
    x: {
      type: 'timeseries',
      tick: {
        culling: false,
      },
    },
  },
  color: {
    pattern: [colors['Rate1'], colors['Rate2'], colors['Rate3']],
  },
  grid: {
    y: {
      lines: [
        {value: 25},
        {value: 50},
        {value: 75},
        {value: 100},
      ],
    },
  },

Upvotes: 2

Views: 3327

Answers (1)

lhoworko
lhoworko

Reputation: 1191

Take a look at this:

http://c3js.org/reference.html#axis-x-tick-outer

You just need to alter the call to rateConfig like this:

....
axis: {
    y: {
        tick: {
            format: function (d) { return d + '%'; },
            count: 5,
            outer: false
        },
        max: 100,
        padding: {
            top: 0,
            bottom: 0
        }
    },
    x: {
        type: 'timeseries',
        tick: {
            culling: false,
            outer: false
        }
    }
},
....

Notice the addition of outer: false to both the x and y ticks.

Upvotes: 5

Related Questions