set tick count for y-axis?

[sweatherall]

Is there any way to set the tick count for the y-axis like there is for x-axis?

I have y-values that do not make sense to be floats, yet when there are only 2 the chart gives me floating values between 0-1, 1-2.

Any suggestions are welcome, thank you.

[AnSavvides]

It doesn't look like c3 supports setting the count for y axis ticks looking at the library's reference/options, it should be trivial to implement though!

[sweatherall]

Good to hear, AnSavvides!
Could you give me some direction as to how to implement this? I would love to.
Would it just be some d3 code (I have done this in d3 elsewhere)? And if so, where would it go?
Thank you

[AnSavvides]

You'll need to extend c3 itself - generateTickValues is responsible for generating tick values for the x axis, which in turn is used by redraw as follows:

// update axis tick values according to options
if (!config.axis_x_tick_values && (config.axis_x_tick_fit || config.axis_x_tick_count)) {
    tickValues = $$.generateTickValues($$.mapTargetsToUniqueXs(targetsToShow), config.axis_x_tick_count);
    $$.xAxis.tickValues(tickValues);
    $$.subXAxis.tickValues(tickValues);
}

So you could for example rename generateTickValues into generateTickValuesX and then create a generateTickValuesY function which would be used in a similar manner.

[sweatherall]

Ah, great!
I very much appreciate your help, AnSavvides.

[AnSavvides]

No worries Steph, let me know if you need a hand :)

[threesided]

Hey, so there is a far easier way to set the number of ticks to use:

In the generate() function you can set axis.y.ticks to whatever value you would like. c3 will use this in place of the default 10.
object path eg:

var chart = c3.generate({
     axis: {
          y: {
              ticks: 3, 
          }
      }
    });

No need to extend or override the base functionality for it, it's already there.

[masayuki0812]

Hi, I added axis.y.tick.values and axis.y.tick.count so that we can control tick on y axis as well as y axis. And I removed axis.y.ticks because this cannot control ticks properly and it's more intuitive to specify new options than using axis.y.ticks. Thanks.

[sweatherall]

thank you much @masayuki0812 you are awesome

[MayankProgenG]

In the generate() function you can set axis.y.tick to whatever value you would like. c3 will use this in place of the default 10.
object path eg:

var chart = c3.generate({
axis: {
y: {
tick: {
count: 4
}
}
}
});
After tick of y axis is 4.

[WoodrowShigeru]

I find the axis.y.tick behavior lackluster. I.e., for a dataset like ["apples", 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] and a tick setting of 10, it generates a y axis of [0,0,0,0,0,0,1,1,1,1,1,1].

Here is a workaround:

c3_config.axis.y.tick.count = Math.min(
  [
    // get unique values.
    ...new Map(
      c3_config.data.columns
        // skip x row if present.
        .filter((dataset) => dataset[0] !== 'x')

        // skip dataset key.
        .map((dataset) => dataset.slice(1))

        // merge all datasets into one set.
        .flat()

        // prepare for map constructor.
        .map((value) => [value, value])
    ).values()
  ].length,
  10
);

It basically uses either the preferred 10 or, if lower, the amount of unique values.