JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<div id="frauenanteil" style="max-width: 1000px"></div>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

JavaScript

var col1 = 'rgba(255,80,100,1)'
var col1_light = 'rgba(255,80,100,0.75)'
var col2 = '#1e4664'

let chart = Highcharts.chart('frauenanteil', {
  chart: {
    type: 'scatter
    '
  },
  xAxis: {
    categories: ['CDU', 'SPD', 'Grüne', 'FDP', 'AfD', 'Linke'],
    reversed: false,
    labels: {
      enabled: true,
    },
  },
  yAxis: {
    max: 60,
    title: {
      enabled: false
    },
    plotLines: [{
      value: 38.03,
      zIndex: 1,
      color: col1,
      dashStyle: 'ShortDash',
      width: 1,
      label: {
        text: 'Durchschnitt 2020',
        align: 'right',
        style: {
          color: col1,
          fontWeight: 'bold',
        },
        x: -150,
        y: 20
      }
    }]
  },
  legend: {
    enabled: false
  },
  title: {
    text: 'Frauen an die Macht',
    style: {
      color: col1,
      fontWeight: 'bold',
      fontFamily: 'Helvetica, Clean, sans-serif'
    }
  },
  subtitle: {
    text: 'Frauenanteile in Kommunalparlamenten im Vergleich nach Parteien',
    style: {
      color: col1_light,
      fontWeight: 'bold',
      fontFamily: 'Helvetica, Clean, sans-serif'
    }
  },
  plotOptions: {
               scatter:{
                    lineWidth:2
                },
    marker: {
      enabled: false,
      states: {
        hover: {
          enabled: false
        }
      }
    },
    duration: 2000,
    states: {
      hover: {
        duration: 2000,
        lineWidth: 2.5
      },
    }
  },
  series: [{
    data: [20],
    color: col2,
    name: 'test1'
  }, {
    data: [10, 20],
    color: col1,
    name: 'test2'
  }],

  exporting: {
    enabled: true,
    buttons: {
      exportButton: {
        enabled: false
      },
      customButton1: {
        outside: true,
        useHTML: true,
        verticalAlign: 'top',
        y: 55,
        text: 'Wahlvorschläge',
        onclick: function() {
          this.series[0].update({
            data: [10, 10, 10, 10, 10, 10],
            color: col2
          }, {
          ...