Kodeblox
Posts: 29
Joined: Sun Feb 04, 2018 7:26 am

Formatting y-axis labels of an x-range based timeline

Hello

I am making a timeline out of x-range such that each category has multiple timelines. I have been able to create the timeline I wanted but there are a few issues I am facing.

Firstly, I want the category labels to be centered in each category. I have tried setting the

Code: Select all

labels.y
property but it shifts the whole set of categories and I cannot control each on individually.

I also want to have some gap between the ticks and the ranges without modifying the width of the bars.

There is also a small niggle. When I am logging the value of

Code: Select all

this.value
inside

Code: Select all

label.formatter
, the second value is NaN.

I am attaching the fiddle where you can find the issues I am facing. https://jsfiddle.net/8ou3yp1L/6/

Any help is appreciated!
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Formatting y-axis labels of an x-range based timeline

Hi, Kodeblox!

When it comes to positioning every separated label, maybe it is not the best way to do this, but... you can manually set its distance from top:

Code: Select all

"chart": {
    "type": "xrange",
    events: {
    	load() {
      	let labelGroup = document.querySelectorAll('.highcharts-yaxis-labels');
        // nodeValue is distance from top
        labelGroup[0].childNodes[0].attributes.y.nodeValue = '50'
        labelGroup[0].childNodes[1].attributes.y.nodeValue = '70'
        labelGroup[0].childNodes[2].attributes.y.nodeValue = '90'
        labelGroup[0].childNodes[3].attributes.y.nodeValue = '170'
        labelGroup[0].childNodes[4].attributes.y.nodeValue = '360'
      }
    }
  },
When it comes to gaps, your ticks are actually gridLines so you can't separate ticks from plot area. The easiest way would be... again not the best idea but... to cover protruding ends and rendering new ticks using Highcharts SVG Renderer rects. Maybe there is a better solution, but settings of your chart, points and ticks are complicated and in my opinion, rendering new rects should be faster. Of course if I understood you well.

Referring to you last issue - in my console there is no any NaNs and logging as expected:
chart.png
chart.png (68.55 KiB) Viewed 938 times
jsFiddle: https://jsfiddle.net/j0nm1kb2/

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
Kodeblox
Posts: 29
Joined: Sun Feb 04, 2018 7:26 am

Re: Formatting y-axis labels of an x-range based timeline

Hi

Thanks a lot for the pointers.

I have been been able to position the labels correctly but I am calculating the position based on the tick positions. So, I don't need to worry about getting the absolute positions right :D . The whole setup looks like a hack, but it works an I can't complain :mrgreen:

As for the space between the ticks, I have found that increasing the height of the div works like a charm.

But, there is 1 or 2 nitpicks. As you will see in the images, there is a 1 px margin that I am unable to remove no matter what I do. I am setting the point width to a constant of 20px, but there is still the 1 px margin. Also there is a pattern to this margin. It's of the form, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1. It's not absolutely necessary to handle this but I wonder what is causing this :?
Untitled.png
Untitled.png (56.07 KiB) Viewed 931 times
As for the NaN thing, you can see in the output you posted, that the console log is of the form, -1, D, 5, 8, 9, 11. Here "D" is the NaN that I am referring to.

The updated fiddle https://jsfiddle.net/yvnp4su0/1/
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Formatting y-axis labels of an x-range based timeline

Kodeblox,

Again, I am not sure if this is what you've been looking for, but you want to remove these 1px black gaps? If yes, it's enough to set borderColor to null: https://jsfiddle.net/BlackLabel/h8o1e9fc/
The other approach - you don't have to set pointWidth: 20 rigidly. You can set pointPadding and groupPadding to 0: https://jsfiddle.net/BlackLabel/1r745m60/


Referring to NaN, notice, that you defined an array tickPositions = [-1, 3, 5, 8, 9, 11] and array categories = ["A", "B", "C", "D", "E"]

When you're trying to log this.value (category value) there is no category for index -1 so -1 is logged, then for index 3 is defined category and it's "D", then for index 5 there is no category so again 5 is logged etc.
In short: category array index are [0, 1, 2, 3, 4] and tickPositions index are [-1, 3, 5, 8, 9, 11]. The only common number is 3 so category with index 3 is logged and it's "D".

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
Kodeblox
Posts: 29
Joined: Sun Feb 04, 2018 7:26 am

Re: Formatting y-axis labels of an x-range based timeline

Hi

Regarding the NaN. You are absolutely correct. I edited the tick position and got "C" as expected. But I am failing to understand that under labels.formatter what does this.value exactly contain. Because what relation does tickPositions have with this.axis.categories. If I consider that this.value is actually categories[tickpositions[index]] only then it makes sense.

Wait...is that what it is? :?
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Formatting y-axis labels of an x-range based timeline

Exactly ;) with a categorized axis this.value is a label's text. When we define these labels in category array: yAxis.categories: [...] this.value is actually an element of categories array exactly as you said.
Rafal Sebestjanski,
Highcharts Team Lead
Kodeblox
Posts: 29
Joined: Sun Feb 04, 2018 7:26 am

Re: Formatting y-axis labels of an x-range based timeline

Great!

Thanks for taking the time to help me out and explain the features. I appreciate it a lot.

Thanks and Regards
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Formatting y-axis labels of an x-range based timeline

You're welcome ;) have a good day!
Rafal Sebestjanski,
Highcharts Team Lead

Return to “Highcharts Usage”