X axis within a X axis category

[lpcarignan]

Hi,

I'm trying to create a scatter chart as shown in the attached image (chart.png).

It has 2 X-axis:

• One a the bottom to show columns on a board
• One at the top to show the work in progress in each column

It has 2 Y-axis:

• One on the left to show the age of each data point
• One on the right to show the percentile lies

I've figured how to display 3 of the 4 axis

The bottom X-axis will use categories:

Code: Select all

xAxis: {
            categories: ['Analysis Active', 'Analysis Done', 'Dev Active', 'Dev Done', 'Testing']
        },

The top X-axis will set the opposite attribute to true. I haven't figured it out yet but I'm guessing I can just use the categories attribute to set the labels for the top X-axis. Would that be a fair statement?

Both Y-axis were easy to display also.

My problem is with the dots within each category. As I may have up to 100 dots in each category, I would like to spread them within their category. I just don't know how to do it.

Should I add a third X-axis and use it to display my dots? I'm uncomfortable with this strategy as it might not be linked to the categories and hence, might fell in another category when the chart is resized.

I've looked for a way to do an X-axis per category but couldn't find any code or post to help me with this option.

To help readers understand my data point, each point will have the following data: [<name of its column>, <number of days>]. For example, using the chart image included in this post, we have a dot at ['Analysis Done', 3].

Any insights on how to spread points within a category defined on the X-axis?

[magdalena]

Hi,

Thanks for contacting us with your question!

If you want to provide data in this way: [name, y], your dots will not be "diffused".
Demo:
https://jsfiddle.net/BlackLabel/nqgc9dbh/

If you want to achieve the diffused effect, every point needs to get an x value.
Demo:
https://jsfiddle.net/BlackLabel/orst0azh/

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

[lpcarignan]

Thank you so much for your answer. I think I'll go with the diffused effect by assigning a specific X value for each data point.

[magdalena]

You're welcome! Feel free to ask any further questions!

[lpcarignan]

I've got one other question in regards to my initial post.

How would it be possible to color code the interior of each column? I've attached an image that is basically the same image as posted in this post but with the colors, I'd like to show in each column.

The colored bar would match the age so for example in the image

• Green bar goes up to age of 5 days
• Yellow bar goes up to age of 10 days
• Orange bar goes up to age of 13 days
• Red bar fills the rest

Also, the bars would go behind the points and percentiles lines (colored horizontal lines). Show the dataset for the bars have a z-index lower than the other datasets?

[magdalena]

Hi,

Here is my proposition on how to create a column as you need:

Demo:
https://jsfiddle.net/BlackLabel/394Lxf8o/

If you don't want to add new series, you can draw the "column" using Highcharts. SVGRenderer or Annotations:

API Reference:
https://api.highcharts.com/class-refere ... derer#rect

Article
https://www.highcharts.com/blog/tutoria ... ns-part-1/

As you mention, you need to use zIndex to be able to set the column behind the plotLine.

Feel free to ask any further questions!

[lpcarignan]

I love your proposition in the example you gave me (https://jsfiddle.net/BlackLabel/394Lxf8o/).

As the values in the colored bars would not move, I can hardcode them in the series as you did.

Here's a more difficult one. When I move my mouse cursor on a dot, I want to show the days the dot spent in each column. I've attached an image of what I'd like to achieve.

I'm guessing I have to listen to the mouseover event but can I update data when I'm on a mouseover event? I've searched the forums and couldn't find a post relevant to what I'm trying to achieve.

[lpcarignan]

I've found the columnrange serie to display bars for each column that do not start from the bottom of the chart. I've seen a few examples on Highchart (http://jsfiddle.net/hbmkms7j/ and https://jsfiddle.net/gh/get/library/pur ... olumnrange)

But when I try it with the example given above (https://jsfiddle.net/BlackLabel/394Lxf8o/), I get a script error. The only thing I added was another series of type 'columnrange' like this:


series: [{
enableMouseTracking: true,
type: 'scatter',
data: [
[1, 3],
[1.1, 4],
[2, 2],
[2, 13],
[3, 9],
[3.1, 15],
[3.3, 16],
[4, 10],
],
},
{
name: "Test",
type: "columnrange",
color: 'yellow',
data: [
[2,5],
[4, 9]
]
}

I'm pretty sure my problem is right in front of me but I can't see it. Should the chart be of type 'columnrange' and use a specific series for the scatter plots? Is there a property I forgot to set in the 'columnRange' series?

[magdalena]

Hi,

You got an error because you missed a higcharts-more module. Now it works fine:
https://jsfiddle.net/BlackLabel/z78scogw/

The type is related to the series, and you can use as many series as you want.

My suggestion is to modify your scatter series data structure to the array of objects, and add a specific key "days" - you will use it to show your column range.

API:
https://api.highcharts.com/highcharts/s ... atter.data

After the mouseOver event, you will use setData or updateData, to show columns.

API:
https://api.highcharts.com/class-refere ... es#setData

Regards!

[lpcarignan]

Thank you so much for all of your help. Everything is now working fine in the chart.

[magdalena]

I'm glad I could help! ​If you have further inquiries, you may reach out to me at any time.

Regards!