I recetly updated highcharts / highstock JavaScript and now I have problems with x-axis rendering. Please see the example, /
<script src=".js"></script>
<script src=".js"></script>
<script src=".js"></script>
Product version
Highcharts JS v11.4.8 (2024-08-29) ( Updated from Highcharts JS v7.1.1 )
Highstock JS v11.4.8 (2024-08-29) ( Updated from Highcharts JS v7.1.1 )
The first chart was displayed correctly with older version. x-axis labels are not rendered correctly
Adding JavaScript for highchart configuration
var createChart = function() {
Highcharts.setOptions({
global: {
useUTC: false
},
chart: {
style: {
fontFamily: '"Lato", Arial, sans-serif'
}
}
});
alertDetailChart = $('#container').highcharts('StockChart',
{
chart: {
renderTo: 'container',
type: 'column',
panning: false,
zoomType: 'x',
events: {
selection: function(e) {
$('#alert-detail-table').DataTable().columns().search("");
$('#alert-detail-table').DataTable().search("").draw();
$.fn.dataTable.ext.search = [];
var lowestRange;
var highestRange;
var xAxis = e.xAxis[0],
flag = false; // first selected point, should deselect old ones
if (xAxis) {
$.each(this.series,
function(i, series) {
$.each(series.points,
function(j, point) {
if (point.x >= xAxis.min && point.x <= xAxis.max) {
if (lowestRange == null && highestRange == null) {
lowestRange = point.x;
highestRange = point.x;
}
if (lowestRange > point.x) {
lowestRange = point.x;
}
if (highestRange < point.x) {
highestRange = point.x;
}
point.select(true, flag);
if (!flag) {
flag = !flag;
}
} else {
point.select(false, flag);
}
});
});
}
var detailTable = $('#alert-detail-table').DataTable();
var columnIndex = getColumnIndex(detailTable, 'TriggeredDateTime');
if (lowestRange != null && highestRange != null) {
$("html, body").animate({ scrollTop: $(document).height() }, "slow");
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
var min = (lowestRange);
var max = (highestRange);
var triggerDateTime =
parseDate(data[columnIndex]).startOf('day').valueOf();
if (min <= triggerDateTime && triggerDateTime <= max) {
return true;
}
return false;
}
);
$('#dateFilterMessage').show();
if (lowestRange === highestRange) {
$('#dateFilterText')
.text(' Showing transactions on ' +
GetLocalizedDateFormat(lowestRange));
} else {
$('#dateFilterText')
.text(' Showing transactions between ' +
GetLocalizedDateFormat(lowestRange) +
' and ' +
GetLocalizedDateFormat(highestRange));
}
detailTable.draw();
}
else {
$('#dateFilterMessage').hide();
$('#alert-detail-table').DataTable().columns().search("");
$('#alert-detail-table').DataTable().search("").draw();
$.fn.dataTable.ext.search = [];
}
return false;
}
}
},
credits: {
enabled: false
},
rangeSelector: {
selected: 0,
allButtonsEnabled: true,
buttons: [
{
type: 'week',
count: 1,
text: 'Wk'
},
{
type: 'month',
count: 1,
text: '1m'
},
{
type: 'month',
count: 3,
text: '3m'
},
{
type: 'month',
count: 6,
text: '6m'
},
{
type: 'year',
count: 1,
text: '1yr'
},
{
type: 'all',
text: 'All'
}
],
inputEnabled: true,
inputEditDateFormat: '%Y-%m-%d',
inputDateFormat: '%Y-%m-%d'
},
title: {
text: 'Triggered Count per Day'
},
xAxis: {
title: { text: 'Date' },
type: 'datetime',
max: moment().startOf('day').valueOf(),
ordinal: false,
tickInterval: 24 * 3600 * 1000,
labels: {
formatter: function () {
return GetLocalizedDateFormat(this.value);
}
}
},
yAxis: {
title: { text: 'Count' },
labels: {
formatter: function() {
return formatNumber(this.value);
}
}
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
var p = this.series.chart.getSelectedPoints();
if (p != null) {
p.forEach(function(series) {
series.select(false, false);
});
}
this.select(true, true);
var detailTable = $('#alert-detail-table').DataTable();
detailTable.columns().search("");
detailTable.search("").draw();
$.fn.dataTable.ext.search = [];
var localizedDate = GetLocalizedDateFormat(this.category);
var columnIndex = getColumnIndex(detailTable, 'TriggeredDateTime');
detailTable.columns(columnIndex).search(localizedDate).draw();
$('#dateFilterMessage').show();
$('#dateFilterText').text(' Showing transactions on ' + localizedDate);
}
}
}
}
},
tooltip: {
split: false,
formatter: function () {
var header = '<span style="font-size: 10px">' + GetLocalizedDateFormat(this.point.x) + '</span><br/>';
var point =
'<span style="color:' + this.series.color + '">' + this.series.name + '</span>: <b>' + formatNumber(this.point.y) + '</b><br/>';
return header + point;
}
},
series: [
{
type: 'column',
name: 'Triggered Alert Count',
data: values
}
]
});
if (values.length >= 1) {
var today = moment().startOf('day');
var firstDayOfData = values[values.length - 1][0];
var firstDayOfDataMinus7Days = parseDate(firstDayOfData).subtract(7, "days").valueOf();
var startingPoint = firstDayOfDataMinus7Days < values[0][0] ? values[0][0] : firstDayOfDataMinus7Days;
var chart = $('#container').highcharts();
chart.xAxis[0].setExtremes(startingPoint, today.valueOf());
}
if (Modernizr.svg) {
createChart();
}