JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>
JavaScript
$(function () {
$('#container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'AYY:n edustajistovaalien 2015 ehdokkaat'
},
subtitle: {
text: ''
},
xAxis: {
title: {
enabled: true,
text: ''
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
enabled: true,
text: ''
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: false,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.nro}: {point.name}'
}
}
},
series: [
{ name: 'CHEM',
color: 'rgba(25, 83, 37, .5)',
data: [
{x: -1.32729293169352, y: -1.20262235687697, nro: 2, name: 'Ailas Henri'},
{x: -0.0726176438980712, y: 0.948553115206572, nro: 3, name: 'Aromaa Riina'},
{x:...