yanrob
Posts: 5
Joined: Thu Jun 02, 2022 5:42 am

How do I get column series with data grouping to not show extra tick mark with no points

When I zoom out to days, there is always an "extra" day at the end. For example, with timestamps from 2022-05-01 12:00 AM to 2022-05-02 11:45 PM, I get a "May 3" tickmark with no column in addition to the "May 1" and "May 2" ticks. Here is the relevant config:

Code: Select all

    series: [
      {
        type: 'column',
        name: 'Volume',
        data: [],
        dataGrouping: {
          groupAll: true,
          units: [
            ['day', [1]],
            ['hour', [1]],
            ['minute', [15]]
          ]
        },
        turboThreshold: 1
      }
    ],
    xAxis: {
      dateTimeLabelFormats: {
        minute: '%l:%M %p',
        hour: '%l:%M %p',
        day: '%b %e'
      },
      ordinal: false
    },
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: How do I get column series with data grouping to not show extra tick mark with no points

Hello yanrob!
Welcome to our forum and thanks for contacting us with your question!

I was trying to reproduce your problem, but in my case, everything is working correctly. Can you reproduce your issue in the online editor, that I could have worked with? You can use my demo below.

Demo: https://jsfiddle.net/BlackLabel/wqu1df43/

I am looking for your response.
Regards!
Hubert Kozik
Highcharts Developer
yanrob
Posts: 5
Joined: Thu Jun 02, 2022 5:42 am

Re: How do I get column series with data grouping to not show extra tick mark with no points

Sorry, I should have mentioned that it was a stockchart and that I had enough data points to cause day grouping. However, the data doesn't have to go right up to before midnight. In my reproduction, the last data point is May 2, 2022 6:45:00 PM but the May 3 tick is still shown:

https://jsfiddle.net/cu3s45tv/17/
yanrob
Posts: 5
Joined: Thu Jun 02, 2022 5:42 am

Re: How do I get column series with data grouping to not show extra tick mark with no points

While searching for an answer, I came across https://stackoverflow.com/questions/576 ... highcharts which is pretty much the same issue as mine. Unfortunately, there was no satisfactory solution. I edited the OP's fiddle slightly to reproduce the problem in a even simpler example than the one above:

https://jsfiddle.net/8svcxbyn/2/

I really appreciate you looking at this and hope we can figure out a good way to solve it.

Thanks,
Rob
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: How do I get column series with data grouping to not show extra tick mark with no points

yanrob,
You can calculate which tick should be visible using e.g. a tickPositioner property with a callback function, which returns an array of ticks. Check the demo below.

Demo: https://jsfiddle.net/BlackLabel/h97zw8gy/
API Reference: https://api.highcharts.com/highstock/xA ... Positioner

Let me know if that helps you.
Regards!
Hubert Kozik
Highcharts Developer
yanrob
Posts: 5
Joined: Thu Jun 02, 2022 5:42 am

Re: How do I get column series with data grouping to not show extra tick mark with no points

Hubert,

Thanks for the suggestion. Unfortunately, tickPositioner is too controlling and doesn't have enough information. I really just want to remove the last tick if there is no data for it.

The problem is only a real problem when dataGrouping is applied. Otherwise, the xAxis is pretty reasonable. For example, it makes total sense to show May 3 if the last column is at May 2 11:45 PM. However, if all the May 2 points are grouped into the May 2 column, having space for a May 3 column that is not present is "sub-optimal".

Based on another suggestion I found, I tried using pointPlacement value of 'on'. That does a great job of removing the extra tick on the right, but it chops off the left half of the first column. Example: https://jsfiddle.net/cu3s45tv/25/

Any other ideas?

Thanks again,
Rob
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: How do I get column series with data grouping to not show extra tick mark with no points

yanrob,

To move the series a little bit to the right you can use a xAxis.minPadding property. Check the demo below to see an example.

Demo: https://jsfiddle.net/BlackLabel/9Lyceph7/
API Reference: https://api.highcharts.com/highstock/xAxis.minPadding

Feel free to ask any further questions!
Regards!
Hubert Kozik
Highcharts Developer
yanrob
Posts: 5
Joined: Thu Jun 02, 2022 5:42 am

Re: How do I get column series with data grouping to not show extra tick mark with no points

Thanks for that suggestion. It would be a great solution if I always had the same number of days and didn't have the navigator. Unfortunately, the right amount of padding depends on the number of days and if it is even grouping into days. Also, zooming the navigator removes the padding, even if you are just reducing the max value.

What I really need is the min padding you get by default along with the removal of the max padding (or whatever is causing the extra tick and space for a column). Like a pointPlacement of 0 for the min and 'on' for the max. It would be great if there was an "include extra tick" option that I could just turn off.

If there is some advanced configuration or callback that can make this work the way I want, please let me know. I appreciate your help!

Thanks,
Rob
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: How do I get column series with data grouping to not show extra tick mark with no points

yanrob,

Unfortunately, this is not possible to remove this spacing without using minPadding property. Range Selector is working properly, because it has to give opportunity to enlarge a part of the chart to show full data of the series. Although the points are grouped, it must be possible to show those that are at the very start or end. What I can suggest you use less grouping to get more points on the chart.

Regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Stock”