Skip to content
← Highcharts Javascript API

I suggest you ...

Highcharts Javascript API

Categories

JUMP TO ANOTHER FORUM

(thinking…)

minTickAmount on Axis

In trying to create graphs with Highcharts, I've found that once a graph gets sized small enough (though still reasonably sized that its not uncommon), the axis usually only gives out 1 single tick mark value.

I want to avoid single tick marks, because with only 1 tick mark, a person viewing the graph loses the sense of scale that comes with multiple tick marks which specifies a physical distance on the graph as a range of numbers.

Id like to see a minTickAmount option added to the Axis, such that specifying it prevents Highcharts from trying to give an axis fewer ticks than this option allows. The need for this option instead of using tickInterval/tickPositioner/tickPositions stems from the desire to still let Highcharts fully decide what ticks to place so they're completely dynamic, just setting a limit to how few ticks it can choose.

3 votes
Vote

We're glad you're here

Please sign in to leave feedback
Signed in as (Sign out)
Close
Close
You have left! (?) (thinking…)
branlove17 shared this idea  ·   ·  Report…  ·  Admin →
How important is this to you?

We're glad you're here

Please sign in to leave feedback
Signed in as (Sign out)
Close
Close

We're glad you're here

Please sign in to leave feedback
Signed in as (Sign out)
Close
Close
Submitting...
An error occurred while saving the comment
  • AdminPaweł Fus (Admin, Highcharts JS) commented  ·   ·  Report

    Thank you for the demo!

    By default, the last label in Stock is disabled. You can change this behaviour, set `yAxis.showLastLabel` option to true: https://api.highcharts.com/highstock/yAxis.showLastLabel

    Demo: http://jsfiddle.net/BlackLabel/eLzx1t7j/

    The first yAxis does not show the upper label. This is caused by the vertical scrollbar, that is clipping the label. I'm now sure how would you like to resolve it but you can for example change `top` for the first yAxis (to give extra space for this label), or find in DOM that label and translate it to the bottom.

    For the second solution, check this demo: http://jsfiddle.net/BlackLabel/eLzx1t7j/1/ (added lines: 74-88)

    PS: My apologies for the late reply, did not receive a notification about your answer

  • branlove17 commented  ·   ·  Report

    Here is an example where I'd think there is enough space to reasonably have a second tick, yet only get 1. There is a decent amount of customization on this example to get it to happen, but in short, I'm limiting each series of a time series plot to its own pane , and then to a small height and then allow the panes to be scrolled through, but at some smaller pane heights, highcharts is giving only 1 tick per pane on all of the yaxis bars but it seems to be plenty of space to display the upper tick label too.
    http://jsfiddle.net/bloved/b8qo7ux6/5/

    The responsive option is one I havent tried yet though, so I can try looking into that for now, thanks!

  • AdminPaweł Fus (Admin, Highcharts JS) commented  ·   ·  Report

    Thank you for sharing the idea!

    Could you attach an example of the chart that is small enough and renders only one tick? I tried this: https://jsfiddle.net/BlackLabel/bkuxeqz0/ - 90x90 px chart. I'm not sure if this makes sense to show labels for a such small chart. Labels in this case can take quite a lot of space.

    At this moment, if you don't want to use `tickInterval/Positioner/Positions`, then `responsive` option with predefined `tickAmount` should solve the issue. Take a look: https://jsfiddle.net/BlackLabel/bkuxeqz0/1/