devabhishekpal
Posts: 2
Joined: Tue Aug 03, 2021 12:06 pm

Bullet chart with custom target marker

I want to create a bullet chart. However I have a requirement that instead of the default target marker I want to be able to add an svg icon above the marker with some text.

I have attached a reference image. I tried SVGRenderer but to no avail. I am working with the Highchart-React version, however any bit of help would be really great. A code reference would be even better.

Image

The target here isn't fixed, i.e. I would set the target in the series: {data[{.....}]} and from there it would show that type of target instead of the default rectangle. I have seen most SVGRenderers using direct values to set the positon, but i want it to go from the configuration.

A code reference would be really really great.
Thanks world.
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Bullet chart with custom target marker

Hello devabhishekpal!

Welcome to our forum and thanks for contacting us with your question!

Firstly please do not duplicate the same topic on multiple support channels (https://stackoverflow.com/questions/686 ... -using-svg).

Basically, we can style most of the chart to look like yours from the image. But to create the line with the text we need to use SVG Renderer. The basic version of the chart: https://jsfiddle.net/BlackLabel/c75jg6wr/

Plus docs of SVG Renderer: https://api.highcharts.com/class-refere ... derer#rect

You can use redraw function and there update its attributes like that: https://jsfiddle.net/xdc5akj3/2/

You can also try to use our bullet module for charts. Link: https://www.highcharts.com/docs/chart-a ... llet-chart

Best regards!
Dominik Chudy
Highcharts Developer
devabhishekpal
Posts: 2
Joined: Tue Aug 03, 2021 12:06 pm

Re: Bullet chart with custom target marker

dominik.c wrote: Wed Aug 04, 2021 8:08 am Hello devabhishekpal!

Welcome to our forum and thanks for contacting us with your question!

Firstly please do not duplicate the same topic on multiple support channels (https://stackoverflow.com/questions/686 ... -using-svg).

Basically, we can style most of the chart to look like yours from the image. But to create the line with the text we need to use SVG Renderer. The basic version of the chart: https://jsfiddle.net/BlackLabel/c75jg6wr/

Plus docs of SVG Renderer: https://api.highcharts.com/class-refere ... derer#rect

You can use redraw function and there update its attributes like that: https://jsfiddle.net/xdc5akj3/2/

You can also try to use our bullet module for charts. Link: https://www.highcharts.com/docs/chart-a ... llet-chart

Best regards!


I have achieved the basic version of the chart using bullet chart module itself. However i am stuck on trying to bring the marker and label on top of the bullet.
A code example of how to do it in basic bullet chart too would be helpful. Any random shape would do, I would later adapt it accordingly.

And thanks a lot for your time. I really appreciate your efforts. <3
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Bullet chart with custom target marker

Hi again!

All right, so I've prepared a demo. This is what I suggested: https://jsfiddle.net/BlackLabel/5nr3pyxa/

Tell me what you think about it. :)

Best regards!
Dominik Chudy
Highcharts Developer
luigicut
Posts: 2
Joined: Thu Oct 06, 2022 8:30 am

Re: Bullet chart with custom target marker

Hello,
I'm struggling with the same problem, change the target to have something that goes "outside" of the plotbands, but that exactly replace the target itself.
I'm using the https://www.highcharts.com/docs/chart-a ... llet-chart module.
The jsfiddle provided is not helping me, because is based on a bar chart and anyway draw a static svg, and is not replacing the target.
Is there a way to do it? Can somebody provide a code example?
Thanks a lot for your help,
Kind regards
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Bullet chart with custom target marker

Hello,

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

I'm sorry but I'm not exactly sure what would you like to achieve. Could you tell me a bit more, what is wrong with the fiddle posted by Dominik, and maybe attach your demo with a screenshot to guide me in a right direction?

Waiting for your reply,
Best regards!
Kamil Musiałowski
Highcharts Developer
luigicut
Posts: 2
Joined: Thu Oct 06, 2022 8:30 am

Re: Bullet chart with custom target marker

Hi Kamil,
thanks a lot for your answer!

Maybe we can start from this JSfiddle I have found on an highcharts github issue (https://github.com/highcharts/highcharts/issues/8883):
https://jsfiddle.net/BlackLabel/ny0btsv2/8/

For my use case I started from this one, what I need is a way to completely replace the current target rectangle:
Image
with a different svg g container to obtain something like this:
Image

I would like to keep same target behavior, so that it changes position if the series values change.
Thanks again
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Bullet chart with custom target marker

Thank you for your explanation.

In that case, I would suggest looking at this forum topic: viewtopic.php?t=35106
More specifically, at this example: http://jsfiddle.net/highcharts/e96yX/

In lines 2-4 there is a custom method applied to the Renderer prototype, which will allow you to create lines that exceed the current width/height of your series.

To render an arrow on top of it, you can use the SVG Renderer, just like Dominik mentioned it in the previous posts.

Also, as a side note, I would suggest simplifying your demo, and removing unused properties to improve code performance and readability.

In case of any problems while implementing that, let me know in this topic,
Best regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Usage”