Highcharts map doesn't change color on hover

Question

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');
    });
});

Answer 1

Adding this CSS worked for me.

path:hover {
  fill: rgba(249, 209, 12, 0.87);
}