Maud
Posts: 4
Joined: Mon Oct 04, 2021 9:27 am

Map with bars next to them

Hi,

I saw a map that has an interactive graph with bars next to them, as seen here: https://public.tableau.com/app/profile/ ... IDResponse

Is it possible to do something like that in High Charts? I want to recreate this map specifically for Asia Pacific, and I have the map already (https://api.everviz.com/share/HCxs3_Mlv) but was not able to figure out the bars.

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

Re: Map with bars next to them

Hi,
Thanks for your message.

Something similar you can achieve using legend.useHTML by modifying legend.labelFormatter() and changing style inside CSS, for the point it will be .highcharts-point.

Code: Select all

  legend: {
    align: 'left',
    useHTML: true,
    labelFormatter: function() {
      return this.name + '<p style="background-color: green; color: white; width: 150px">test test test</p>';
    }
  },

Code: Select all

.highcharts-point {
	width: 100px;
	height: 20px;
}

Demo:
https://jsfiddle.net/BlackLabel/2det4w38/

API References:
https://api.highcharts.com/highcharts/legend.useHTML
https://api.highcharts.com/highcharts/l ... lFormatter


Let me know if you will have more questions.
Best regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Maps”