2

I have something wrong somewhere in my code and I can not figure out where to look at. I create world map and I want to have legend bar, but appearance of color bar and ticks are in different places. It looks like this: image

My code to create world map is:

            $('#graph_container').highcharts('Map', {
            chart: {
                height: $(window).height() / graph_height,
            },
            xAxis: {
                labels: {
                    enabled: false
                }
            },
            colorAxis: {
                type: 'linear',
                minColor: colorLuminance(colorMaps[selectedModel], 0.5),
                maxColor: colorLuminance(colorMaps[selectedModel], -0.5),
            },
            title: {
                text: 'World Map'
            },
            mapNavigation: {
                enabled: true,
            },
            subtitle: {
                text: ''
            },
            tooltip: {
                formatter: function () {
                    return 'Country: ' + this.point.name + '<br>' +
                            'Value: ' + this.point.value.toExponential(2);
                }
            },
            series: [{
                data: [],
                name: 'Country',
                mapData: Highcharts.maps['custom/world'],
                joinBy: ['iso-a3', 'code'],
                nullColor: 'grey'
            }
            ]
        });

Where should I look at? Is there any css I can potentially override?

Radek Lonka
  • 107
  • 3
  • 1
    Are you able to recreate this on jsfiddle? http://jsfiddle.net/9m7413hb/ Try to define options for legend like in the jsfiddle I pasted. – morganfree Nov 02 '16 at 12:19

0 Answers0