// Load Highcharts
const Highcharts = global.Highcharts = require('highcharts');
// Alternatively, this is how to load Highstock. Highmaps is similar.
// var Highcharts = require('highcharts/highstock');

// Load the exporting module, and initialize it.
require('highcharts/modules/exporting')(Highcharts);
// Load Highcharts Maps as a module
require('highcharts/modules/map')(Highcharts);
require('highcharts/modules/accessibility')(Highcharts);
// Generate the chart

// Set global options
Highcharts.setOptions({
  chart: {
    // Turn on if you want to style the carts per css
    styledMode: true,
  },
  tooltip:{pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>'},
  responsive: {
    rules: [{
      condition: {
        maxWidth: 999
      },
      //Rotate the axis labels in mobile
      chartOptions: {
        xAxis: {
          labels: {
            rotation: 90
          }
        }

      }
    }]
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
        enabled: true
      },
      showInLegend: true
    }
  },
});

$.each($('.highchart-container'), function(index) {

  const container = $(this);
  const options = container.data('options');
  const newId = container.attr('id')+'-'+index;
  container.attr('id', newId);
  if (container.data('height')) {
    container.height(container.data('height'));
  }
  options.chart.renderTo = newId;
  new Highcharts.chart(options);
});