JSFiddle - React, Tailwind, and code Playground

by v_schmitt57_laposte_net

HTML

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

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

JavaScript

$(function () {
    $('#container').highcharts({
        title: {
            text: 'Intentions de vote des primaires républicaines',
            x: -20 //center
        },
        subtitle: {
            text: 'Sources: YouGov/Economist & Ipsos/Reuters',
            x: -20
        },
        xAxis: {
            categories: ['Juin 2015', 'Juillet', 'Août', 'Septembre', 'Octobre']
        },
        yAxis: {
            title: {
                text: 'Pourcentage',
                x: -10
            },
        },
        tooltip: {
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>',
            shared: true
        },
        tooltip: {
            valueSuffix: ' %'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'Donald Trump',
            data: [2, 15, 25, 35, 33],
            marker: {
                symbol: 'circle',
            },
            color: '#C80B0B',
        }, {
            name: 'Ben Carson',
            data: [9, 7, 11, 14, 19],
            marker: {
                symbol: 'circle',
            },
        }, {
            name: 'Jeb Bush',
            data: [14, 11, 9, 8, 11],
            marker: {
                symbol: 'circle',
            },
        }, {
            name: 'Marco Rubio',
            data: [10, 9, 9, 3, 8],
            marker: {
                symbol: 'circle',
            },
        }, {
            name: 'Carly Fiorina',
            data: [6, 3, 6, 2, 3],
            marker: {
                symbol: 'circle',
            },
        }, {
            name: 'Ted Cruz',
            data: [3, 4, 7, 5, 4],
            marker: {
                symbol: 'circle',
            },
        }, {
            name: 'Autres',
            data: [45, 46, 26, 25, 15],
            marker: {
     ...