JSFiddle - React, Tailwind, and code Playground
by Black Label
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://code.highcharts.com/stock/highstock.src.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.src.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', {
chart: {
events: {
load: function() {
this.navigator.shades.forEach(shade => {
Highcharts.removeEvent(shade.element);
});
}
}
},
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],
[60, 185000],
[61, 185000],
[62, 185000],
[63, 185000],
[64, 185000],
[65, 185000],
[66, 185000],
[67, 185000],
[68, 185000],
[69, 185000],
[70, 110000],
[71, 110000],
[72, 110000],
[73,...