Search code examples
cssd3.jschartsc3

Make the y-axis fixed irrespective of the content of the chart

I am using C3js to plot this chart

Chart No 1. c3js chart 1

on the y-axis, I have

  y:
    tick:
      values: [
        0
        0.05
        0.10
      ]
      format: d3.format('%')

when the value of the first bar is lesser than 10%, the 10% mark on y-axis will not display, :( . I realize that the content of the chart is dictating the height of the y-axis.

When I have a value that is over 10%, the mark on the y-axis displays

Chart No 2. c3js chart 2

This is not the kind of behaviour I want, I want to make the y-axis fixed and independent on the value of the bar. I have tried padding from the top and it looks really ugly and I have also tried to give it a fix height that didn't work either. It appears that the y-axis is dependent on the value of the bar.

My question is how do I make the y-axis stay at a fixed height of chart No 2. and make the 10% mark stay where it is irrespective of the value of the bar?

P.S The bar can have a hidden overflow, but I want the y-axis to be intact. Thanks.

Solution

  • You could use axis.y.max to set the max value of the y axis and axis.y.tick.values to set the tick values you want to show on the y axis.

    axis: {
    y: {
        max: 0.1,
        tick: {
            values: [0, 0.05, 0.1],
            ...

    Fiddle - http://jsfiddle.net/q5z3j2yy/