I have a spline chart that is generated with Highcharts. How to make the x-axis less crowded? This is a month's worth of data. Sometimes the data can be more than that. On the x-axis, sow only few dates rather than all of them.
My code:
Highcharts.chart('container', {
"chart": {
"backgroundColor": "#000",
"type": "spline",
"zoomType": "x"
},
"accessibility": {
"enabled": false
},
"credits": {
"enabled": false
},
"legend": {
"enabled": true,
"itemStyle": {
"color": "#ffffff"
}
},
"rangeSelector": {
"enabled": false
},
"navigator": {
"enabled": false
},
"scrollbar": {
"enabled": false
},
"xAxis": {
"categories": ["Apr 2, 2024", "Apr 3, 2024", "Apr 4, 2024", "Apr 5, 2024", "Apr 6, 2024", "Apr 7, 2024", "Apr 8, 2024", "Apr 9, 2024", "Apr 10, 2024", "Apr 11, 2024", "Apr 12, 2024", "Apr 13, 2024", "Apr 14, 2024", "Apr 15, 2024", "Apr 16, 2024", "Apr 22, 2024", "Apr 17, 2024", "Apr 26, 2024", "Apr 27, 2024", "Apr 29, 2024", "Apr 30, 2024"],
"labels": {
"style": {
"color": "#ffffff"
}
},
"lineColor": "#ffffff",
"lineWidth": 3
},
"yAxis": [{
"gridLineColor": "#000",
"lineColor": "#fff",
"lineWidth": 3,
"labels": {
"style": {
"color": "#fff"
}
},
"title": {
"text": ""
},
"opposite": false
}, {
"title": {
"text": "",
"color": "#fff"
},
"opposite": true,
"gridLineColor": "#000",
"lineColor": "#fff",
"lineWidth": 3,
"labels": {
"style": {
"color": "#fff"
}
}
}],
"tooltip": {
"backgroundColor": "#283347",
"style": {
"color": "#fff"
},
"shared": true,
"useHTML": true
},
"plotOptions": {
"series": {
"fillOpacity": 0,
"marker": {
"enabled": false,
"states": {
"hover": {
"enabled": true
}
}
}
}
},
"series": [{
"name": "visits",
"data": [{
"name": "Apr 2, 2024 8:00 PM",
"y": 2182294
}, {
"name": "Apr 3, 2024 8:00 PM",
"y": 2139585
}, {
"name": "Apr 4, 2024 8:00 PM",
"y": 2104361
}, {
"name": "Apr 5, 2024 8:00 PM",
"y": 2202831
}, {
"name": "Apr 6, 2024 8:00 PM",
"y": 2180398
}, {
"name": "Apr 7, 2024 8:00 PM",
"y": 2231004
}, {
"name": "Apr 8, 2024 8:00 PM",
"y": 2187912
}, {
"name": "Apr 9, 2024 8:00 PM",
"y": 2203672
}, {
"name": "Apr 10, 2024 8:00 PM",
"y": 2186452
}, {
"name": "Apr 11, 2024 8:00 PM",
"y": 2187167
}, {
"name": "Apr 12, 2024 8:00 PM",
"y": 2248419
}, {
"name": "Apr 13, 2024 8:00 PM",
"y": 2423452
}, {
"name": "Apr 14, 2024 8:00 PM",
"y": 2499690
}, {
"name": "Apr 15, 2024 8:00 PM",
"y": 2402717
}, {
"name": "Apr 16, 2024 8:00 PM",
"y": 2397309
}, {
"name": "Apr 22, 2024 8:00 PM",
"y": 2393551
}, {
"name": "Apr 17, 2024 8:00 PM",
"y": 3348
}, {
"name": "Apr 26, 2024 8:00 PM",
"y": 4419054
}, {
"name": "Apr 27, 2024 8:00 PM",
"y": 2278264
}, {
"name": "Apr 29, 2024 8:00 PM",
"y": 2229568
}, {
"name": "Apr 30, 2024 8:00 PM",
"y": 2293853
}],
"color": "#DA70D6",
"yAxis": 0
}, {
"name": "return_visits",
"data": [{
"name": "Apr 2, 2024 8:00 PM",
"y": 1720977
}, {
"name": "Apr 3, 2024 8:00 PM",
"y": 1698864
}, {
"name": "Apr 4, 2024 8:00 PM",
"y": 1677394
}, {
"name": "Apr 5, 2024 8:00 PM",
"y": 1749105
}, {
"name": "Apr 6, 2024 8:00 PM",
"y": 1718534
}, {
"name": "Apr 7, 2024 8:00 PM",
"y": 1752510
}, {
"name": "Apr 8, 2024 8:00 PM",
"y": 1743050
}, {
"name": "Apr 9, 2024 8:00 PM",
"y": 1738325
}, {
"name": "Apr 10, 2024 8:00 PM",
"y": 1721808
}, {
"name": "Apr 11, 2024 8:00 PM",
"y": 1733612
}, {
"name": "Apr 12, 2024 8:00 PM",
"y": 1762564
}, {
"name": "Apr 13, 2024 8:00 PM",
"y": 1907262
}, {
"name": "Apr 14, 2024 8:00 PM",
"y": 1916476
}, {
"name": "Apr 15, 2024 8:00 PM",
"y": 1882079
}, {
"name": "Apr 16, 2024 8:00 PM",
"y": 1846960
}, {
"name": "Apr 22, 2024 8:00 PM",
"y": 1827737
}, {
"name": "Apr 17, 2024 8:00 PM",
"y": 1831
}, {
"name": "Apr 26, 2024 8:00 PM",
"y": 3565753
}, {
"name": "Apr 27, 2024 8:00 PM",
"y": 1801874
}, {
"name": "Apr 29, 2024 8:00 PM",
"y": 1776895
}, {
"name": "Apr 30, 2024 8:00 PM",
"y": 1761887
}],
"color": "#FFD700",
"yAxis": 0
}, {
"name": "unique_visitors",
"data": [{
"name": "Apr 2, 2024 8:00 PM",
"y": 1578941
}, {
"name": "Apr 3, 2024 8:00 PM",
"y": 1544172
}, {
"name": "Apr 4, 2024 8:00 PM",
"y": 1517705
}, {
"name": "Apr 5, 2024 8:00 PM",
"y": 1603987
}, {
"name": "Apr 6, 2024 8:00 PM",
"y": 1588428
}, {
"name": "Apr 7, 2024 8:00 PM",
"y": 1615074
}, {
"name": "Apr 8, 2024 8:00 PM",
"y": 1573398
}, {
"name": "Apr 9, 2024 8:00 PM",
"y": 1612672
}, {
"name": "Apr 10, 2024 8:00 PM",
"y": 1590694
}, {
"name": "Apr 11, 2024 8:00 PM",
"y": 1576982
}, {
"name": "Apr 12, 2024 8:00 PM",
"y": 1598907
}, {
"name": "Apr 13, 2024 8:00 PM",
"y": 1698120
}, {
"name": "Apr 14, 2024 8:00 PM",
"y": 1793186
}, {
"name": "Apr 15, 2024 8:00 PM",
"y": 1702037
}, {
"name": "Apr 16, 2024 8:00 PM",
"y": 1721280
}, {
"name": "Apr 22, 2024 8:00 PM",
"y": 1735671
}, {
"name": "Apr 17, 2024 8:00 PM",
"y": 2691
}, {
"name": "Apr 26, 2024 8:00 PM",
"y": 3124829
}, {
"name": "Apr 27, 2024 8:00 PM",
"y": 1640897
}, {
"name": "Apr 29, 2024 8:00 PM",
"y": 1566275
}, {
"name": "Apr 30, 2024 8:00 PM",
"y": 1651959
}],
"color": "#6B8E23",
"yAxis": 0
}, {
"name": "article_views",
"data": [{
"name": "Apr 2, 2024 8:00 PM",
"y": 863219
}, {
"name": "Apr 3, 2024 8:00 PM",
"y": 834750
}, {
"name": "Apr 4, 2024 8:00 PM",
"y": 787435
}, {
"name": "Apr 5, 2024 8:00 PM",
"y": 857901
}, {
"name": "Apr 6, 2024 8:00 PM",
"y": 855943
}, {
"name": "Apr 7, 2024 8:00 PM",
"y": 871373
}, {
"name": "Apr 8, 2024 8:00 PM",
"y": 849347
}, {
"name": "Apr 9, 2024 8:00 PM",
"y": 874912
}, {
"name": "Apr 10, 2024 8:00 PM",
"y": 893765
}, {
"name": "Apr 11, 2024 8:00 PM",
"y": 878446
}, {
"name": "Apr 12, 2024 8:00 PM",
"y": 948741
}, {
"name": "Apr 13, 2024 8:00 PM",
"y": 938141
}, {
"name": "Apr 14, 2024 8:00 PM",
"y": 938447
}, {
"name": "Apr 15, 2024 8:00 PM",
"y": 971806
}, {
"name": "Apr 16, 2024 8:00 PM",
"y": 1005188
}, {
"name": "Apr 22, 2024 8:00 PM",
"y": 1062300
}, {
"name": "Apr 17, 2024 8:00 PM",
"y": 2583
}, {
"name": "Apr 26, 2024 8:00 PM",
"y": 1725505
}, {
"name": "Apr 27, 2024 8:00 PM",
"y": 937386
}, {
"name": "Apr 29, 2024 8:00 PM",
"y": 856214
}, {
"name": "Apr 30, 2024 8:00 PM",
"y": 969535
}],
"color": "#FF7F50",
"yAxis": 0
}, {
"name": "audio_play",
"data": [{
"name": "Apr 2, 2024 8:00 PM",
"y": 158735
}, {
"name": "Apr 3, 2024 8:00 PM",
"y": 166061
}, {
"name": "Apr 4, 2024 8:00 PM",
"y": 148663
}, {
"name": "Apr 5, 2024 8:00 PM",
"y": 133487
}, {
"name": "Apr 6, 2024 8:00 PM",
"y": 136010
}, {
"name": "Apr 7, 2024 8:00 PM",
"y": 160773
}, {
"name": "Apr 8, 2024 8:00 PM",
"y": 162092
}, {
"name": "Apr 9, 2024 8:00 PM",
"y": 153291
}, {
"name": "Apr 10, 2024 8:00 PM",
"y": 157931
}, {
"name": "Apr 11, 2024 8:00 PM",
"y": 145839
}, {
"name": "Apr 12, 2024 8:00 PM",
"y": 140483
}, {
"name": "Apr 13, 2024 8:00 PM",
"y": 170573
}, {
"name": "Apr 14, 2024 8:00 PM",
"y": 177091
}, {
"name": "Apr 15, 2024 8:00 PM",
"y": 180538
}, {
"name": "Apr 16, 2024 8:00 PM",
"y": 171497
}, {
"name": "Apr 22, 2024 8:00 PM",
"y": 180906
}, {
"name": "Apr 17, 2024 8:00 PM",
"y": 395
}, {
"name": "Apr 26, 2024 8:00 PM",
"y": 269944
}, {
"name": "Apr 27, 2024 8:00 PM",
"y": 141954
}, {
"name": "Apr 29, 2024 8:00 PM",
"y": 155965
}, {
"name": "Apr 30, 2024 8:00 PM",
"y": 153210
}],
"color": "#20B2AA",
"yAxis": 0
}, {
"name": "video_play",
"data": [{
"name": "Apr 2, 2024 8:00 PM",
"y": 479844
}, {
"name": "Apr 3, 2024 8:00 PM",
"y": 495244
}, {
"name": "Apr 4, 2024 8:00 PM",
"y": 553062
}, {
"name": "Apr 5, 2024 8:00 PM",
"y": 445209
}, {
"name": "Apr 6, 2024 8:00 PM",
"y": 406745
}, {
"name": "Apr 7, 2024 8:00 PM",
"y": 452514
}, {
"name": "Apr 8, 2024 8:00 PM",
"y": 447724
}, {
"name": "Apr 9, 2024 8:00 PM",
"y": 435157
}, {
"name": "Apr 10, 2024 8:00 PM",
"y": 482781
}, {
"name": "Apr 11, 2024 8:00 PM",
"y": 478997
}, {
"name": "Apr 12, 2024 8:00 PM",
"y": 529373
}, {
"name": "Apr 13, 2024 8:00 PM",
"y": 783667
}, {
"name": "Apr 14, 2024 8:00 PM",
"y": 808305
}, {
"name": "Apr 15, 2024 8:00 PM",
"y": 660943
}, {
"name": "Apr 16, 2024 8:00 PM",
"y": 620450
}, {
"name": "Apr 22, 2024 8:00 PM",
"y": 497454
}, {
"name": "Apr 17, 2024 8:00 PM",
"y": 13202
}, {
"name": "Apr 26, 2024 8:00 PM",
"y": 873312
}, {
"name": "Apr 27, 2024 8:00 PM",
"y": 514325
}, {
"name": "Apr 29, 2024 8:00 PM",
"y": 551823
}, {
"name": "Apr 30, 2024 8:00 PM",
"y": 532816
}],
"color": "#FF8C00",
"yAxis": 0
}, {
"name": "time_spent_per_visit",
"data": [{
"name": "Apr 2, 2024 8:00 PM",
"y": 298753508
}, {
"name": "Apr 3, 2024 8:00 PM",
"y": 295428214
}, {
"name": "Apr 4, 2024 8:00 PM",
"y": 289698259
}, {
"name": "Apr 5, 2024 8:00 PM",
"y": 281628634
}, {
"name": "Apr 6, 2024 8:00 PM",
"y": 276325393
}, {
"name": "Apr 7, 2024 8:00 PM",
"y": 298815690
}, {
"name": "Apr 8, 2024 8:00 PM",
"y": 300802278
}, {
"name": "Apr 9, 2024 8:00 PM",
"y": 287960174
}, {
"name": "Apr 10, 2024 8:00 PM",
"y": 299063477
}, {
"name": "Apr 11, 2024 8:00 PM",
"y": 311131007
}, {
"name": "Apr 12, 2024 8:00 PM",
"y": 310822626
}, {
"name": "Apr 13, 2024 8:00 PM",
"y": 347487659
}, {
"name": "Apr 14, 2024 8:00 PM",
"y": 356177362
}, {
"name": "Apr 15, 2024 8:00 PM",
"y": 340235250
}, {
"name": "Apr 16, 2024 8:00 PM",
"y": 330655491
}, {
"name": "Apr 22, 2024 8:00 PM",
"y": 322284004
}, {
"name": "Apr 17, 2024 8:00 PM",
"y": 767692
}, {
"name": "Apr 26, 2024 8:00 PM",
"y": 590347951
}, {
"name": "Apr 27, 2024 8:00 PM",
"y": 292822482
}, {
"name": "Apr 29, 2024 8:00 PM",
"y": 311850281
}, {
"name": "Apr 30, 2024 8:00 PM",
"y": 301374165
}],
"color": "#ff0000",
"yAxis": 1
}]
});<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>Here is the link to the fiddle: https://jsfiddle.net/nb_nb_nb/a6w2hntx/2/
To make the xAxis "less crowded" you can use xAxis.tickInterval option and set it to 2 or 3. This setting means that every second or third label will be displayed.
API references: https://api.highcharts.com/highcharts/xAxis.tickInterval
Demo: https://jsfiddle.net/BlackLabel/bo4pqxnt/
xAxis:{
tickInterval: 2,
...
}