Column chart with target and color gradient

[ponmudi]

Is below chart possible in highchart

1. Column with high, low and target
2. Color gradient with denser on target and lighter away
3. Data table for low, high and target

Managed to get some bits, but not full functionality

https://jsfiddle.net/z9u5hgod/2/

Capture.JPG (27.76 KiB) Viewed 766 times

TIA

[kamil.m]

Hi there,

Welcome to our forum and thank you for contacting us with you question!

It seems that you got most of the functionality working, just missing the dataLabels. In that case I would suggest looking into this stackOverflow topic, which will probably solve your problem.
https://stackoverflow.com/questions/295 ... ing-column

In case of any other questions, feel free to ask anytime.
Best regards!

[ponmudi]

Thanks for reply

Still cannot figure two parts

1. Gradient based on target. looking for linear gradient up and down from target.
2. Data label on top of the target

can you help with that ?

[kamil.m]

The answer to the first question would be to define the bullet series just like you do, but without defining the gradients on each point. Instead of that, I have implemented a functionality which loops through each point in the series, calculated on which level does the target occur in a given values range and then use it as a dynamic gradient stop.

DEMO: https://jsfiddle.net/BlackLabel/tu025ach/

When it comes to dataLabel on top of the target, it required a bit of position calculation, but I think that you will be satisfied with the solution.
DEMO: https://jsfiddle.net/BlackLabel/xbvp8he7/

Best regards!

[ponmudi]

Expected there would be something out of the box for this.
But your implementation is exactly what I was looking for.

Thankyou

[kamil.m]

That's great to hear that, I'm glad that you are happy with the solution.

Do not hesitate to contact us with any further questions!

[ponmudi]

Adding highcharts.css removes all the gradient applied to the column.
Looks like fill from css file is overriding the in-element style.

Any work around for this? Css is added at application level as we have many others too.

with styles: https://jsfiddle.net/1vwaLdru/
without styles: https://jsfiddle.net/BlackLabel/xbvp8he7/

[kamil.m]

Hello, please do not duplicate posts. Creating a separate topic for this issue was a good idea, but please wait for an answer there.
viewtopic.php?f=9&t=49499

Thank you