Chart X-Axis tick limiting

[CHR15-]

Hi,

Is it possible to set the number of items in the x axis at a given time? for example.. currently for the chart, the x axis contains the same amount of values..:

Small screen size

Medium screen size

Large screen size

Regardless of the chart size, there is 7 items on the x-axis... is there an option in the API to limit this such as:

axis: {
x: {
values: 3
}
}

this would produce the following:

axis: {
x: {
values: 5
}
}

would produce the following:

[masayuki0812]

You can use axis.x.tick.count option like axis.x.tick.count = 5.
Sample is here - http://c3js.org/samples/axes_x_tick_count.html
Please try this.
Thanks.

[CHR15-]

ok, understand this.. but is there a way to change it while the chart is in the page.. ie, dynamically load it?

chart.load({
axis: {
x: {
tick: {
count : 20
}..

[JakeSidSmith]

Would be great if we could pass a function to the tick.count so it would update automatically .e.g

tick: {
  count: function () {
    return chart.size.width / 10;
  }
}

Also, the tick.count seems to be a little buggy at the moment. When this is set to certain values it draws a different number of ticks.

e.g.
tick.count = 4, actually draws 7
tick.count = 3, actually draws 2

[CHR15-]

@masayuki0812

http://jsfiddle.net/e482V/8/ is an example where count is ignored when set to 5.
http://jsfiddle.net/e482V/9/ is an example where 3 is set but 2 is in the chart.
http://jsfiddle.net/e482V/10/ is where 4 is set, only 2 in the chart

if you set 5... it no longer listens to count

[masayuki0812]

Thank you for your troubleshooting, but it might be not easy to fix this because c3 uses d3 native function to set tick count..
Anyway, I'll check about this more.

@JakeSidSmith Hi, I agree with your idea. I'll add that functionality later.

[CHR15-]

@masayuki0812 Any news on this one?

[masayuki0812]

Sorry, there is not, but I'm considering to use categorized axis. I'll try later.

[masayuki0812]

@chris-Opsimize I think this has been fixed and could you try on the latest version 0.1.27?

[CHR15-]

Looks grand!

[raghbendra2015]

@masayuki0812

I am facing one issue in X axis values. See my code below

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="c3.js"></script>
<script>
var chart = c3.generate({
    data: {
        x : 'x',
        columns: [
            ['x', 'Ho Chi Minh City', 'Tanjung Priok (Jakarta)', 'Shenzhen', 'Haiphong', 'Antwerp', 'Chennai', 'Memphis Rail Ramp', 'Los Angeles / Long Beach / San Pedro', 'Shanghai', 'Shanghai'],
            ['Your lowest rate', 30, 200, 100, 400, 300, 25, 1000, 40000,20000,23000],
            ['Benchmark rate', 400, 200, 100, 4000, 1900, 100, 1400, 250,16000,19000],
            ['Lowest rate on route', 350, 15000, 19000, 16210, 16000, 12040, 12510, 18800,19500,11150],
        ],
        type: 'bar'
    },
    axis: {
        x: {
            type: 'category' // this needed to load string x value
        },
        y: {
          label: {
            text: 'Your Y Axis',
            position: 'outer-middle'
          },

        tick: {
          values: [1000, 5000, 10000, 15000, 20000, 25000, 30000, 35000, 40000, 45000, 50000]
        }

        }
    },

});

I have used "Shanghai" at two places in X axis value. Now its showing the position of Shanghai in array not name when I am plotting the graph. See attached graph image. How can I show the duplicate name in X - axis ..... because in my case there can be duplicate records in X- axis.