JSFiddle - React, Tailwind, and code Playground

by core972

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container-main-bar"></div>

JavaScript

Highcharts.chart('container-main-bar', {
                    chart: {
                        type: 'line',
                        events: {
                            drilldown: function(e) {
                            
                           
                            },
                            drillup: function (e) {

                              
                            }
                        },
                    },
                    exporting: { enabled: true },
                    title: {
                        text: 'Car Sales'
                    },
                    xAxis: {
                        type: 'category',
                        labels: {
                            formatter () {
                                return `<span style="color: #626262">${this.value}</span>`
                            }
                        }
                    },
                    yAxis: {
                        title: {
                            text: 'Sales'
                        },
                        allowDecimals: false,
                        labels: {
                            formatter () {
                                return `<span style="color: #626262">${this.value}</span>`
                            }
                        }

                    },
                    legend: {
                        enabled: true
                    },
                    plotOptions: {
                         series: {
                             borderWidth: 0,
                             dataLabels: {
                                 enabled: true,
                                 format: '{point.y}'
                             },
                         },
                    },

                    tooltip: {
                        headerFormat: '<span style="font-size:11px">Sales as at</span><br>',
                        pointFormat: '<span style="color:{point.color}">{point.date}</span>:...