JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://www.highcharts.com/highslide/highslide-full.min.js"></script>
<link rel="stylesheet" href="http://www.highcharts.com/highslide/highslide.css">
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
CSS
/* additional CSS for multi-line heading */
.multi-line .highslide-header {
visibility: hidden;
line-height: 0;
height: 0;
}
.multi-line .highslide-heading {
border-bottom: 1px solid #dddddd;
margin: 2px 0.4em;
}
.multi-line .close a {
display: block;
width: 16px;
height: 16px;
background: url(http://highcharts.com/highslide/graphics/closeX.png);
cursor: pointer;
}
.multi-line .close a:hover {
background-position: 0 16px;
}
JavaScript
// multi-line heading for Highslide in Highcharts (the Highslide part of this code can be used outside Highcharts too)
$(function () {
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y + '°C';
}
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
hs.htmlExpand(null, {
pageOrigin: {
x: this.pageX,
y: this.pageY
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' + this.y + ' visits',
width: 200
...