JSFiddle - React, Tailwind, and code Playground

by maritavindedal

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div id="container"></div>

JavaScript

Highcharts.chart('container', {

  title: {
    text: 'Testing markers'
  },

  accessibility: {
    description: 'A chart to demonstrate that all markers are enabled after a legend item is unhidden.'
  },

  plotOptions: {
    series: {
      events: {
        legendItemClick: function() {

          // Loop through all three series
          for (let i = 0; i < this.chart.series.length; i++) {
            const series = this.chart.series[i]

            // Loop through all points in series
            for (var j = 0; j < series.data.length; j++){
              const point = series.data[j];

              if (point.hasForcedA11yMarker) {
                point.update({
                  marker: {
                    //enabled: true,
                    states: {
                      normal: {
                        opacity: 0
                      }
                    }
                  }
                }, false);
              }
            }
          }
        }
      }
    }
  },

  series: [{
      name: 'One',
      data: [{
          x: 6,
          y: 7.75
        }, {
          x: 6.500,
          y: 9,
          marker: {
            enabled: false
          }
        }, {
          x: 7,
          y: 9,
          marker: {
            enabled: false
          }
        }, {
          x: 7.500,
          y: 8.75,
          marker: {
            enabled: false
          }
        }, {
          x: 8,
          y: 9,
          marker: {
            enabled: false
          }
        }, {
          x: 8.333,
          y: 7.75,
          marker: {
            enabled: false
          }
        }, {
          x: 8.666,
          y: 8.75
        }
      ]
    },
    {
      name: 'Two',
      data: [{
          x: 6,
          y: 5.5
        }, {
          x: 6.500,
          y: 3.75,
          marker: {
            enabled: false
          }
        },
        {
          x: 7,
          y: 5.25,
          marker: {
            enabled: false
         ...