0
votes

I am creating small charts with billboard.js and would like to reduce the number of ticks on the vertical axis to make the chart more readable. This can be achieved by setting the tick count but this forces an exact number of ticks, instead of dynamically choosing a number close to but not exactly equal to your choice so that the tick labels look pretty. For example, see this jsfiddle demonstrating a set of non-optimal tick labels:

var chart = bb.generate({
    bindto: "#chart",
    data: {
        type: "bar",
        columns: [
            ["data1", 30, 200, 100, 170, 150, 250],
            ["data2", 130, 100, 140, 35, 110, 50]
        ]
    },
    size: {
        width: 150,
      height: 150
    },
    legend: {
        show: false
    },
    axis: {
        y: {
        tick: {
            count: 5
        }
      }
    }
});

I can imagine two ways of fixing this. First, after the chart is drawn, call an internal d3 axis object (somewhere under the chart.internal hierarchy) to change the ticks in a more intelligent way. Second, extract out the range of the data, create a d3 axis and scale object, and use is to calculate the number of ticks, which is then set using a billboard.js function. The first approach is preferable since it would require less code. Is there a way to do this?

1

1 Answers

3
votes

Instead of setting tick counts, you can deal with tick.values.

axis: {
    y: {
        tick: {
            values: [50,100,150,200,250]
        }
    }
}

enter image description here