C3: Tick count on y-axis

[jgrossier]

Hi,

When you use c3 without options, ticks on y-axis are matching with the grid and show rounded values, which is great.
The tick count option on y-axis is working well, but shows min, max and values matching the interval (example : min, max and (max/2) if count = 3). It would be nicer, I think, if values could still match the grid, which is easier to read.

Furthermore, max value is a problem when you rotate axis and use 100% of container's width : half of the label will be hidden.

Thanks !

J.

[masayuki0812]

Thank you for your reporting, but I think I don't understand the situation. Could you show me the code or fiddle? Thanks.

[jgrossier]

Hi

Sorry for the late answer.
Here's a fiddle to show you the situation : http://jsfiddle.net/y93gx3ej/1/

It would be nice to have 3 y rounded values on chart2, like we have 9 on chart1.

Thanks !

[masayuki0812]

Hi, I see. Thank you. I think axis.y.tick.count can be used for your purpose and it's available in the latest code. So, could you try it again?

[jgrossier]

Sorry, I messed up with my fiddles
My point is shown in this one : http://jsfiddle.net/y93gx3ej/4/

tick.count is working well and showing 3 values, but these ones are hard to read. IMHO Y-axis ticks are working better with rounded values as shown in the first chart.

Thanks !

J.

[masayuki0812]

In previous version, tick count cannot be set precisely. I mean sometimes the count of ticks differs from the value you set (e.g. if you set ticks = 7, but the number of ticks will be 5 because it depends on d3 function).
I totally agree with your idea that ticks should have rounded number, but basically it's difficult to satisfy both at the same time (precise number of ticks and rounded values).
Anyway, I'll add something to enable rounded values. Please give me some time.

UPDATE:
Or please use axis.y.tick.values to set tick values directly. I think this is the easiest way.

[shadowmaru]

@masayuki0812

I'm also struggling with this. If I leave the default settings, the tick count is too high for my data. If I set tick count, I have issues with precise values that are too hard to read.

Setting tick values is not an option for me, because my chart is generated dynamically, and I have no idea what the numbers (and their order of magnitude) will be.

I know vanilla d3 handles this pretty well, what can we do in c3 to make this better? How do you calculate the default y-axis tick values? (sorry, wasn't able to find in source code)

[jlubeck]

Has anyone solved this?

[kaspar-allenbach]

I solved it trough manualy calculating the distances:

x: {
  tick: {
    count: 24 / 3.56
  }
}

I just calculated it based only by trial & error until the ticks match the datapoints.
It's pretty dirty but it solves the problem.