I am incorporating two line charts in a single charts and using HighCharts . The issue that I am facing is that the data labels of both line charts are getting overlapped . I tried using allowOverlap : true , but of no avail . Can somebody share some example that can help .
http://jsfiddle.net/anandabhishe/ufv13gfe/
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'line',
},
title: {
text: ' '
},
subtitle: {
text: ' '
},
yAxis : {
//min : 0
//max : 1
//thickInterval: 0
},
xAxis: {
type: 'category',
labels: {
useHTML: true,
style: {
paddingTop: '10px'
},
formatter: function () {
if ('Q1' === this.value) {
return '<div style="font-weight: bold; color: red;">' + this.value + '</div>';
} else {
return '<div style="font-weight: normal;">' + this.value + '</div>';
}
}
}
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
allowOverlap : true,
useHTML : true,
formatter: function() {
return '<div style="color : white; padding : 5px; border-radius: 5px; background-color : pink; margin : 10px;">' + this.point.linePointLabelValue + '</div>';
}
}
}
},
series: [{
marker: {
symbol: 'circle'
},
"data": [{
"x": 0,
"y": 91800,
"linePointLabelValue": "$91.8K",
"labelFontSize": "14px",
"quarterTitle": "Q1",
"lineColorCode": "red",
"drilldown": "Q1A",
"name": "Q1"
}, {
"x": 1,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "Q2",
"lineColorCode": "red",
"drilldown": "Q2A",
"name": "Q2"
}, {
"x": 2,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "Q3",
"lineColorCode": "red",
"drilldown": "Q3A",
"name": "Q3"
}, {
"x": 3,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "Q4",
"lineColorCode": "red",
"drilldown": "Q4A",
"name": "Q4"
}]
}, {
marker: {
symbol: 'circle'
},
"data": [{
"x": 0,
"y": 92900,
"linePointLabelValue": "$3.4K",
"labelFontSize": "14px",
"quarterTitle": "Q1",
"lineColorCode": "green",
"drilldown": "Q1B",
"name": "Q1"
}, {
"x": 1,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "Q2",
"lineColorCode": "green",
"drilldown": "Q2B",
"name": "Q2",
"marker": {
"radius": 6
}
}, {
"x": 2,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "Q3",
"lineColorCode": "green",
"drilldown": "Q3B",
"name": "Q3"
}, {
"x": 3,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "Q4",
"lineColorCode": "green",
"drilldown": "Q4B",
"name": "Q4"
}]
}],
drilldown: {
activeDataLabelStyle: {
textDecoration: 'none',
},
activeAxisLabelStyle: {
textDecoration: 'none',
},
"series": [{
"id": "Q1A",
marker: {
symbol: 'circle'
},
dataLabels: {
enabled: true,
},
"data": [{
"x": 0,
"y": 12,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "FEB",
"lineColorCode": "green",
"name": "FEB"
}, {
"x": 1,
"y": 24,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "MAR",
"lineColorCode": "green",
"name": "MAR"
}, {
"x": 2,
"y": 34,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "APR",
"lineColorCode": "green",
"name": "APR"
}]
}, {
marker: {
symbol: 'circle'
},
dataLabels: {
enabled: true,
},
"id": "Q2A",
"data": [{
"x": 1100,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "FEB",
"lineColorCode": "green",
"name": "FEB"
}, {
"x": 2100,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "MAR",
"lineColorCode": "green",
"name": "MAR"
}, {
"x": 3100,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "APR",
"lineColorCode": "green",
"name": "APR"
}]
}, {
marker: {
symbol: 'circle'
},
dataLabels: {
enabled: true,
},
"id": "Q3A",
"data": [{
"x": 1200,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "FEB",
"lineColorCode": "green",
"name": "FEB"
}, {
"x": 2200,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "MAR",
"lineColorCode": "green",
"name": "MAR"
}, {
"x": 3200,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "APR",
"lineColorCode": "green",
"name": "APR"
}]
}, {
marker: {
symbol: 'circle'
},
dataLabels: {
enabled: true,
},
"id": "Q4A",
"data": [{
"x": 1300,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "FEB",
"lineColorCode": "green",
"name": "FEB"
}, {
"x": 2300,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "MAR",
"lineColorCode": "green",
"name": "MAR"
}, {
"x": 3300,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "APR",
"lineColorCode": "green",
"name": "APR"
}]
}, {
marker: {
symbol: 'circle'
},
dataLabels: {
enabled: true,
},
"id": "Q1B",
"data": [{
"x": 1400,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "FEB",
"lineColorCode": "green",
"name": "FEB"
}, {
"x": 2400,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "MAR",
"lineColorCode": "green",
"name": "MAR"
}, {
"x": 3400,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "APR",
"lineColorCode": "green",
"name": "APR"
}]
}, {
marker: {
symbol: 'circle'
},
dataLabels: {
enabled: true,
},
"id": "Q2B",
"data": [{
"x": 1410,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "FEB",
"lineColorCode": "green",
"name": "FEB"
}, {
"x": 2410,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "MAR",
"lineColorCode": "green",
"name": "MAR"
}, {
"x": 3410,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "APR",
"lineColorCode": "green",
"name": "APR"
}]
}, {
marker: {
symbol: 'circle'
},
dataLabels: {
enabled: true,
},
"id": "Q3B",
"data": [{
"x": 1420,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "FEB",
"lineColorCode": "green",
"name": "FEB"
}, {
"x": 2420,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "MAR",
"lineColorCode": "green",
"name": "MAR"
}, {
"x": 3420,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "APR",
"lineColorCode": "green",
"name": "APR"
}]
}, {
marker: {
symbol: 'circle'
},
dataLabels: {
enabled: true,
},
"id": "Q4B",
"data": [{
"x": 1430,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "FEB",
"lineColorCode": "green",
"name": "FEB"
}, {
"x": 2430,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "MAR",
"lineColorCode": "green",
"name": "MAR"
}, {
"x": 3430,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "APR",
"lineColorCode": "green",
"name": "APR"
}]
}]
}
});
I suspect that the reason of that unwanted behavior are large (>1000) x axis values of points on drilldown.
In the initial view everything looks good - points have low x values (0, 1, 2 and 3) and categories can be used for them. Highcharts categories mechanism creates labels on x axis starting from 0 and with interval equaled to 1.
So if you suddenly switch to large numbers on x axis Highcharts wants the tickInterval to be preserved. That's cannot happen because the range of values is to wide - ~1500 labels won't fit in.
Highcharts tries to pack as many labels on x axis as possible and finds new value of tickInterval - as small as possible.
Related
Plot bands in highchart export server is not working properly. I want the output same as shown in jsfiddle below.
I want the color plot band to show on y axis with width 20.
This is expected output: https://jsfiddle.net/vc6r8y3n/
Attached image is actual output when we use high-chart export server.
but when I tried same JavaScript json object on
http://export.highcharts.com/
its giving me image with plot band color spread on whole chart. its not considering width for 'y' or 'x' axis in export server. I gave attached image of export chart.
Why highchart behaving differently in both the cases.
Highchart JSON is same as in JSfiddle.
Actual image.
Expected is what it display in Jsfiddle. https://jsfiddle.net/vc6r8y3n/
{
"chart": {
"height": 350,
"width": 600,
"style": {
"fontFamily": "\"Arial\", sans-serif",
"fontSize": "16px"
},
"backgroundColor": "transparent"
},
"title": {
"text": null
},
"credits": {
"enabled": false
},
"legend": {
"align": "center",
"layout": "horizontal",
"verticalAlign": "bottom",
"symbolHeight": 5,
"symbolWidth": 5,
"symbolRadius": 0,
"itemDistance": 10,
"itemStyle": {
"fontSize": "5px",
"fontWeight": "bold",
"fontFamily": "\"Arial\", sans-serif"
},
"borderWidth": 0,
"padding": 0,
"margin": 5
},
"xAxis": {
"categories": [
"Sep-2020",
"Oct-2020",
"Nov-2020",
"Dec-2020",
"Jan-2021",
"Feb-2021"
],
"labels": {
"style": {
"fontSize": "4px",
"fontFamily": "\"Arial\", sans-serif",
"color": "#000"
},
"y": 5
},
"gridLineColor": "transparent",
"gridLineWidth": 0,
"minorGridLineWidth": 0,
"lineColor": "#9A9A9A",
"zIndex": 9999999
},
"yAxis": [
{
"title": {
"text": ""
},
"min": 0,
"max": 100,
"tickInterval": 20,
"plotBands": [
{
"color": "rgb(204,0,0)",
"from": 0,
"to": 30.99,
"zIndex": 3
},
{
"color": "rgb(226,113,113)",
"from": 31,
"to": 44.99,
"zIndex": 3
},
{
"color": "rgb(247,209,34)",
"from": 45,
"to": 54.99,
"zIndex": 3
},
{
"color": "rgb(136,207,136)",
"from": 55,
"to": 68.99,
"zIndex": 3
},
{
"color": "rgb(68,180,68)",
"from": 69,
"to": 87.99,
"zIndex": 3
},
{
"color": "rgb(0,153,0)",
"from": 88,
"to": 100,
"zIndex": 3
}
],
"width": 20
}
],
"plotOptions": {
"column": {
"dataLabels": {
"enabled": true
}
}
},
"series": [
{
"name": "Line1",
"type": "column",
"data": [
{
"y": 61,
"color": "#5b9bd5"
},
{
"y": 41,
"color": "#5b9bd5"
},
{
"y": 21,
"color": "#5b9bd5"
},
{
"y": 81,
"color": "#5b9bd5"
},
{
"y": 31,
"color": "#5b9bd5"
},
{
"y": 71,
"color": "#5b9bd5"
}
],
"color": "#5b9bd5",
"showInLegend": true
},
{
"name": "Line 2",
"type": "column",
"data": [
null,
null,
null,
null,
null,
1
],
"color": "#00B050"
},
{
"name": "Line 3",
"type": "spline",
"data": [
null,
{
"y": 45
},
{
"y": 38
},
{
"y": 32
},
{
"y": 40
},
{
"y": 48
}
],
"color": "#9A0229"
}
]
}
enter image description here
Here is the source code:
https://jsfiddle.net/24zrbqpL/
Highcharts.chart('container', {
"chart": {
"type": "line",
"polar": true
},
"xAxis": {
"min": 0.5,
"max": 6.5,
"categories": ['Clarify Objectives', 'Propose Initiates', 'Prioritise & Select', 'Track Performance', 'Review Portfolio', 'Adjust Course', ''],
"labels": {
"distance": 25
},
"tickmarkPlacement": "on",
"lineWidth": 0,
"gridLineColor": "#575756",
"title": {
"style": {
"fontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", Verdana, Arial, Helvetica, sans-serif",
"color": "#666666",
"fontSize": "30px",
"fontWeight": "normal",
"fontStyle": "normal"
}
}
},
"yAxis": {
"plotBands": [{
"from": 1,
"to": 2,
"color": "#f8c4c0",
"outerRadius": "105%",
"thickness": "50%"
}, {
"from": 2,
"to": 3,
"color": "#f39d96",
"outerRadius": "105%",
"thickness": "50%"
}, {
"from": 3,
"to": 4,
"color": "#ee766d",
"outerRadius": "105%",
"thickness": "50%"
}, {
"from": 4,
"to": 5,
"color": "#eb584d",
"outerRadius": "105%",
"thickness": "50%"
}],
"reversed": true,
"min": 1,
"max": 5,
"allowDecimals": false,
"tickInterval": 1,
"tickAmount": 6,
"tickLength": 10,
"gridLineInterpolation": "polygon",
"gridLineColor": "",
"lineWidth": 0,
"tickmarkPlacement": "between",
"tickPixelInterval": 100,
"tickPosition": "outside",
"labels": {
"enabled": true,
"style": {
"fontWeight": "bold"
},
//"y": 25
}
},
"title": {
"text": "APM Spiderweb"
},
"series": [{
data: [1, 2, 3, 4, 5, 6]
}, {
}],
"plotOptions": {
"series": {
"animation": true,
"lineWidth": 4,
"marker": {
"radius": 8,
"symbol": "circle"
},
"_colorIndex": 0,
"_symbolIndex": 0
}
},
"credits": {
"enabled": false
},
"colors": [
"#7cb5ec",
"#90ed7d",
"#f7a35c",
"#8085e9",
"#f15c80",
"#e4d354",
"#2b908f",
"#f45b5b",
"#91e8e1"
]
});
Setting a whiteSpace to 'nowrap' in the labels.style object is a solution which you are looking for.
"labels": {
"distance": 25,
"style": {
"whiteSpace": 'nowrap'
}
},
Demo: https://jsfiddle.net/BlackLabel/edpcjL3k/
API: https://api.highcharts.com/highcharts/xAxis.labels.style
I have a combined xrange and area chart, where I cannot get the area plot to go to the bottom of the chart view.
This is what I would like:
But this is what I'm getting:
Any help would be greatly appreciated.
https://jsfiddle.net/OysteinAmundsen/ad6shmL0/39/
Highcharts.chart('container', {
"chart": {
"borderWidth": 0,
"zoomType": "x",
"animation": false,
"scrollablePlotArea": { "scrollPositionX": 1 },
"height": 200,
"spacing": [0,0,0,0]
},
"scrollbar": { "enabled": true },
"time": { "useUTC": false },
"title": { "enabled": false },
"legend": { "enabled": false },
"colors": [ "#0032FF" ],
"credits": { "enabled": false },
"plotOptions": {
"area": { "threshold": null },
"xrange": { "minPointLength": 1 }
},
"xAxis": {
"type": "datetime",
"labels": { "overflow": "justify" },
"title": { "text": "Date" }
},
"yAxis": {
"lineWidth": 1,
"tickWidth": 1,
"alternateGridColor": "#F2F2F2",
"title": { "enabled": false },
"categories": [ "Closed", "Open" ],
"max": 1,
"min": -1
},
"tooltip": {
"borderRadius": 6,
"borderColor": "#0032FF",
"useHTML": true
},
"series": [
{
"name": "Proximity",
"type": "xrange",
"turboThreshold": 0,
"borderColor": "gray",
"animation": 0,
"pointWidth": 20,
"colors": [
"#0032FF",
"#0b5668"
],
"data": [
{ "x": 1567077909855, "x2": 1567083603287, "y": 1 },
{ "x": 1567077924011, "x2": 1567077924011, "y": 0 },
{ "x": 1567083619442, "x2": 1567083619442, "y": 1 }
]
},
{
//"turboThreshold": 1000,
"type": "area",
"color": "#f9d5d5",
"lineWidth": 0,
"animation": 0,
"data": [
{ "x": 1566728240265, "y": 0, "name": "Lost connectivity" },
{ "x": 1566728240265, "y": 2, "name": "Loss" },
{ "x": 1567077909855, "y": 2, "name": "Gain" },
{ "x": 1567077909855, "y": 0, "name": "Gained connectivity" },
{ "x": 1567085295420, "y": 0, "name": "Lost connectivity" },
{ "x": 1567085295420, "y": 2, "name": "Loss" },
{ "x": 1567085533152, "y": 2, "name": "Gain" },
{ "x": 1567085533152, "y": 0, "name": "Gained connectivity" }
]
}
]
});
Instead of area series type use xAxis.plotBands:
xAxis: {
type: 'datetime',
plotBands: [{
from: 1567079711855,
to: 1567077909855,
color: '#f9d5d5'
}, {
from: 1567082015102,
to: 1567079910825,
color: '#f9d5d5'
}]
}
Demo:
https://jsfiddle.net/BlackLabel/y706czmo
API reference:
https://api.highcharts.com/highcharts/xAxis.plotBands
I have a line chart that is used to show milestone events. So the xaxis is the date. If the data has more than one event on the same date, I offset the y value so that the point markers are stacked vertically. I don't want to make the y offset too big because that would make it hard to handle multiple markers on the same date. The markers also have a hover. Problem is that when I hover near a marker, only one marker's hover shows and I can only click on one marker.
See this jsfiddle with the label "Upgrade": http://jsfiddle.net/MichaelWitt/adun8km8/1/
You cannot click on this, but you can see the behavior on the hover as you cannot get the blue triangle to hover.
Highcharts.chart('container', {
"title": {
"text": null
},
"credits": {
"enabled": false
},
"chart": {
"zoomType": "x",
"type": "line",
"plotBackgroundImage": null,
"backgroundColor": "transparent",
"height": 330,
"borderWidth": 0,
"top": 0,
"marginTop": 0,
"marginBottom": 150,
"marginLeft": 120
},
"legend": {
"enabled": false,
"align": "left",
"verticalAlign": "top",
"layout": "vertical",
"x": 0,
"y": 0,
"useHTML": false,
"itemMarginTop": 4,
"itemHoverStyle": {
"color": "#3094d1",
"font": "Helvetica Neue, Helvetica, Arial, sans-serif",
"fontSize": "10px",
"fontWeight": "normal"
},
"itemStyle": {
"color": "#404b56",
"font": "Helvetica Neue, Helvetica, Arial, sans-serif",
"fontSize": "12px",
"fontWeight": "normal"
},
"itemHiddenStyle": {
"color": "#caced1",
"font": "Helvetica Neue, Helvetica, Arial, sans-serif",
"fontSize": "12px",
"fontWeight": "normal"
}
},
"xAxis": {
"type": "datetime",
"lineWidth": 0,
"lineColor": "#404b56",
"tickColor": "#404b56",
"tickInterval": 173520000,
"gridLineColor": "#222222",
"labels": {
"style": {
"font": "Helvetica Neue, Helvetica, Arial, sans-serif",
"fontSize": "10px",
"fontWeight": "bold",
"color": "#404b56",
"zIndex": -100
},
"format": "{value:%b %d, %Y}"
}
},
"yAxis": {
"labels": {
"enabled": true,
"style": {
"font": "Helvetica Neue, Helvetica, Arial, sans-serif",
"fontSize": "10px",
"fontWeight": "bold",
"color": "#404b56",
"zIndex": -100
},
"y": 3
},
"gridLineColor": "#dddddd",
"tickColor": "#dddddd",
"title": {
"text": null
},
"tickInterval": 1
},
"plotOptions": {
"series": {
"marker": {
"enabled": true,
"radius": 8,
"symbol": "triangle"
},
"cursor": "pointer",
"events": {},
"point": {
"stickyTracking": false
},
"states": {
"hover": {
"enabled": true,
"lineWidth": 0,
"lineWidthPlus": 0
}
}
},
"line": {
"lineWidth": 0,
"stickyTracking": false
}
},
"series": [{
"name": "Upgrade",
"data": [{
"x": 1510203600000,
"y": 0,
"name": "Upgrade",
"key": 158,
"shortDesc": "test",
"status": "Planned",
"marker": {
"symbol": "triangle",
"radius": 7,
"fillColor": "#3498db",
"states": {
"hover": {
"fillColor": "#3498db"
},
"select": {
"fillColor": "#3498db"
}
}
}
}, {
"x": 1510203600000,
"y": 0.25,
"name": "Upgrade",
"key": 159,
"shortDesc": "test",
"status": "Complete",
"marker": {
"symbol": "diamond",
"radius": 7,
"fillColor": "#2ecc71",
"states": {
"hover": {
"fillColor": "#2ecc71"
},
"select": {
"fillColor": "#2ecc71"
}
}
}
}],
"color": "#1abc9c",
"stickyTracking": false
}, {
"name": "Refresh",
"data": [{
"x": 1509336000000,
"y": 1,
"name": "Refresh",
"key": 160,
"shortDesc": "test",
"status": "Late",
"marker": {
"symbol": "square",
"radius": 7,
"fillColor": "#e74c3c",
"states": {
"hover": {
"fillColor": "#e74c3c"
},
"select": {
"fillColor": "#e74c3c"
}
}
}
}],
"color": "#036192",
"stickyTracking": false
}],
"tooltip": {
"followPointer": false,
"followTouchMove": false,
"shared": false,
"backgroundColor": {
"linearGradient": {
"x1": 0,
"y1": 0,
"x2": 0,
"y2": 1
},
"stops": [
[0, "rgba(96, 96, 96, .8)"],
[1, "rgba(16, 16, 16, .8)"]
]
},
"borderWidth": 0,
"style": {
"color": "#FFF"
}
}
}
Points in a line series, by default, are being tracked in x dimension. You can change that by setting series.findNearestPointBy option to 'xy'.
findNearestPointBy: String
Determines whether the series should look for the nearest point in both dimensions or just the x-dimension when hovering the series. Defaults to 'xy' for scatter series and 'x' for most other series. If the data has duplicate x-values, it is recommended to set this to 'xy' to allow hovering over all points.
"plotOptions": {
"series": {
"findNearestPointBy": "xy",
...
}
}
Live example: http://jsfiddle.net/120pm1m7/
I have a line chart with a date/time x axis. The points have a name that is converted to local time. However, the tick marks are placed at UTC midnight. How can I get them to be placed at local midnight?
To clarify, my localtime is EDT (-04:00). So, at approximately 20:00, the tick mark is shown.
var chart = Highcharts.chart('container', {
"chart": {
"type": "line",
"height": 300,
"marginLeft": 60,
"marginRight": 0,
"spacingLeft": 0,
"spacingRight": 0,
"style": {
"fontSize": 14
},
"zoomType": "x"
},
"tooltip": {
"pointFormat": "{point.y}",
"style": {
"fontSize": 14
}
},
"exporting": {
"enabled": false
},
"title": {
"text": "",
"style": {
"display": "none"
}
},
"subtitle": {
"text": "",
"style": {
"display": "none"
}
},
"legend": {
"enabled": "false"
},
"xAxis": {
"type": "datetime",
"labels": {
"enabled": true,
"style": {
"fontSize": "12px"
}
},
"title": {
"text": null
},
"minTickInterval": 86400000
},
"plotOptions": {
"line": {
"color": "#33aaee",
"step": "true",
"lineWidth": 1
}
},
"credits": {
"enabled": false
},
"series": [{
"data": [{
"x": 1499935040582,
"y": 600.8919674194846,
"name": "Jul 13, 2017 4:37 AM"
}, {
"x": 1500069665426,
"y": 600.3026594460489,
"name": "Jul 14, 2017 6:01 PM"
}, {
"x": 1500133689471,
"y": 600.7274040373635,
"name": "Jul 15, 2017 11:48 AM"
}, {
"x": 1500197550895,
"y": 600.1197607401385,
"name": "Jul 16, 2017 5:32 AM"
}, {
"x": 1500224766324,
"y": 600.2311428390589,
"name": "Jul 16, 2017 1:06 PM"
}, {
"x": 1500247544551,
"y": 600.5511455212492,
"name": "Jul 16, 2017 7:25 PM"
}, {
"x": 1500282216949,
"y": 600.2677789206001,
"name": "Jul 17, 2017 5:03 AM"
}, {
"x": 1500285249151,
"y": 600.3165520296044,
"name": "Jul 17, 2017 5:54 AM"
}, {
"x": 1500472917987,
"y": 600.6858600814295,
"name": "Jul 19, 2017 10:01 AM"
}, {
"x": 1500479945476,
"y": 600.6974345877289,
"name": "Jul 19, 2017 11:59 AM"
}],
"showInLegend": false,
"allowPointSelect": true
}]
});
Here is a fiddle showing this.
Highcharts fiddle
Change you epoch's to a javascript date [new Date(epoch)] this will have the date/time fields show in local time instead of UTC.
"series": [{
"data": [{
"x": new Date(1499935040582),
"y": 600.8919674194846
}, {
"x": new Date(1500069665426),
"y": 600.3026594460489
}, {
"x": new Date(1500133689471),
"y": 600.7274040373635
}, {
"x": new Date(1500197550895),
"y": 600.1197607401385
}, {
"x": new Date(1500224766324),
"y": 600.2311428390589
}, {
"x": new Date(1500247544551),
"y": 600.5511455212492
}, {
"x": new Date(1500282216949),
"y": 600.2677789206001
}, {
"x": new Date(1500285249151),
"y": 600.3165520296044
}, {
"x": new Date(1500472917987),
"y": 600.6858600814295
}, {
"x": new Date(1500479945476),
"y": 600.6974345877289
}],
This should keeps your chart in scale with your local time zone
Found an answer to my problem. I am using moment.js to format the time data, so I changed it from:
chart.series[0].data.push({ x: moment(grp.Time).format('x'),
y: grp.DoubleValue, name: moment(grp.Time).format(this.config.get('momentFullDateTimeFormat')) });
to:
chart.series[0].data.push({ x: moment(grp.Time).utc(true).format('x'),
y: grp.DoubleValue, name: moment(grp.Time).format(this.config.get('momentFullDateTimeFormat')) });
So basically I added the ".utc(true)" to the moment definition for the x value.