JSFiddle - React, Tailwind, and code Playground
by yasarui
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="chart" style="width: 600px;"></div>
<div id="container" style="margin-left:100px; height: 100px; width: 300px"></div>
JavaScript
Highcharts.stockChart('container', {
rangeSelector: {
enabled: false
},
tooltip: {
enabled: false
},
// title: {
// text: 'Income vs Expense'
// },
exporting: {
enabled: false,
},
yAxis: {
height: 0,
gridLineWidth: 0,
labels: {
enabled: false
}
},
xAxis: {
lineWidth: 0,
tickLength: 0,
labels: {
enabled: false
},
events: {
setExtremes: function(e) {
},
},
min: 40,
max: 50,
},
scrollbar: {
enabled: false,
},
credits: {
enabled: false,
},
navigator: {
series: {
type: 'column',
animation: {
duration: 0,
},
},
height: 100,
xAxis: {
lineColor: "gray",
lineWidth: 1,
labels: {
step: 1,
align: "right",
enabled: true,
x: 1,
y: 10,
formatter: function() {
return this.value;
},
},
min: 0,
max: 100
},
},
series: [{
name: 'data 1',
data: [
[30, 158000],
[31, 158000],
[32, 158000],
[33, 158000],
[34, 158000],
[35, 159000],
[40, 161000],
[41, 161000],
[42, 161000],
[43, 161000],
[44, 161000],
[45, 165000],
[46, 165000],
[47, 165000],
[48, 165000],
[49, 165000],
[50, 180000],
[51, 180000],
[52, 180000],
[53, 180000],
[54, 180000],
[55, 70000],
[56, 70000],
[57, 70000],
[58, 70000],
[59, 70000],
...