Demo of yAxis options
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/stock.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@highcharts/[email protected]" type="module"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
<div class="highcharts-controls-wrapper">
<highcharts-controls>
<highcharts-group header="Update options">
<highcharts-control type="color" path="yAxis.minorTickColor" value="#80808080"></highcharts-control>
<highcharts-control type="number" path="yAxis.minorTickWidth" value="1" min="0" max="5"></highcharts-control>
<highcharts-control type="number" path="yAxis.minorTickLength" value="10" min="0" max="20"></highcharts-control>
<highcharts-control type="select" path="yAxis.minorTickPosition" value="inside" options="inside,outside"></highcharts-control>
</highcharts-group>
</highcharts-controls>
</div>
CSS
* {
font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Helvetica,
Arial,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
sans-serif;
}
.highcharts-figure {
max-width: 800px;
margin: 1em auto;
}
.highcharts-controls-wrapper {
max-width: 800px;
margin: 1em auto;
padding: 0 10px;
}
highcharts-controls {
display: inline-block;
}
TypeScript
(async () => {
const data = await fetch(
'https://www.highcharts.com/samples/data/usdeur.json'
).then(response => response.json());
Highcharts.stockChart('container', {
title: {
text: 'Demo of minor tick options'
},
yAxis: {
minorGridLineWidth: 0,
minorTickColor: '#80808080',
minorTickLength: 10,
minorTickPosition: 'inside',
minorTicks: true,
minorTickWidth: 1
},
series: [{
data: data
}]
});
})();