JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://highcharts.com/js/testing.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="http://code.highcharts.com/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js "></script>
<script src="https://code.highcharts.com/modules/histogram-bellcurve.js"></script>
<script type="text/javascript" src="http://www.highcharts.com/highslide/highslide-full.min.js"></script>
<script type="text/javascript" src="http://www.highcharts.com/highslide/highslide.config.js" charset="utf-8"></script>
<div id="container" style="height: 400px"></div>
<div id="container2" style="height: 400px"></div>
JavaScript
new Highcharts.Chart({
chart: { renderTo: 'container' },
title: { text: 'Linear y-axis' },
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: { text: null },
lineColor: '#e7e7e7',
alternateGridColor: '#f7f7f7',
gridLineColor: '#e7e7e7',
allowDecimals: false,
startOnTick: false,
minPadding: 0,
},
series:[{
name: 'apples',
data: [0.1, 3, 5, 8, 7, 2, 0.1, 108, 4, 7, 6, 10250]
}]
});
new Highcharts.Chart({
chart: { renderTo: 'container2' },
title: { text: 'Logarithmic y-axis' },
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
type: 'logarithmic',
title: { text: null },
lineColor: '#e7e7e7',
alternateGridColor: '#f7f7f7',
gridLineColor: '#e7e7e7',
allowDecimals: false,
startOnTick: false,
minPadding: 0,
},
series:[{
name: 'apples',
data: [0.1, 3, 5, 8, 7, 2, 0.1, 108, 4, 7, 6, 10250]
}]
});