Page 1 of 1

Unable to remove numerical labels on y-axis for X-range Series chart

Posted: Mon Nov 29, 2021 7:59 pm
by manthar
Hello,

I’m currently having an issue displaying state data using the Highcharts X-range series charts. Specifically, My problem is that our data that we are using to represent each individual state are both fairly high and non consecutive (768, 769 and 773). To label these individual states I’m using a sparse array and placing my labels at the corresponding indices.

The problem I am trying to solve (which is depicted by this jsfiddle: https://jsfiddle.net/sn4d2hvq/10/) is that I want to exclude all values (which in this case means all numerical values) on the y-axis such that there are no numbers from zero up until the first index as well as no numbers in between any of the labels (ie. 770, 771,772). Here’s an example of the desired view: https://jsfiddle.net/estgbr6j/2/

The only way I’ve been able to consistently achieve the desired result (as depicted by the second example) has been to map the values from [768, 769, 773] => [0, 1, 2] and use a dense array to label the newly mapped values. It seems that this workaround shouldn’t be necessary but I have yet to find an option in the highcharts API to easily allow for our desired result without mapping the values. It should also be noted that in our actual data set, we are usually displaying multiple series with each series depicted by its own color rather than each category (which I have been able to achieve). Please let me know which API option or options are available to display our desired result. Thank you so much.

highcharts: 9.0.1
highcharts-angular: 2.10.0
angular: 12.0.5
node: 14.18.0

Re: Unable to remove numerical labels on y-axis for X-range Series chart

Posted: Tue Nov 30, 2021 10:07 am
by mateusz.b
Hello manthar,

Thanks for contacting us with your question.

I can see two options here. First one is to use tickPositioner and labels.formatter callbacks to calculate which ticks should be shown and then replace their values with mapped names. And it would actually have worked but there comes issue with irregular spaces between categories. You can't really do anything about it because that is how linear axis works.
Demo: https://jsfiddle.net/BlackLabel/r7ukbsfn/

Second option, which I believe is much better would be to use columnrange series with category type axis.
Demo : https://jsfiddle.net/BlackLabel/tszqdaL1/

Let me know if you have any further questions!
Regards!

Re: Unable to remove numerical labels on y-axis for X-range Series chart

Posted: Tue Nov 30, 2021 5:36 pm
by manthar
Thank you so much for the quick (and very helpful) response!

The columnrange series looks like a great option. does this need a separate import similar to the xrange series?

Re: Unable to remove numerical labels on y-axis for X-range Series chart

Posted: Tue Nov 30, 2021 6:56 pm
by mateusz.b
manthar,

For column range series you need to import highcharts-more module and initialize it.

Code: Select all

import * as Highcharts from 'highcharts';
import HighchartsMore from 'highcharts/highcharts-more';

HighchartsMore(Highcharts);
Demo: https://stackblitz.com/edit/highcharts- ... mponent.ts

Let me know if you have any further questions!
Regards!

Re: Unable to remove numerical labels on y-axis for X-range Series chart

Posted: Wed Dec 01, 2021 10:18 pm
by manthar
mateusz.b,

I do have one more question that perhaps you have a quick answer to. in the demo above:

https://stackblitz.com/edit/highcharts- ... mponent.ts

the tooltip is showing the date/time ranges for the series as the JavaScript timestamp. I'd like to show the actual date/time ranges in the tooltip. additionally I'd like to remove the space on either side on either side of the data so that the time range (and chart view) begin and end precisely where the data begin and end. is there a quick way to achieve both of those things? thanks again for your help.

Re: Unable to remove numerical labels on y-axis for X-range Series chart

Posted: Thu Dec 02, 2021 8:58 am
by mateusz.b
Hi manthar,

To convert these timestamps in tooltips you should use pointFormatter callback function along with dateFormat method.
API reference: https://api.highcharts.com/highcharts/s ... tFormatter
https://api.highcharts.com/class-refere ... dateFormat

When it comes to that extra space on edges of the chart, you could remove it by setting min and max values on Y axis. However, if you want to do it dynamically then you need to use setExtremes method based on your min and max data.
API reference: https://api.highcharts.com/highcharts/yAxis.min,
https://api.highcharts.com/class-refere ... etExtremes
Demo: https://stackblitz.com/edit/highcharts- ... mponent.ts

Let me know if that was what you were looking for!
Regards!