JSFiddle - React, Tailwind, and code Playground

by Chen KY

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: {
            	shared: true,
              formatter : function() {
                         var s = '';
                         
                         $.each(this.points, function () {
                              s += '<br/>' + this.y 
                              + this.series.tooltipOptions.valuePrefix + ' ' +  this.series.tooltipOptions.valueSuffix[this.point.index];
                          });
                          
                          return s;
                    }
            },
            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],
                    valuePrefix: 'mm'
                }
    
            }, {
                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],
                    valuePrefix: '°C'
                }
            }]
        });
    });