AlfonsoLVG
Posts: 3
Joined: Wed May 05, 2021 12:36 am

Draw polygon with color from JSON

Hi

I just recently started to work with highcharts maps, and after seeing the demos and struggling with the values from the json I want to know if there's a way to obtain the color value from the JSON file and use it to draw.

In this example https://highcharts.com/samples/maps/dem ... es?codepen it's used for the data labels this: "format: '{point.name}'" which I assume gets the name assigned to the name identificator in the JSON, is there a way to do this for the color?

The examples I've seen that use different colors do this by modifying the JS part, and that's something I don't completely understand so I rather get it from the JSON, if that's possible.

Can this be done? Is there documentation for this that I cannot find?
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Draw polygon with color from JSON

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

Do you want to color points (states)?
If I understand you correctly you want to use color, from properties inside object geojson.

I don't see the problem to put color from value. I didn't find a difference in your example with the public demo, what did you want to show me?

Demo:
https://jsfiddle.net/BlackLabel/qj7n4d2x/

I'm waiting for news from you.
Best regards.
Sebastian Hajdus
Highcharts Developer
AlfonsoLVG
Posts: 3
Joined: Wed May 05, 2021 12:36 am

Re: Draw polygon with color from JSON

Thank you for responding

I want to color points (states) with the color value that I assign in the JSON, but how can I obtain that value in the JS part, or where can I use it to draw?

The demo has, from what I understand, static values for colors, by that I mean that they're assigned manually.

The map I want to draw will have different colors for each state depending on some values I obtain from a database
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Draw polygon with color from JSON

Hi,
Thanks for the explanation.

If you want to set a different color for each state, one way would be to change the color of the state with respect to the state code as on (line 50).
You can get the color data from JSON but you will have to prepare it as in (line 7).

Another option is to prepare the data and operate on the built object as in the following part of the code.

Code: Select all

    data: [{
        value: 6,
        name: "Point2",
        color: "#00FF00"
    }, {
        value: 6,
        name: "Point1",
        color: "#FF00FF"
    }]

https://api.highcharts.com/highmaps/series.map.data

Let me know how are you going with this.
Best regards.
Sebastian Hajdus
Highcharts Developer
AlfonsoLVG
Posts: 3
Joined: Wed May 05, 2021 12:36 am

Re: Draw polygon with color from JSON

Thanks for your help, now I can draw the way I wanted.

Looking back it seems kinda obvious how to do it.

Thank you !
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Draw polygon with color from JSON

Hi,
You're welcome!

In case of any further questions, feel free to contact us again.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Maps”