Im creating a line chart for diabetics to see their BG values.
My problem is that there are way to many labels shown in the xaxis.
How can I show only the labels that have unique hours? But I don't want the tooltips to change.
For example I want the tooltips to include the full date and the labels only the hours (02, 03, 04 etc.) but not multiple of the same (02, 02, 02, 03).
More like this:
Below is my code:
var optionsLine = {
annotations: {
position: "back",
yaxis: [
{
label: {
text: " "
},
y: 3.9959596408076,
y2: 9.9898991020191,
fillColor: "#00E396"
},
{
label: {
text: " "
},
y: 0,
y2: 3.9959596408076,
fillColor: "#ff0000a6"
},
{
label: {
text: " "
},
y: 9.9898991020191,
y2: 14,
fillColor: "#ff9900fa"
},
{
label: {
text: " "
},
y: 14,
y2: 16,
fillColor: "#ff0000a6"
}
]
},
chart: {
height: 330,
type: 'line',
zoom: {
enabled: false
},
dropShadow: {
enabled: true,
top: 3,
left: 2,
blur: 4,
opacity: 1,
}
},
stroke: {
curve: 'smooth',
width: 2
},
yaxis: {
min: 0,
max: 16,
tickAmount: 4.0
},
//colors: ["#3F51B5", '#2196F3'],
series: [{
name: "mmol/L",
type: 'line',
data: [8.8, 8.5, 8.3, 8.3, 8.7, 8.9, 9.3, 9.8, 9.7, 9.3, 9.4, 9.3, 9.2, 9.2, 9.1, 9.3, 9.5, 9.4, 9.3, 9.9, 10.1, 9.4, 9.1, 9.7, 10.7, 12.1, 13.2, 14, 13.7, 13.3, 12.9, 12.3, ]
}
],
title: {
text: 'mmol/L',
align: 'left',
offsetY: 25,
offsetX: 20
},
labels: ["13-09-2022 02:12", "13-09-2022 02:27", "13-09-2022 02:42", "13-09-2022 02:57", "13-09-2022 03:12", "13-09-2022 03:27", "13-09-2022 03:42", "13-09-2022 03:57", "13-09-2022 04:12", "13-09-2022 04:27", "13-09-2022 04:42", "13-09-2022 04:57", "13-09-2022 05:12", "13-09-2022 05:27", "13-09-2022 05:42", "13-09-2022 05:57", "13-09-2022 06:12", "13-09-2022 06:27", "13-09-2022 06:42", "13-09-2022 06:57", "13-09-2022 07:12", "13-09-2022 07:27", "13-09-2022 07:42", "13-09-2022 07:57", "13-09-2022 08:12", "13-09-2022 08:27", "13-09-2022 08:42", "13-09-2022 08:57", "13-09-2022 09:12", "13-09-2022 09:27", "13-09-2022 09:42", "13-09-2022 09:57", ],
xaxis: {
tooltip: {
enabled: false
},
},
grid: {
show: true,
borderColor: "#7676785e"
},
legend: {
position: 'top',
horizontalAlign: 'right',
offsetY: -20
},
}
var chartLine = new ApexCharts(document.querySelector('#line-adwords'), optionsLine);
chartLine.render();<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.6.12/apexcharts.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.6.12/apexcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<div id="line-adwords"></div>