2

I have the following settings in my Highcharts map, and when I mouse over a country, it doesn't use the color, and I am not sure why. All that happens is that it changes to a light blue color.

Highcharts.mapChart('geo-graph', {
    series: [{
        states: {
            hover: {
                color: '#f47d25'
            }
        }
    }]
});

Here is the full javascript (it uses blade, so the {!! $geo !!} stuff gets replaced with json):

let data = JSON.parse('{!! $geo !!}');
Highcharts.mapChart('geo-graph', {
    title: {
        text: null
    },
    mapNavigation: {
        enabled: true
    },
    colorAxis: {
        min: 1,
        type: 'logarithmic'
    },
    legend: {
        layout: 'vertical',
        align: 'left',
        verticalAlign: 'bottom'
    },
    series: [{
        data: data,
        mapData: Highcharts.maps['custom/world'],
        joinBy: ['iso-a2', 'code'],
        name: 'Country',
        allowPointSelect: true,
        states: {
            hover: {
                color: '#f47d25'
            }
        }
    }]
});

Here is some example data:

[{
    code:"US",
    name:"United States", 
    value:1100
}]

When I do this on jsfiddle it works, but when I build it with gulp elixir it doesn't work could this be the problem?

gulp.task('default', function () {
    elixir.config.sourcemaps = false;
    elixir.config.production = true;
    elixir(function (mix) {
        mix.styles([
            './node_modules/highcharts/css/highcharts.css'
        ], 'public/css/highcharts.css');
        mix.scripts([
            './node_modules/highcharts/js/highcharts.js',
            './node_modules/highcharts/js/modules/exporting.js',
            './node_modules/highcharts/js/modules/map.js',
            './node_modules/highcharts/js/modules/data.js'
        ], 'public/js/highcharts.js');
    });
});
Get Off My Lawn
  • 34,175
  • 38
  • 176
  • 338
  • Can you make a jsfiddle of your issue (with some more data) please? – Scott Feb 20 '17 at 20:52
  • Here is an [example](http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/demo/all-maps/) from Highmaps demo. It looks like you have the correct syntax for defining a state (line 149 on the demo code). – Scott Feb 20 '17 at 20:56
  • When I create on on jsfiddle it works, but on my site it doesn't. I am using gulp to build a file, could this be the problem? – Get Off My Lawn Feb 20 '17 at 21:11
  • @GetOffMyLawn what is the jquery version you are loading? (as well as highcharts). Recently some of the charts were broken when they had to deal with animation. So, its worth checking the version numbers. – Vladimir M Feb 20 '17 at 21:15
  • I am using npm to manage them: `"version": "5.0.6"` – Get Off My Lawn Feb 20 '17 at 21:18
  • In jsfiddle they already use 5.0.7 and jquery 3.1.1. Try to get those versions and see if your code will work better. – Vladimir M Feb 20 '17 at 21:22
  • I added a link to the fiddle, when I copy the `script` tags and place them in my app, it still doesn't highlight but it works in jsfiddle... – Get Off My Lawn Feb 20 '17 at 21:27
  • Okay, I figured it out... It was the stylesheet that seemed to be overwriting it. – Get Off My Lawn Feb 20 '17 at 21:39
  • @getoffmylawn exactly which property in the CSS? I am facing the same issue but dont know which property is overwriting – Anupam Apr 29 '17 at 06:44

1 Answers1

1

Adding this CSS worked for me.

path:hover {
  fill: rgba(249, 209, 12, 0.87);
}
Rishabh Jain
  • 43
  • 7