JSFiddle - React, Tailwind, and code Playground
by koh_edwin
HTML
<html>
<head>
<title>Highcharts Tutorial</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src = "https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
<script language = "JavaScript">
$(document).ready(function() {
var chart = {
type: 'scatter',
zoomType: 'xy',
width: 600,
height: 40
};
//var title = {
// text: 'Height Versus Weight of 507 Individuals by Gender'
//};
//var subtitle = {
// text: 'Source: Heinz 2003'
//};
var xAxis = {
title: {
enabled: false,
},
visible: false,
linewidth:0,
gridLineWidth: 0,
tickLength: 0,
labels: {
enabled: false
},
//startOnTick: true,
//endOnTick: true,
//showLastLabel: true
};
var yAxis = {
labels: {
enabled: false
},
gridLineWidth: 0,
title: {
enabled: false
}
};
//var legend = {
// layout: 'vertical',
// align: 'left',
// verticalAlign: 'top',
// x: 100,
// y: 70,
// floating: true,
// backgroundColor: (
// Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
// '#FFFFFF',
// borderWidth: 1
//}
var plotOptions = {
scatter: {
marker: {
radius:10,
//states: {
// hover: {
...