JSFiddle - React, Tailwind, and code Playground

by Rafaelhegre

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: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
        $('#container').highcharts({
            xAxis: [{
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            }],
            yAxis: [{ // Primary yAxis
                labels: {
                    format: '{value}°C'
                },
                title: {
                    text: 'Temperature'
                }
            }, { // Secondary yAxis
                title: {
                    text: 'Rainfall'
                },
                labels: {
                    format: '{value} mm'
                },
                opposite: true
            }],
            tooltip: {
                formatter : function() {
                        console.log(this);
                     return this.y + ' ' +  this.series.tooltipOptions.valueSuffix[this.point.index];
                }
            },
            series: [{
                name: 'Rainfall',
                type: 'column',
                yAxis: 1,
                data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
                tooltip: {
                    valueSuffix: [1, 1, 2, 4, 6, 7, 9, 0, 0, 15, 18, 19]
                }
    
            }, {
                name: 'Temperature',
                type: 'spline',
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
                tooltip: {
                    valueSuffix: [1, 7.5, 10.4, 12.2, 14.0, 17.0, 13.6, 14.5, 26.4, 19.1, 95, 54.4]
                }
            }]
        });
    });