'How to translate Highcharts with TranslatePress language switcher

I've built a WordPress site with multiple pages that have several Highcharts graphs on them. The website (and graphs) is in Spanish; however, it uses the TranslatePress plugin to switch it to English. The plugin doesn't work on Highcharts, though, and I'd like to be able to translate the series names. I've read in a number of places about how to translate the Highcharts using the lang object in Highcharts.setOptions (see below).

Highcharts.setOptions({
    lang: {
        months: [
            'Janvier', 'Février', 'Mars', 'Avril',
            'Mai', 'Juin', 'Juillet', 'Août',
            'Septembre', 'Octobre', 'Novembre', 'Décembre'
        ],
        weekdays: [
            'Dimanche', 'Lundi', 'Mardi', 'Mercredi',
            'Jeudi', 'Vendredi', 'Samedi'
        ]
    }
});

However, does anyone know how I can connect this to the TranslatePress language switcher and show it conditionally based on the language selected? And then, another question, as there are multiple charts containing different series names on each page, how would one go about making sure the right data was translated for the correct graphics when Highcharts.setOptions applies to all graphs on a page?

Any help is appreciated!

Here's a sample of one of my graphs I'd like to translate the series names on. They are all similar with different data.

<figure class="highcharts-figure">
<div id="container-300" style="height: 500px; width: auto;"></div>
<p class="highcharts-description"></p>
</figure>
<script>
Highcharts.chart('container-300', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Riesgos Ambientales'
  },
  subtitle: {
    text: 'Fuente: '
  },
  xAxis: {
    categories: [
      'Aguascalientes',
      'Guanajuato',
      'Jalisco',
      'Querétaro',
      'San Luis Potosí'
    ],
    crosshair: true
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Puntuaciones <br> ← Menor         Mayor →'
    }
  },
  tooltip: {
    shared: true,
    useHTML: true
  },
  plotOptions: {
    column: {
      pointPadding: 0.2,
      borderWidth: 0
    }
  },
  series: [{
    name: 'Promedio',
    color: '#1A3864',
    data: [0.58, 0.49, 0.5, 0.49, 0.55]        
  },{
    name: 'Agotamiento de agua',
    data: [0.25, 0.25, 0.75, 0.25,0.75],
visible: false
  }, {
    name: 'Agua no mejorada/sin saneamiento',
    data: [0.5, 0.5, 0.75, 0.5, 0.75],
visible: false

  }, {
    name: 'Agua residual sin tratamiento',
    data: [0.75,0.75,0.75,0.75,0.75],
visible: false

  }, {
    name: 'Calor extremo',
    data: [0.75,0.5,0.25,0.5,0.25],
visible: false
  },{
    name: 'Ciclón',
    data: [0.25,0.25,0.25,0.25,0.25],
visible: false
  },{
    name: 'Desprendimiento de tierras',
    data: [0.25,0.25,0.25,0.25,0.25],
visible: false
  },{
    name: 'Disminución del nivel freático',
    data: [0.75,0.75,0.75,0.75,0.5],
visible: false
  },{
    name: 'Erupción volcánica',
    data: [0,0.25,0.25,0.25,0],
visible: false
  },{
    name: 'Escasez de agua',
    data: [0.5,0.5,0.5,0.25,0.5],
visible: false
  },{
    name: 'Estrés hídrico',
    data: [0,0,0,0,0] ,
visible: false         
  },{
    name: 'Incendio forestal',
    data: [0.25,0.25,0.25,0.25,0.25] ,
visible: false         
  },{
    name: 'Inundación costera',
    data: [0,0,0.25,0,0] ,
visible: false         
  },{
    name: 'Inundación fluvial',
    data: [0.75,0.25,0.25,0.5,0.25] ,
visible: false         
  },{
    name: 'Inundación urbana',
    data: [0.75,0.25,0.25,0.25,0.25] ,
visible: false         
  },{
    name: 'Potencial de eutrofización costera',
    data: [0.75,0.5,0.75,0.75,0.75] ,
visible: false         
  },{
    name: 'Riesgo en vulnerabilidad por inundación',
    data: [0.75,0.75,1,0.75,1] ,
visible: false         
  },{
    name: 'Riesgo de sequía',
    data: [0.5,0.5,0.5,0.5,0.5] ,
visible: false         
  },{
    name: 'Riesgo no mejorado/no beber',
    data: [0.75,1,1,0.75,1] ,
visible: false         
  },{
    name: 'Terremoto',
    data: [1,0.5,0.5,0.75,1] ,
visible: false         
  },{
    name: 'Tsunami',
    data: [0,0,0.25,0,0] ,
visible: false         
  },{
    name: 'Variabilidad estacional',
    data: [0.25,0.5,0.25,0.25,0.5] ,
visible: false         
  },{
    name: 'Variabilidad interanual',
    data: [0.75,0.75,0.75,0.75,0.5] ,
visible: false         
  }]
});
</script>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source