Appropriate Chart Implementation

[SunilReddy87]

Hi, We have the following custom UX design to be implemented. Need help on the appropriate chart type that can be used to accomplish the following.

[attachment=0]sample.png[/attachment]

Details of the design:

Additional Details:

1. The column consists of four bar charts (max).
2. The bar charts are not to start from 0.
3. The bar chart has three parts for eg: 20% to 30% , 30% to 60% and 60 to 90%.
4. The median needs in be plotted in each of the bar chart.

[jakub.s]

Hi,

Welcome to our forum & thanks for the question.

For the design you've attached, it's best to use the columnrange series. You can achieve something very similar with this type of chart and a few custom Highcharts.SVGElements rendered with the Highcharts.SVGRenderer (like the median line).

Here's a demo that should help you get started: https://jsfiddle.net/BlackLabel/362vcxrm/

API links that you might find useful:
- https://api.highcharts.com/highcharts/s ... olumnrange
- https://api.highcharts.com/class-refere ... VGRenderer

Let me know if you encounter any problems, I'll be happy to help!

Best regards,
Jakub

[SunilReddy87]

Hi,
Thanks for the reply.

We are using angular 12 for our development.
Have used highcharts-more from highcharts for the columnrange chart.
1. However we are not able to get points for the series.
2. We also need a grey background column which depicts another metric in the chart. Ideally the column ranges are plotted inside a column.

columnrange.png (9.05 KiB) Viewed 1131 times

greycolumn.png (14.6 KiB) Viewed 1131 times

Can you please help us on this.

series-points-not-working.png (57.03 KiB) Viewed 1131 times

[jakub.s]

Hi,

1. You can draw this gray rectangle with SVGRenderer the same way you draw the higher opacity area.

Here's a demo: https://jsfiddle.net/BlackLabel/sjfmbao0/
In this demo, this rectangle is just wrapping all those columnrange points, but in your example it can be based on your metric. You just need to modify the parameters of the chart.renderer.rect.

2. What exactly do you mean by "series points not working"? The method is working in the demos I've sent you so maybe you have a TypeScript issue. I'll take a look at your code if you send me a demo of this in CodePen or any other online code editor.

Regards,
Jakub

[SunilReddy87]

Hi,

I was able to figure out the issue. Accessing the event[target] in the load function solved the problem.

However we have the following data set that need to be shown in the chart,

sample_data.png (15.52 KiB) Viewed 1118 times

. We will have to plot the ranges and the grey metric (chart.rect) should have a range from 0 to 63.2 as in the data.
Can you please let us know of how you could plot it based on the data set.

Can you also let us know how to render this chart with the custom tooltips and based on the data points.

sample2.png (11.76 KiB) Viewed 1116 times

[jakub.s]

Hi,

Here's a demo for the gray rectangle in range 0-63.2: https://jsfiddle.net/BlackLabel/ejrd7nat/

You can create a custom tooltip with tooltip.formatter with the useHTML option turned on. You can read more about this in the API: https://api.highcharts.com/highcharts/tooltip.formatter

Here's a demo of a custom tooltip: https://jsfiddle.net/gh/get/library/pur ... terformat/

Let me know if you encounter any problems while implementing this.

Regards,
Jakub

[SunilReddy87]

Hi Thanks for the reply,

Can you help plot the column range for the entire data set (including the 25th, Median and the 75th column data).

sample_data.png (15.52 KiB) Viewed 1076 times

And We need to also show the legend as below.

legend.png (24.83 KiB) Viewed 1076 times

[jakub.s]

Hi,

I've created a demo showing how you can draw median lines based on your array of values: https://jsfiddle.net/BlackLabel/xnabqg1e/

You can do the exact same thing gray rectangles & the higher opacity rectangles.

The Axis.toPixels() method allows you to get the pixel position of a point which you know value of. For example:
If you have a point = (0, 42.5%) then you can get the pixel position of the y coordinate with yAxis.toPixels(42.5) + chart.plotTop

API: https://api.highcharts.com/class-refere ... s#toPixels

Best regards,
Jakub

[jakub.s]

Also, your legend is a custom one - it cannot easily be created by adjusting chart.legend API options.

If you want to have this kind of legend, you would need to create it using chart.renderer. The way to create it will differ depending on if you want this legend to be interactive, clickable, and add some user interactions or if you want it to be a simple visual guidance for the user.

If the latter, here's a demo showing how you can create it: https://jsfiddle.net/BlackLabel/apnkmxvh/

Best regards,
Jakub

[SunilReddy87]

Hi,

Thanks for your reply.

1.Suppose I have the interval say 22.10 and 66.6 and I have to plot this with the high opacity(darker shade) inside the range (18.4 - 75.4). Could you please specify how I could do it with the point shapeArgs.

plotting_bar_inside.png (5.79 KiB) Viewed 1061 times

2. The custom legend is taking up the highcharts height. I would need to place the custom legend at the top of the highchart and shouldn't overlay on the chart.

legend_at_top.png (9.96 KiB) Viewed 1061 times

3. Have used the Highcharts.AST.allowedAttributes.push('onclick'); for the click event in the tooltip. However I am getting the following error.

Uncaught ReferenceError: showMoreDetails is not defined
at HTMLButtonElement.onclick

[jakub.s]

Hi,

1. I can't see how the higher opacity area is in the range (18.4 - 75.4) on the image you've attached.
Here's a demo of how to draw a median line and the higher opacity area based on the your variables for one column range: https://jsfiddle.net/BlackLabel/36ovq5j1/
The only thing you need to change is the median and higherOpacityRange. Everything else is taken care of.

2. You can achieve this by increasing the z-index of the legend items. I've included it in the demo above.
You can read more about the zIndex here: https://developer.mozilla.org/en-US/doc ... SS/z-index

3. I cannot tell what's wrong without seeing the code. Please reproduce this issue in an online code editor and send me a link. I'll take a look & try to fix it.

Best regards,
Jakub

[SunilReddy87]

Hi,

Thanks for your reply.

The first issue is resolved.
2.Regarding the second, Giving the z-index places the content inside the chart width specified. Wanted to check if we can position above the chart at the top and not somewhere in the axis lines.

3. Here is the link http://jsfiddle.net/BlackLabel/7svLa16d/ This is throwing error on click functionality when I implement locally.

4. Can we have a highchart component as a reusable one by just providing the series data as @input params in the ts file. The series update is working but the event load function isn't happening

[jakub.s]

Hi,

2. You can position the legend above the chart by increasing the chart.spacingTop to a higher number and changing the Y coordinates of the rendered items.

Here's a demo: https://jsfiddle.net/BlackLabel/ahn9w51q/

3. The demo you've sent is working correctly. That means that the problem is not with Highcharts, but something else in your project. I can't say why you get this error, because in the demo there is none. Probably, you have a problem with the definition of the showMoreDetails function.

4. Which Highcharts wrapper are you using?

Regards,
Jakub

[SunilReddy87]

Hi,

Thanks for the reply. Points 1 and 3 are addressed. I have created a angular wrapper and only passed the highcharts data as input parameters.

Can we pass the series data in the tooltip formatter function.

series_data_tooltip.png (25.94 KiB) Viewed 1014 times

Currently we have the tooltip as below.

tooltip_one_line.png (11.97 KiB) Viewed 1014 times

[jakub.s]

Of course!

In tooltip.formatter you have access to the point you hovered over with this keyword. Therefore, you can use all the properties defined on point and not only that, you have access to the entire chart with point.series.chart.

You do not need to pass anything to the tooltip.formatter. You have access to the entire chart there.

Here's a demo: https://jsfiddle.net/BlackLabel/n2mbpsLx/

API:
- https://api.highcharts.com/highcharts/tooltip.formatter

Let me know if that helps.

Regards,
Jakub