JSFiddle - React, Tailwind, and code Playground

by julietteredivo

HTML

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

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'spline'
        },
        title: {
            text: 'Évolution des résultats au second tour des élections régionales de 1998 à 2015 dans le Grand Est'
        },
        subtitle: {
            text: 'source : interieur.gouv.fr'
        },
        xAxis: {
            type: 'date',
            dateTimeLabelFormats: { // don't display the dummy year
               month: '%e. %b',
                year: '%b'
            },
            title: {
                text: "Élections"
            }
        },
        yAxis: {
            title: {
                text: "Nombre d'électeurs"
            },
            labels: {
          format: '{value}'
          },
            min: 0
        },
        tooltip: {
            headerFormat: '<b>{series.name}</b><br>',
            pointFormat: '{point.y}'
        },

        plotOptions: {
            spline: {
                marker: {
                    enabled: true
                }
            }
        },

        series: [{
            name: 'Abstention',
            color:'#ffc952',
            // Define the data points. All series have a dummy year
            // of 1970/71 in order to be compared on the same x axis. Note
            // that in JavaScript, months start at 0 for January, 1 for February etc.
            data: [
                [1998, 1632022],
                [2004, 1428780],
                [2010, 1961329],
                [2015, 1592494]
             
            ]
        }, {
            name: 'FN',
 					  color:'#34314c',
            data: [
                [1998, 341194],
                [2004, 414737],
                [2010, 302091],
                [2015, 790166]
            ]
        }, {
            name: 'Droite',
            color:'#47b8e0',
            data: [
               [1998, 593907],
                [2004, 839234],
                [2010, 686875],
                [2015, 1060059]
            ]
   ...