Question: how to limit the number of lines on an axis?

[pahmed]

Hi,

I would like to know if there is an option to show only specific number of lines on an axis. e.g. if I have the values [1, 2, 3, 4, 5, 6, 7, 8] for x, I want to show guides at [2, 4, 6] only, something like the attached screen.

[marzolfb]

Have you looked at the StockLineChartStaticTickLabels chart in the example app? I believe that is what you are trying to achieve above.

[pahmed]

Yeah, I have tried this example, but the example shows how to set custom labels but does not show how to show only some lines e.g. out of 100 point show only 4

[marzolfb]

The number of tickValues specified in options drives the number of gridlines shown. For example, if I take the StockLineChartStaticTickLabels example and I remove the last 4 tickValues, I will see a chart with all the data points represented but only the first 3 tickValues show on the x-axis.

However, based on your screenshot and example above, I don't think thats what you are looking for - there's no way to use static tickLabel values and have them distributed evenly across the axis like you want.

Another option that I think achieves what you want is to use the undocumented tickCount attribute for the options property. For example if I take the StockLineChartDynamicTickLabels example chart and instead of wanting to display 7 tick labels/gridlines and want to only show 4 instead, I can do this:

let options = {
    axisX: {
    ...
        tickCount: 4,
...

The tickCount attribute has no effect when combined with static labels but it does take effect when using dynamic labels. So, you should be able to combine those techniques (dynamic labels and adding the tickCount option) as necessary to achieve what you want.

[marzolfb]

@pahmed Did the above suggestions above help? I'm closing this issue since I haven't heard any more about it for awhile but if you think there's a specific enhancement you think will handle this issue better, feel free to reopen and provide that feedback.

[pahmed]

Yeah it worked, but I noticed that when I set the tickCount to 4, it draws only three, when 5 it shows 5 (as expected), and when 6 it shows only 5

[marzolfb]

After looking at this more, it seems the original author's intent for the tickCount option setting was meant more to be a "target # of ticks" and so the behavior you describe above means that things are working as designed.

However, this really doesn't solve your original problem.

Ultimately, I think you want to be able to use the concept of "dynamic labels" via the labelFunction option to solve this using something like this:

labelFunction: ((v) => { return (v % 2 === 0) ? v.toString() : null }),

However, this produces an error like this:

null is not an object (evaluating 'children.length')

So, I'm working on addressing this bug in a new PR soon.