We Keep Coding

Highcharts - how to prevent xAxis redraw when using addSeries?

I have a highstocks scatter chart and after the series data is initialised I add a line of best fit (once I've calculated the endpoints) using addSeries.
The problem I am having is that when I add my new series the xAxis datetime labels all disappear (they are originally drawn correctly). It seems like because the new series only has two points, the chart redraws the xAxis to cater for the new series and draws it with only a single datetime label.
Looks very similar to this issue which was never solved
How can I avoid this happening?
I can't share my actual code as it's embedded in a Java widget on a proprietary framework but this Fiddle shows the same behaviour
Highcharts.chart('container', {
chart: {
type: 'scatter',
zoomType: 'x'
},
title: {
text: 'Random data'
},
xAxis: {
title: {
enabled: true,
text: 'Height (cm)'
},
type: 'datetime' //,
// startOnTick: true,
// endOnTick: true,
// showLastLabel: true
},
exporting: {
buttons: {
customButton: {
text: 'Add Series',
onclick: function() {
var newRegressionLineSeries = {
type: 'line',
name: 'Line series',
data: [
[Date.UTC(2015, 2, 26), 0.8],
[Date.UTC(2015, 6, 28), 0.7]
],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
enableMouseTracking: false
};
this.addSeries(newRegressionLineSeries);
}
}
}
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} cm, {point.y} kg'
}
}
},
series: [{
name: 'Data',
color: 'rgba(223, 83, 83, .5)',
data: [
[Date.UTC(2015, 2, 26), 0.9188],
[Date.UTC(2015, 2, 27), 0.9184],
[Date.UTC(2015, 2, 29), 0.9188],
[Date.UTC(2015, 2, 30), 0.9231],
[Date.UTC(2015, 2, 31), 0.9319],
[Date.UTC(2015, 3, 1), 0.9291],
[Date.UTC(2015, 3, 2), 0.9188],
[Date.UTC(2015, 3, 3), 0.9109],
[Date.UTC(2015, 3, 5), 0.9091],
[Date.UTC(2015, 3, 6), 0.9154],
[Date.UTC(2015, 3, 7), 0.9246],
[Date.UTC(2015, 3, 8), 0.9276],
[Date.UTC(2015, 3, 9), 0.9382],
[Date.UTC(2015, 3, 10), 0.9431],
[Date.UTC(2015, 3, 12), 0.9426],
[Date.UTC(2015, 3, 13), 0.9463],
[Date.UTC(2015, 3, 14), 0.9386],
[Date.UTC(2015, 3, 15), 0.9357],
[Date.UTC(2015, 3, 16), 0.9293],
[Date.UTC(2015, 3, 17), 0.9254],
[Date.UTC(2015, 3, 19), 0.9251],
[Date.UTC(2015, 3, 20), 0.9312],
[Date.UTC(2015, 3, 21), 0.9315],
[Date.UTC(2015, 3, 22), 0.9323],
[Date.UTC(2015, 3, 23), 0.9236],
[Date.UTC(2015, 3, 24), 0.9196],
[Date.UTC(2015, 3, 26), 0.9201],
[Date.UTC(2015, 3, 27), 0.9184],
[Date.UTC(2015, 3, 28), 0.9106],
[Date.UTC(2015, 3, 29), 0.8983],
[Date.UTC(2015, 3, 30), 0.8909],
[Date.UTC(2015, 4, 1), 0.8928],
[Date.UTC(2015, 4, 3), 0.8941],
[Date.UTC(2015, 4, 4), 0.8972],
[Date.UTC(2015, 4, 5), 0.8940],
[Date.UTC(2015, 4, 6), 0.8808],
[Date.UTC(2015, 4, 7), 0.8876],
[Date.UTC(2015, 4, 8), 0.8925],
[Date.UTC(2015, 4, 10), 0.8934],
[Date.UTC(2015, 4, 11), 0.8964],
[Date.UTC(2015, 4, 12), 0.8917],
[Date.UTC(2015, 4, 13), 0.8805],
[Date.UTC(2015, 4, 14), 0.8764],
[Date.UTC(2015, 4, 15), 0.8732],
[Date.UTC(2015, 4, 17), 0.8737],
[Date.UTC(2015, 4, 18), 0.8838],
[Date.UTC(2015, 4, 19), 0.8969],
[Date.UTC(2015, 4, 20), 0.9014],
[Date.UTC(2015, 4, 21), 0.8999],
[Date.UTC(2015, 4, 22), 0.9076],
[Date.UTC(2015, 4, 24), 0.9098],
[Date.UTC(2015, 4, 25), 0.9110],
[Date.UTC(2015, 4, 26), 0.9196],
[Date.UTC(2015, 4, 27), 0.9170],
[Date.UTC(2015, 4, 28), 0.9133],
[Date.UTC(2015, 4, 29), 0.9101],
[Date.UTC(2015, 4, 31), 0.9126],
[Date.UTC(2015, 5, 1), 0.9151],
[Date.UTC(2015, 5, 2), 0.8965],
[Date.UTC(2015, 5, 3), 0.8871],
[Date.UTC(2015, 5, 4), 0.8898],
[Date.UTC(2015, 5, 5), 0.8999],
[Date.UTC(2015, 5, 7), 0.9004],
[Date.UTC(2015, 5, 8), 0.8857],
[Date.UTC(2015, 5, 9), 0.8862],
[Date.UTC(2015, 5, 10), 0.8829],
[Date.UTC(2015, 5, 11), 0.8882],
[Date.UTC(2015, 5, 12), 0.8873],
[Date.UTC(2015, 5, 14), 0.8913],
[Date.UTC(2015, 5, 15), 0.8862],
[Date.UTC(2015, 5, 16), 0.8891],
[Date.UTC(2015, 5, 17), 0.8821],
[Date.UTC(2015, 5, 18), 0.8802],
[Date.UTC(2015, 5, 19), 0.8808],
[Date.UTC(2015, 5, 21), 0.8794],
[Date.UTC(2015, 5, 22), 0.8818],
[Date.UTC(2015, 5, 23), 0.8952],
[Date.UTC(2015, 5, 24), 0.8924],
[Date.UTC(2015, 5, 25), 0.8925],
[Date.UTC(2015, 5, 26), 0.8955],
[Date.UTC(2015, 5, 28), 0.9113],
[Date.UTC(2015, 5, 29), 0.8900],
[Date.UTC(2015, 5, 30), 0.8950],
[Date.UTC(2015, 6, 1), 0.8950],
[Date.UTC(2015, 6, 2), 0.8750],
[Date.UTC(2015, 6, 3), 0.8650],
[Date.UTC(2015, 6, 4), 0.8550],
[Date.UTC(2015, 6, 5), 0.8150],
[Date.UTC(2015, 6, 6), 0.8100],
[Date.UTC(2015, 6, 7), 0.8070],
[Date.UTC(2015, 6, 8), 0.8050],
[Date.UTC(2015, 6, 9), 0.7990],
[Date.UTC(2015, 6, 10), 0.7900],
[Date.UTC(2015, 6, 11), 0.7850],
[Date.UTC(2015, 6, 12), 0.7800],
[Date.UTC(2015, 6, 13), 0.7750],
[Date.UTC(2015, 6, 14), 0.7700],
[Date.UTC(2015, 6, 15), 0.7650],
[Date.UTC(2015, 6, 16), 0.7600],
[Date.UTC(2015, 6, 17), 0.7550],
[Date.UTC(2015, 6, 18), 0.7500],
[Date.UTC(2015, 6, 19), 0.7450],
[Date.UTC(2015, 6, 20), 0.7400],
[Date.UTC(2015, 6, 21), 0.7350],
[Date.UTC(2015, 6, 22), 0.7250],
[Date.UTC(2015, 6, 23), 0.7150],
[Date.UTC(2015, 6, 24), 0.7050],
[Date.UTC(2015, 6, 25), 0.6900],
[Date.UTC(2015, 6, 26), 0.6750],
[Date.UTC(2015, 6, 27), 0.6600],
[Date.UTC(2015, 6, 28), 0.6300],
]
}]
});

An easy workaround would be to create a new axis and put the lines with insufficient points on that axis.
I updated the fiddle you provided to achieve this in the following way:
Add new xAxis:
xAxis: [{
id: '0',
title: {
enabled: true,
text: 'Height (cm)'
},
type: 'datetime'
},{
id: '1', //new axis ID
type: 'datetime',
visible: false,
linkedTo: '0'
}],
New lines are added to the new xAxis:
var newRegressionLineSeries = {
xAxis: '1', //Added this
type: 'line',
...
}
Working example: https://jsfiddle.net/xs9toj13/9/

How to show all data in Highchart

How do I ensure that the data are close to each other & sorting by datetime. I want show all data with datetime
var charts = Highcharts.chart('container', {
xAxis: {
type: 'datetime'
},
series: [{
type: 'area',
data: [
[Date.UTC(2015, 9, 25, 14, 13, 00), 3.500],
[Date.UTC(2015, 9, 25, 14, 13, 02), 3.501],
[Date.UTC(2015, 9, 25, 14, 13, 04), 3.502],
[Date.UTC(2015, 9, 25, 14, 13, 06), 3.505],
[Date.UTC(2015, 9, 25, 14, 13, 08), 3.509],
[Date.UTC(2015, 9, 25, 14, 13, 10), 3.507],
[Date.UTC(2015, 9, 25, 14, 13, 12), 3.510],
[Date.UTC(2015, 9, 25, 14, 13, 14), 3.525],
[Date.UTC(2015, 9, 25, 14, 13, 16), 3.536],
[Date.UTC(2015, 9, 25, 14, 13, 18), 3.575],
[Date.UTC(2015, 9, 25, 14, 13, 20), 3.595],
[Date.UTC(2015, 9, 25, 14, 13, 22), 3.514],
[Date.UTC(2015, 9, 25, 14, 13, 24), 3.525],
[Date.UTC(2015, 9, 25, 14, 13, 26), 3.536],
[Date.UTC(2015, 9, 25, 14, 13, 28), 3.514],
[Date.UTC(2015, 9, 25, 14, 13, 30), 3.510],
[Date.UTC(2015, 9, 25, 14, 13, 32), 3.523],
[Date.UTC(2015, 9, 25, 14, 13, 34), 3.596],
[Date.UTC(2015, 9, 26, 18, 13, 34), 4.596]
]
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

In addition to what #Z. Bagley wrote, to resolve this problem you can use couple solutions. The first one would be concerning using Highstock chart. In Highstock chart there is a property called ordinal (true by default) which distributes points equally on xAxis. Secondly, you can use breaks along with setting a new xAxis extremes to decrease distance between the last two dates. You can also try to add a scrollbar.
API Reference:
http://api.highcharts.com/highstock/xAxis.ordinal
http://api.highcharts.com/highcharts/xAxis.breaks
http://api.highcharts.com/highstock/scrollbar
Examples:
http://jsfiddle.net/pbdor59x/ - using Highstock and ordinal property
http://jsfiddle.net/abwpqs19/ - using breaks
http://jsfiddle.net/4cc2n3sp/ - using scrollbar

highcharts.js how to force x-Axis label to display all months regardless of chart size

i am working on a area charts.
http://jsfiddle.net/b8eoszt0/
my example is a bit complex or different from the ones we usually see.
for the data structure, i have 4 weeks aggregated data for each month
eg: Sep1-7: 0, Sep8-15: 20 and so on.
the chart works fine, it displays all data points (5 points each month)
However, for the x-axis labels, what i wanted is to always display "Sep, Oct, Nov, Dec, Jan", regardless what chart size is, because right now, if you resize the broswer, the chart resize, and the a-axis labels are change. sometimes there is less items, sometimes there is more.
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
xAxis: {
opposite: true,
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
day: '%b %e',
week: '%b %e',
month: '%b'
},
lineWidth: 0,
startOnTick: false,
endOnTick: false,
tickWidth: 0
},
yAxis: {
gridLineWidth: 0
},
series:[
{
showInLegend: false,
data: [
[Date.UTC(2015, 8, 1), 0],
[Date.UTC(2015, 8, 8), 30],
[Date.UTC(2015, 8, 15), 20],
[Date.UTC(2015, 8, 22), 50],
[Date.UTC(2015, 8, 29), 20],
[Date.UTC(2015, 9, 1), 0],
[Date.UTC(2015, 9, 8), 30],
[Date.UTC(2015, 9, 15), 20],
[Date.UTC(2015, 9, 22), 50],
[Date.UTC(2015, 9, 29), 20],
[Date.UTC(2015, 10, 1), 0],
[Date.UTC(2015, 10, 8), 30],
[Date.UTC(2015, 10, 15), 20],
[Date.UTC(2015, 10, 22), 50],
[Date.UTC(2015, 10, 29), 20],
[Date.UTC(2015, 11, 1), 0],
[Date.UTC(2015, 11, 8), 30],
[Date.UTC(2015, 11, 15), 20],
[Date.UTC(2015, 11, 22), 50],
[Date.UTC(2015, 11, 29), 20],
[Date.UTC(2016, 0, 1), 0],
[Date.UTC(2016, 0, 8), 30],
[Date.UTC(2016, 0, 15), 20],
[Date.UTC(2016, 0, 22), 50],
[Date.UTC(2016, 0, 29), 20],
]
}
],
});
});
i have tried pointinterval, but it doesn't allow Month.
i have tried labels formatter, but it doesnt returns all labels, it seems hightcharts did some filtering before getting into formatter functions.

You can set type on the axis and define your unit.
Check fiddle. I have added the following code in your xAxis. Hope this helps.
type: 'datetime',
units: [
[
'month', [1, 3, 6]
]
]
The first number of the array defines the interval, so for every month I have set 1, you you were to display label only two months the first value would be 2. The next numbers on the array are for allowed multiples, for your requirement this is not needed, a simple 'month', [1] would do. Check the Api Reference for more information.

You can use tickPositioner, for example: http://jsfiddle.net/b8eoszt0/2/
tickPositioner: function(min, max) {
var ticks = this.tickPositions, // original ticks
newTicks = [], // container for a new ticks
start = new Date(ticks[0]); // first tick
// render tick in a first day of the month
start.setDate(1);
// add labels, one for every month:
while (min <= max) {
start.setMonth(start.getMonth() + 1);
min = start.getTime();
newTicks.push(min);
}
// store original info of labels:
newTicks.info = ticks.info;
return newTicks;
},

highcart.js pointInterval for 15 days datetime x-axis

I want the time interval to be half month for x-axis. I figured out I can use pointInterval, but I am not sure why it doesn't work as expected
http://jsfiddle.net/nizsu/otatsrbq/
I expect the x-axis value to be: Aug 26, Sep 11, Sep 26
html
<div class="module" id="changelist">
<div id="chart1" style="min-width: 90%; height: 400px; margin: 0 auto"></div>
</div>
js
$(function () {
$('#chart1').highcharts({
xAxis: {
type: 'datetime',
pointInterval: 13 * 24 * 3600 * 1000, //half month interval
pointStart: Date.UTC(2014, 7, 26),
dateTimeLabelFormats: {
month: '%b %e',
year: '%b'
}
},
series: [{
name: 'New Visits',
data: [
[Date.UTC(2014, 7, 26), 50],
[Date.UTC(2014, 7, 27), 60],
[Date.UTC(2014, 7, 28), 65],
[Date.UTC(2014, 7, 29), 70],
[Date.UTC(2014, 7, 30), 20],
[Date.UTC(2014, 7, 31), 10],
[Date.UTC(2014, 8, 1), 75],
[Date.UTC(2014, 8, 2), 80],
[Date.UTC(2014, 8, 3), 85],
[Date.UTC(2014, 8, 4), 77],
[Date.UTC(2014, 8, 5), 70],
[Date.UTC(2014, 8, 6), 20],
[Date.UTC(2014, 8, 7), 17],
[Date.UTC(2014, 8, 8), 80],
[Date.UTC(2014, 8, 9), 75],
[Date.UTC(2014, 8, 10), 73],
[Date.UTC(2014, 8, 11), 78],
[Date.UTC(2014, 8, 12), 82],
[Date.UTC(2014, 8, 13), 15],
[Date.UTC(2014, 8, 14), 18],
[Date.UTC(2014, 8, 15), 65],
[Date.UTC(2014, 8, 16), 70],
[Date.UTC(2014, 8, 17), 67],
[Date.UTC(2014, 8, 18), 73],
[Date.UTC(2014, 8, 19), 80],
[Date.UTC(2014, 8, 20), 17],
[Date.UTC(2014, 8, 21), 22],
[Date.UTC(2014, 8, 22), 65],
[Date.UTC(2014, 8, 23), 63],
[Date.UTC(2014, 8, 24), 68],
[Date.UTC(2014, 8, 25), 65],
[Date.UTC(2014, 8, 26), 70]
]
}, {
name: 'Total Visits',
data: [
[Date.UTC(2014, 7, 26), 75],
[Date.UTC(2014, 7, 27), 78],
[Date.UTC(2014, 7, 28), 80],
[Date.UTC(2014, 7, 29), 85],
[Date.UTC(2014, 7, 30), 35],
[Date.UTC(2014, 7, 31), 30],
[Date.UTC(2014, 8, 1), 90],
[Date.UTC(2014, 8, 2), 95],
[Date.UTC(2014, 8, 3), 95],
[Date.UTC(2014, 8, 4), 97],
[Date.UTC(2014, 8, 5), 93],
[Date.UTC(2014, 8, 6), 30],
[Date.UTC(2014, 8, 7), 25],
[Date.UTC(2014, 8, 8), 90],
[Date.UTC(2014, 8, 9), 95],
[Date.UTC(2014, 8, 10), 93],
[Date.UTC(2014, 8, 11), 99],
[Date.UTC(2014, 8, 12), 95],
[Date.UTC(2014, 8, 13), 35],
[Date.UTC(2014, 8, 14), 30],
[Date.UTC(2014, 8, 15), 95],
[Date.UTC(2014, 8, 16), 94],
[Date.UTC(2014, 8, 17), 92],
[Date.UTC(2014, 8, 18), 95],
[Date.UTC(2014, 8, 19), 100],
[Date.UTC(2014, 8, 20), 30],
[Date.UTC(2014, 8, 21), 33],
[Date.UTC(2014, 8, 22), 95],
[Date.UTC(2014, 8, 23), 91],
[Date.UTC(2014, 8, 24), 90],
[Date.UTC(2014, 8, 25), 94],
[Date.UTC(2014, 8, 26), 95]
]
}]
});
});

The setting you want is tickInterval, not point interval. You also need to specify startOnTick: true to make it start on your first point.
xAxis: {
type: 'datetime',
tickInterval: 13 * 24 * 3600 * 1000, //half month interval
pointStart: Date.UTC(2014, 7, 26),
startOnTick: true,
dateTimeLabelFormats: {
month: '%b %e',
year: '%b'
}
},
http://jsfiddle.net/pdy4deew/

How to compare weekly data?

I want to display multiple weeks data based on day of the week. (Very similar to what Google analytics shows while comparing weekly page views)
Besides formatting the x label:
xAxis: {
type: 'datetime',
labels: {
formatter : function () {
var d= new Date(this.value);
return d.getDay();
}
}
what other config do I need to set?
$(function () {
$('#container').highcharts({
chart: {
type: 'spline'
},
title: {
text: 'Page View'
},
subtitle: {
text: 'Weekly Comparison'
},
xAxis: {
type: 'datetime',
labels: {
formatter : function () {
var d= new Date(this.value);
return d.getDay();
}
},
title: {
text: 'Day of the week'
}
},
yAxis: {
title: {
text: 'Page Views'
},
min: 0
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
},
series: [{
name: 'Week 2',
// Define the data points. All series have a dummy year
// of 1970/71 in order to be compared on the same x axis. Note
// that in JavaScript, months start at 0 for January, 1 for February etc.
data: [
[Date.UTC(2014,10,10, 2, 0), 44863],
[Date.UTC(2014,10,10, 3, 0), 48086],
[Date.UTC(2014,10,10, 4, 0), 46674],
[Date.UTC(2014,10,10, 5, 0), 41468],
[Date.UTC(2014,10,10, 6, 0), 39367],
[Date.UTC(2014,10,10, 7, 0), 42052],
[Date.UTC(2014,10,10, 8, 0), 43511],
[Date.UTC(2014,10,10, 9, 0), 35663],
[Date.UTC(2014,10,10, 10, 0), 35832],
[Date.UTC(2014,10,10, 11, 0), 39495],
[Date.UTC(2014,10,10, 12, 0), 39038],
[Date.UTC(2014,10,10, 13, 0), 43969],
[Date.UTC(2014,10,10, 14, 0), 51427],
[Date.UTC(2014,10,10, 15, 0), 59542],
[Date.UTC(2014,10,10, 16, 0), 53141],
[Date.UTC(2014,10,10, 17, 0), 53176],
[Date.UTC(2014,10,10, 18, 0), 57119],
[Date.UTC(2014,10,10, 19, 0), 56996],
[Date.UTC(2014,10,10, 20, 0), 63539],
[Date.UTC(2014,10,10, 21, 0), 69481],
[Date.UTC(2014,10,10, 22, 0), 65675],
[Date.UTC(2014,10,10, 23, 0), 60884],
[Date.UTC(2014,10,11, 0, 0), 53482],
[Date.UTC(2014,10,11, 1, 0), 49271],
[Date.UTC(2014,10,11, 2, 0), 46809],
[Date.UTC(2014,10,11, 3, 0), 45538],
[Date.UTC(2014,10,11, 4, 0), 47882],
[Date.UTC(2014,10,11, 5, 0), 40072],
[Date.UTC(2014,10,11, 6, 0), 32432],
[Date.UTC(2014,10,11, 7, 0), 38227],
[Date.UTC(2014,10,11, 8, 0), 32454],
[Date.UTC(2014,10,11, 9, 0), 35582],
[Date.UTC(2014,10,11, 10, 0), 30703],
[Date.UTC(2014,10,11, 11, 0), 34655],
[Date.UTC(2014,10,11, 12, 0), 33566],
[Date.UTC(2014,10,11, 13, 0), 40084],
[Date.UTC(2014,10,11, 14, 0), 44210],
[Date.UTC(2014,10,11, 15, 0), 56748],
[Date.UTC(2014,10,11, 16, 0), 56700],
[Date.UTC(2014,10,11, 17, 0), 60326],
[Date.UTC(2014,10,11, 18, 0), 63289],
[Date.UTC(2014,10,11, 19, 0), 60122],
[Date.UTC(2014,10,11, 20, 0), 57214],
[Date.UTC(2014,10,11, 21, 0), 57609],
[Date.UTC(2014,10,11, 22, 0), 59149],
[Date.UTC(2014,10,11, 23, 0), 56632],
[Date.UTC(2014,10,12, 2, 0), 19928],
[Date.UTC(2014,10,12, 3, 0), 44005],
[Date.UTC(2014,10,12, 4, 0), 44439],
[Date.UTC(2014,10,12, 5, 0), 40798],
[Date.UTC(2014,10,12, 6, 0), 38766],
[Date.UTC(2014,10,12, 7, 0), 38498],
[Date.UTC(2014,10,12, 8, 0), 38241],
[Date.UTC(2014,10,12, 9, 0), 39251],
[Date.UTC(2014,10,12, 10, 0), 39571],
[Date.UTC(2014,10,12, 11, 0), 40337],
[Date.UTC(2014,10,12, 12, 0), 41540],
[Date.UTC(2014,10,12, 13, 0), 47470],
[Date.UTC(2014,10,12, 14, 0), 51736],
[Date.UTC(2014,10,12, 15, 0), 60009],
[Date.UTC(2014,10,12, 16, 0), 60912],
[Date.UTC(2014,10,12, 17, 0), 64551],
[Date.UTC(2014,10,12, 18, 0), 65835],
[Date.UTC(2014,10,12, 19, 0), 64333],
[Date.UTC(2014,10,12, 20, 0), 61937],
[Date.UTC(2014,10,12, 21, 0), 63622],
[Date.UTC(2014,10,12, 22, 0), 61360],
[Date.UTC(2014,10,12, 23, 0), 56693],
[Date.UTC(2014,10,13, 0, 0), 52152],
[Date.UTC(2014,10,13, 1, 0), 54164],
[Date.UTC(2014,10,13, 2, 0), 46321],
[Date.UTC(2014,10,13, 3, 0), 45620],
[Date.UTC(2014,10,13, 4, 0), 45646],
[Date.UTC(2014,10,13, 5, 0), 45568],
[Date.UTC(2014,10,13, 6, 0), 30890],
[Date.UTC(2014,10,13, 7, 0), 39329],
[Date.UTC(2014,10,13, 8, 0), 46179],
[Date.UTC(2014,10,13, 9, 0), 44268],
[Date.UTC(2014,10,13, 10, 0), 61705],
[Date.UTC(2014,10,13, 11, 0), 51566],
[Date.UTC(2014,10,13, 12, 0), 60420],
[Date.UTC(2014,10,13, 13, 0), 61674],
[Date.UTC(2014,10,13, 14, 0), 61817],
[Date.UTC(2014,10,13, 15, 0), 63504],
[Date.UTC(2014,10,13, 16, 0), 58999],
[Date.UTC(2014,10,13, 17, 0), 57214],
[Date.UTC(2014,10,13, 18, 0), 60121],
[Date.UTC(2014,10,13, 19, 0), 59749],
[Date.UTC(2014,10,13, 20, 0), 59571],
[Date.UTC(2014,10,13, 21, 0), 52438],
[Date.UTC(2014,10,13, 22, 0), 61843],
[Date.UTC(2014,10,13, 23, 0), 55733],
[Date.UTC(2014,10,14, 0, 0), 55099],
[Date.UTC(2014,10,14, 1, 0), 44502],
[Date.UTC(2014,10,14, 2, 0), 46755],
[Date.UTC(2014,10,14, 3, 0), 44625],
[Date.UTC(2014,10,14, 4, 0), 43113],
[Date.UTC(2014,10,14, 5, 0), 46011],
[Date.UTC(2014,10,14, 6, 0), 45463],
[Date.UTC(2014,10,14, 7, 0), 52228],
[Date.UTC(2014,10,14, 8, 0), 43481],
[Date.UTC(2014,10,14, 9, 0), 53750],
[Date.UTC(2014,10,14, 10, 0), 53618],
[Date.UTC(2014,10,14, 11, 0), 54726],
[Date.UTC(2014,10,14, 12, 0), 59496],
[Date.UTC(2014,10,14, 13, 0), 61958],
[Date.UTC(2014,10,14, 14, 0), 55828],
[Date.UTC(2014,10,14, 15, 0), 62818],
[Date.UTC(2014,10,14, 16, 0), 59388],
[Date.UTC(2014,10,14, 17, 0), 61562],
[Date.UTC(2014,10,14, 18, 0), 60652],
[Date.UTC(2014,10,14, 19, 0), 57677],
[Date.UTC(2014,10,14, 20, 0), 58185],
[Date.UTC(2014,10,14, 21, 0), 59622],
[Date.UTC(2014,10,14, 22, 0), 51659],
[Date.UTC(2014,10,14, 23, 0), 51320],
[Date.UTC(2014,10,15, 0, 0), 45854],
[Date.UTC(2014,10,15, 1, 0), 47269],
[Date.UTC(2014,10,15, 2, 0), 43180],
[Date.UTC(2014,10,15, 3, 0), 41302],
[Date.UTC(2014,10,15, 4, 0), 43015],
[Date.UTC(2014,10,15, 5, 0), 40329],
[Date.UTC(2014,10,15, 6, 0), 40992],
[Date.UTC(2014,10,15, 7, 0), 45368],
[Date.UTC(2014,10,15, 8, 0), 47679],
[Date.UTC(2014,10,15, 9, 0), 45856],
[Date.UTC(2014,10,15, 10, 0), 40170],
[Date.UTC(2014,10,15, 11, 0), 33503],
[Date.UTC(2014,10,15, 12, 0), 35881],
[Date.UTC(2014,10,15, 13, 0), 41414],
[Date.UTC(2014,10,15, 14, 0), 38983],
[Date.UTC(2014,10,15, 15, 0), 45704],
[Date.UTC(2014,10,15, 16, 0), 49468],
[Date.UTC(2014,10,15, 17, 0), 47641],
[Date.UTC(2014,10,15, 18, 0), 48703],
[Date.UTC(2014,10,15, 19, 0), 42255],
[Date.UTC(2014,10,15, 20, 0), 43649],
[Date.UTC(2014,10,15, 21, 0), 43003],
[Date.UTC(2014,10,15, 22, 0), 42210],
[Date.UTC(2014,10,15, 23, 0), 41946],
[Date.UTC(2014,10,16, 0, 0), 39678],
[Date.UTC(2014,10,16, 1, 0), 40341],
[Date.UTC(2014,10,16, 2, 0), 40906],
[Date.UTC(2014,10,16, 3, 0), 44585],
[Date.UTC(2014,10,16, 4, 0), 47818],
[Date.UTC(2014,10,16, 5, 0), 43351],
[Date.UTC(2014,10,16, 6, 0), 46821],
[Date.UTC(2014,10,16, 7, 0), 55088],
[Date.UTC(2014,10,16, 8, 0), 53736],
[Date.UTC(2014,10,16, 9, 0), 47168],
[Date.UTC(2014,10,16, 10, 0), 40686],
[Date.UTC(2014,10,16, 11, 0), 41341],
[Date.UTC(2014,10,16, 12, 0), 38287],
[Date.UTC(2014,10,16, 13, 0), 42382],
[Date.UTC(2014,10,16, 14, 0), 42707],
[Date.UTC(2014,10,16, 15, 0), 48685],
[Date.UTC(2014,10,16, 16, 0), 52091],
[Date.UTC(2014,10,16, 17, 0), 50305],
[Date.UTC(2014,10,16, 18, 0), 49768],
[Date.UTC(2014,10,16, 19, 0), 47123],
[Date.UTC(2014,10,16, 20, 0), 46650],
[Date.UTC(2014,10,16, 21, 0), 48266],
[Date.UTC(2014,10,16, 22, 0), 45569],
[Date.UTC(2014,10,16, 23, 0), 46020]
]
}, {
name: 'Week 1',
data: [
[Date.UTC(2014,10,3, 2, 0), 53020],
[Date.UTC(2014,10,3, 3, 0), 57558],
[Date.UTC(2014,10,3, 4, 0), 53483],
[Date.UTC(2014,10,3, 5, 0), 50456],
[Date.UTC(2014,10,3, 6, 0), 52947],
[Date.UTC(2014,10,3, 7, 0), 54277],
[Date.UTC(2014,10,3, 8, 0), 50552],
[Date.UTC(2014,10,3, 9, 0), 50149],
[Date.UTC(2014,10,3, 10, 0), 50029],
[Date.UTC(2014,10,3, 11, 0), 38256],
[Date.UTC(2014,10,3, 12, 0), 40337],
[Date.UTC(2014,10,3, 13, 0), 46189],
[Date.UTC(2014,10,3, 14, 0), 51514],
[Date.UTC(2014,10,3, 15, 0), 63219],
[Date.UTC(2014,10,3, 16, 0), 64591],
[Date.UTC(2014,10,3, 17, 0), 61393],
[Date.UTC(2014,10,3, 18, 0), 67817],
[Date.UTC(2014,10,3, 19, 0), 61386],
[Date.UTC(2014,10,3, 20, 0), 65867],
[Date.UTC(2014,10,3, 21, 0), 66574],
[Date.UTC(2014,10,3, 22, 0), 60382],
[Date.UTC(2014,10,3, 23, 0), 60641],
[Date.UTC(2014,10,4, 0, 0), 55247],
[Date.UTC(2014,10,4, 1, 0), 52419],
[Date.UTC(2014,10,4, 2, 0), 46820],
[Date.UTC(2014,10,4, 3, 0), 47222],
[Date.UTC(2014,10,4, 4, 0), 47778],
[Date.UTC(2014,10,4, 5, 0), 39777],
[Date.UTC(2014,10,4, 6, 0), 37317],
[Date.UTC(2014,10,4, 7, 0), 41976],
[Date.UTC(2014,10,4, 8, 0), 19841],
[Date.UTC(2014,10,4, 10, 0), 23208],
[Date.UTC(2014,10,4, 11, 0), 36980],
[Date.UTC(2014,10,4, 12, 0), 35626],
[Date.UTC(2014,10,4, 13, 0), 45458],
[Date.UTC(2014,10,4, 14, 0), 48027],
[Date.UTC(2014,10,4, 15, 0), 55338],
[Date.UTC(2014,10,4, 16, 0), 59092],
[Date.UTC(2014,10,4, 17, 0), 58828],
[Date.UTC(2014,10,4, 18, 0), 62777],
[Date.UTC(2014,10,4, 19, 0), 62305],
[Date.UTC(2014,10,4, 20, 0), 60229],
[Date.UTC(2014,10,4, 21, 0), 61429],
[Date.UTC(2014,10,4, 22, 0), 60956],
[Date.UTC(2014,10,4, 23, 0), 53670],
[Date.UTC(2014,10,5, 0, 0), 48931],
[Date.UTC(2014,10,5, 1, 0), 45128],
[Date.UTC(2014,10,5, 2, 0), 45236],
[Date.UTC(2014,10,5, 3, 0), 43054],
[Date.UTC(2014,10,5, 4, 0), 44808],
[Date.UTC(2014,10,5, 5, 0), 37853],
[Date.UTC(2014,10,5, 6, 0), 34829],
[Date.UTC(2014,10,5, 7, 0), 36154],
[Date.UTC(2014,10,5, 8, 0), 31080],
[Date.UTC(2014,10,5, 9, 0), 31078],
[Date.UTC(2014,10,5, 10, 0), 30199],
[Date.UTC(2014,10,5, 11, 0), 34023],
[Date.UTC(2014,10,5, 12, 0), 33804],
[Date.UTC(2014,10,5, 13, 0), 43782],
[Date.UTC(2014,10,5, 14, 0), 48781],
[Date.UTC(2014,10,5, 15, 0), 59048],
[Date.UTC(2014,10,5, 16, 0), 65561],
[Date.UTC(2014,10,5, 17, 0), 62576],
[Date.UTC(2014,10,5, 18, 0), 61725],
[Date.UTC(2014,10,5, 19, 0), 25043],
[Date.UTC(2014,10,5, 20, 0), 56228],
[Date.UTC(2014,10,5, 21, 0), 62749],
[Date.UTC(2014,10,5, 22, 0), 29101],
[Date.UTC(2014,10,5, 23, 0), 54742],
[Date.UTC(2014,10,6, 0, 0), 21550],
[Date.UTC(2014,10,6, 2, 0), 31888],
[Date.UTC(2014,10,6, 3, 0), 44782],
[Date.UTC(2014,10,6, 4, 0), 46152],
[Date.UTC(2014,10,6, 5, 0), 42653],
[Date.UTC(2014,10,6, 6, 0), 38985],
[Date.UTC(2014,10,6, 7, 0), 35073],
[Date.UTC(2014,10,6, 8, 0), 33484],
[Date.UTC(2014,10,6, 9, 0), 33029],
[Date.UTC(2014,10,6, 10, 0), 34496],
[Date.UTC(2014,10,6, 11, 0), 31740],
[Date.UTC(2014,10,6, 12, 0), 34367],
[Date.UTC(2014,10,6, 13, 0), 39546],
[Date.UTC(2014,10,6, 14, 0), 4129],
[Date.UTC(2014,10,6, 15, 0), 4183],
[Date.UTC(2014,10,6, 16, 0), 154024],
[Date.UTC(2014,10,6, 17, 0), 78791],
[Date.UTC(2014,10,6, 18, 0), 61385],
[Date.UTC(2014,10,6, 19, 0), 60317],
[Date.UTC(2014,10,6, 20, 0), 56243],
[Date.UTC(2014,10,6, 21, 0), 46905],
[Date.UTC(2014,10,6, 22, 0), 48009],
[Date.UTC(2014,10,6, 23, 0), 43111],
[Date.UTC(2014,10,7, 0, 0), 50466],
[Date.UTC(2014,10,7, 1, 0), 46026],
[Date.UTC(2014,10,7, 2, 0), 44108],
[Date.UTC(2014,10,7, 3, 0), 51097],
[Date.UTC(2014,10,7, 4, 0), 47623],
[Date.UTC(2014,10,7, 5, 0), 44577],
[Date.UTC(2014,10,7, 6, 0), 39814],
[Date.UTC(2014,10,7, 7, 0), 45559],
[Date.UTC(2014,10,7, 8, 0), 41463],
[Date.UTC(2014,10,7, 9, 0), 37101],
[Date.UTC(2014,10,7, 10, 0), 44765],
[Date.UTC(2014,10,7, 11, 0), 37454],
[Date.UTC(2014,10,7, 12, 0), 34127],
[Date.UTC(2014,10,7, 13, 0), 41724],
[Date.UTC(2014,10,7, 14, 0), 44243],
[Date.UTC(2014,10,7, 15, 0), 58201],
[Date.UTC(2014,10,7, 16, 0), 56800],
[Date.UTC(2014,10,7, 17, 0), 49824],
[Date.UTC(2014,10,7, 18, 0), 50697],
[Date.UTC(2014,10,7, 19, 0), 53845],
[Date.UTC(2014,10,7, 20, 0), 53400],
[Date.UTC(2014,10,7, 21, 0), 51996],
[Date.UTC(2014,10,7, 22, 0), 50165],
[Date.UTC(2014,10,7, 23, 0), 45911],
[Date.UTC(2014,10,8, 0, 0), 45809],
[Date.UTC(2014,10,8, 1, 0), 43477],
[Date.UTC(2014,10,8, 2, 0), 41482],
[Date.UTC(2014,10,8, 3, 0), 42656],
[Date.UTC(2014,10,8, 4, 0), 49696],
[Date.UTC(2014,10,8, 5, 0), 44321],
[Date.UTC(2014,10,8, 6, 0), 47014],
[Date.UTC(2014,10,8, 7, 0), 49325],
[Date.UTC(2014,10,8, 8, 0), 50707],
[Date.UTC(2014,10,8, 9, 0), 47120],
[Date.UTC(2014,10,8, 10, 0), 44264],
[Date.UTC(2014,10,8, 11, 0), 42654],
[Date.UTC(2014,10,8, 12, 0), 34013],
[Date.UTC(2014,10,8, 13, 0), 37372],
[Date.UTC(2014,10,8, 14, 0), 37154],
[Date.UTC(2014,10,8, 15, 0), 42989],
[Date.UTC(2014,10,8, 16, 0), 41321],
[Date.UTC(2014,10,8, 17, 0), 44484],
[Date.UTC(2014,10,8, 18, 0), 44034],
[Date.UTC(2014,10,8, 19, 0), 40078],
[Date.UTC(2014,10,8, 20, 0), 44519],
[Date.UTC(2014,10,8, 21, 0), 41220],
[Date.UTC(2014,10,8, 22, 0), 39099],
[Date.UTC(2014,10,8, 23, 0), 37623],
[Date.UTC(2014,10,9, 0, 0), 35041],
[Date.UTC(2014,10,9, 1, 0), 39487],
[Date.UTC(2014,10,9, 2, 0), 40021],
[Date.UTC(2014,10,9, 3, 0), 41839],
[Date.UTC(2014,10,9, 4, 0), 48353],
[Date.UTC(2014,10,9, 5, 0), 45634],
[Date.UTC(2014,10,9, 6, 0), 46186],
[Date.UTC(2014,10,9, 7, 0), 53886],
[Date.UTC(2014,10,9, 8, 0), 50310],
[Date.UTC(2014,10,9, 9, 0), 52427],
[Date.UTC(2014,10,9, 10, 0), 39577],
[Date.UTC(2014,10,9, 11, 0), 32065],
[Date.UTC(2014,10,9, 12, 0), 33556],
[Date.UTC(2014,10,9, 13, 0), 34517],
[Date.UTC(2014,10,9, 14, 0), 37020],
[Date.UTC(2014,10,9, 15, 0), 44379],
[Date.UTC(2014,10,9, 16, 0), 45299],
[Date.UTC(2014,10,9, 17, 0), 44438],
[Date.UTC(2014,10,9, 18, 0), 45157],
[Date.UTC(2014,10,9, 19, 0), 41829],
[Date.UTC(2014,10,9, 20, 0), 42198],
[Date.UTC(2014,10,9, 21, 0), 328],
[Date.UTC(2014,10,9, 23, 0), 28]
]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
Here is the full code: http://jsfiddle.net/8yngc3a0/
Whats happening is the two series are shown next to each other. I would like to super impose based on the day of the week. Any idea how I can do it?

The easist way I could find was to define a second xAxis but draw it over the first one. The second series is then assigned to the second xAxis:
xAxis: [{
type: 'datetime',
labels: {
formatter : function () {
var d= new Date(this.value);
return d.getDay();
}
},
title: {
text: 'Day of the week'
}
},{
type: 'datetime',
offset:0,
labels: {
formatter : function () {
var d= new Date(this.value);
return d.getDay();
}
},
title: {
text: 'Day of the week'
}
}],
series: [{
xAxis:1,
name: 'Week 2',
http://jsfiddle.net/4Lcmaxe5/
However, if it was me, I would redefine the data series to use categories rather than a datetime axis. You would have to define a list of category names, based on the day of the week and time, and the data would only have the y values in it. This only works if your date time data has no gaps in it.