Highcharts won't show up on my page - highcharts

I have a page that needs to load a graph using hightcharts. I just wonder why it doesn't work on any browser.
I have a sample code in the fiddle https://jsfiddle.net/colt25/ttyhtqL8/.
$(function () {
$("#container").highcharts({
chart: {
type: "line"
},
title: {
text: "'.$tyear.' TAF"
},
xAxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
},
yAxis: {
min: 0,
title: {
text: ""
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
name: "Count per Month",
data: [';`enter`enter code here` code here`

Related

Use max yAxis when plotting boolean values

I'm trying to figure out a way to plot boolean values in Highcharts using the max yAxis range. I'd like the false value is aligned with the bottom of the chart and the true values is aligned with the top. Highcharts seems to be auto padding the ticks at ~30% and ~70% of the yAxis and I can't seem to find a way to adjust these to 0 and 100%.
Here's a simplified code example I've been experimenting with:
Highcharts.chart("container", {
xAxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
},
yAxis: [
{
title: {
text: "Valve Position",
},
categories: ["on", "off"],
},
],
series: [
{
data: [0, 1, 0, 1, 0, 1],
},
],
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>

Use the linear axis type (default) insted of category:
yAxis: [{
...,
tickPositions: [0, 1],
labels: {
formatter: function() {
return this.isFirst ? 'on' : 'off';
}
}
}],
series: [{
data: [0, 1, 0, 1, 0, 1]
}]
Live demo: http://jsfiddle.net/BlackLabel/7v04d3r5/
API Reference: https://api.highcharts.com/highcharts/yAxis

highcharts how to make x and y axis starting on the same zero using categories on yAxis

Good evening,
I'm using highcharts and this is my actual situation
`
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: "One might think points get grouped by name"
},
"series": [{
"data": [{
x: 1,
"name": "May",
"y": 1
}],
"name": "Alpha"
}, {
"data": [{
x: 0,
"name": "Apr",
"y": 1
}, {
x: 1,
"name": "May",
"y": 2
}, {
x: 2,
"name": "Jun",
"y": 3
}],
"name": "Beta"
}],
xAxis: {
type: 'category',
//categories : ["Jun", "Apr", "May"]
},
yAxis: {
type: 'category',
categories : ["First", "Second", "Third", "fourth","fifth"]
}
});
});
` .As you can see from the fiddle, the y axis is detached from the x axis but if I comment rows from 37 to 41 I get what I want. Is there any way to get x and y axis starting from the same point and keep using categories ?

You don't have to categorize yAxis - you can display proper yAxis labels using yAxis.labels.formatter function:
var yAxisCategories = ['first', 'second', 'third', 'fourth', 'fifth', 'sixth', 'seventh', 'eighth', 'ninth']
yAxis: {
labels: {
formatter() {
return yAxisCategories[this.pos]
}
}
},
jsFiddle with formatter
If you'd like to stick with categorized yAxis, you can manually move xAxis closer to they yAxis 0 value using xAxis.offset property together with yAxis.tickmarkPlacement 'on' property. In this example, I have put -34px rigidly, but you can calculate the proper value in chart.load event and then update calculated offset.
xAxis: {
type: 'category',
offset: -34
},
yAxis: {
type: 'category',
categories: ["First", "Second", "Third", "fourth", "fifth"],
tickmarkPlacement: 'on'
},
jsFiddle with offset
If you want to try a different approach, let me know - I will edit my answer.
API References:
https://api.highcharts.com/highcharts/yAxis.labels.formatter
https://api.highcharts.com/highcharts/yAxis.tickmarkPlacement
https://api.highcharts.com/highcharts/xAxis.offset

Highstock Stockchart with custom color for single grouped column

I implemented the following stockchart with grouped columns:
var seriesData = [];
Highcharts.setOptions({
lang: {
rangeSelectorFrom: "Von",
rangeSelectorTo: "Bis",
months: ["Jannuar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
weekdays: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
shortMonths: ["Jan", "Feb", "Mrz", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"],
rangeSelectorZoom: '',
decimalPoint: "."
}
});
columnChartOptions = {
exporting: {
enabled: false
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
chart: {
type: 'column'
},
credits: {
href: " ",
text: " "
},
title: {
text: ''
},
yAxis: {
min: 0,
title: {
text: 'kWh'
},
lineWidth: 1,
opposite: false
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%B',
week: '%e. %b',
day: '%e. %b',
hour: '%H'
}
},
legend: {
enabled: false
},
tooltip: {
shared: true,
valueDecimals: 2
},
plotOptions: {
series: {
marker: {
enabled: true
}
},
column: {
grouping: false,
shadow: false,
borderWidth: 0,
groupPadding: 0,
color: '#688DC4'
}
},
rangeSelector: {
inputDateFormat: '%d.%m.%Y',
inputEditDateFormat: '%d.%m.%Y',
inputEnabled: true,
inputDateParser: function (value) {
value = value.split(/[\.]/);
return Date.UTC(
value[2],
value[1]-1,
value[0]
);
},
verticalAlign: 'top',
x: 0,
y: 0,
buttonPosition: {
align: 'left',
x: 0,
y: 0
},
buttonTheme: {
width: 50
},
allButtonsEnabled: true,
selected: 3,
buttonSpacing: 5,
buttons: [{
type: 'day',
count: 1,
text: 'Tag',
dataGrouping: {
approximation: "sum",
enabled: true,
forced: true,
units: [['hour', [1]]]
}
}, {
type: 'week',
count: 1,
text: 'Woche',
dataGrouping: {
approximation: "sum",
enabled: true,
forced: true,
units: [['day', [1]]]
}
}, {
type: 'month',
count: 1,
text: 'Monat',
dataGrouping: {
approximation: "sum",
enabled: true,
forced: true,
units: [['week', [1]]]
}
}, {
type: 'year',
count: 1,
text: 'Jahr',
dataGrouping: {
approximation: "sum",
enabled: true,
forced: true,
units: [['month', [1]]]
}
}]
},
series: []
};
Initialization of the chart:
myChart = new Highcharts.StockChart('consumptionGraph', columnChartOptions);
myChart.showLoading("Wird geladen...");
setChartData();
Setting seriesdata dynamicaly (actually with an async AJAX call, but for better understanding replaced with static array):
function setChartData() {
var consumerSeries = [
[Date.UTC(2018, 1, 1), 150], [Date.UTC(2018, 1, 11), 180], [Date.UTC(2018, 1, 12), 199],
[Date.UTC(2018, 7, 1), 150], [Date.UTC(2018, 7, 2), 130], [Date.UTC(2018, 7, 5), 280],
[Date.UTC(2018, 9, 1), 150], [Date.UTC(2018, 9, 2), 130], [Date.UTC(2018, 9, 5), 190],
[Date.UTC(2018, 12, 1), 150], [Date.UTC(2018, 12, 2), 130], [Date.UTC(2018, 12, 5), 250],
];
consumerSeriesObject = {
name: "Consumption",
data: consumerSeries,
showInNavigator: true,
color: '#688DC4',
dataGrouping: {
approximation: "sum",
enabled: true,
forced: true,
units: [['month', [1]]]
}
};
myChart.addSeries(consumerSeriesObject, true);
myChart.hideLoading();
}`
JS Fiddle
Now I want to change the color of every column which includes a xAxis value over and equal to 200. (column 2+4 of my Example).
Is there any way to do this?

Yes. update({color: newColor}) won't work for grouped points but you can directly modify their SVGs by calling css method on their graphic property:
chart: {
events: {
render: function() {
this.series[0].groupedData.forEach(function(groupedPoint) {
if (groupedPoint.y > 40) {
groupedPoint.graphic.css({
color: 'red'
});
}
});
}
}
},
Live demo: http://jsfiddle.net/BlackLabel/bhtqoyj9/
render event fires after initial load of the chart (directly after the load event) and after each redraw (directly after the redraw event).

How to remove the grid line overlappings in highcharts?

Is there a way to remove the pixels at the edge of yAxis gridLine in left of the left xAxis gridLine?
See example: http://jsfiddle.net/48LvK/
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'area',
marginRight: 130,
marginBottom: 25
},
"xAxis": {
"tickWidth": 0,
"gridLineWidth": 1,
"gridLineDashStyle": "ShortDot",
"gridLineColor": "#c1c2c3",
"labels": {
"enabled": false
},
},
"yAxis": {
},
"plotOptions": {
"area": {
"fillColor": "transparent",
"marker": {
"enabled": false
}
}
},
series: [{
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}]
});
});
});

You'll want to add startOnTick: true to your xAxis
http://jsfiddle.net/sppRL/
"xAxis": {
"tickWidth": 0,
"gridLineWidth": 1,
"gridLineDashStyle": "ShortDot",
"gridLineColor": "#c1c2c3",
"labels": {
"enabled": false
},
"startOnTick": true
},
What you're seeing aren't actually tick marks, they are the extension of the y-axis to the left of the first xAxis tick.
http://api.highcharts.com/highcharts#xAxis

xaxis range won't take chart's full width in area-colums combined chart

i'm building a chart combining area and columns.
when adding a column serie , the xaxis range shrink,leaving large blank area on both side of the graph.
I can't find what is wrong and why i cannot use the whole width of the graph.
see thoses exemples :
without column chart:
result:
http://jsfiddle.net/PL79W/12/
with column serie :
$(document).ready(function() {
char_option={
chart:{
type:null,
renderTo:"RapportMainContener",
zoomType:"xy",
margin:{
marginLeft:0
},
backgroundColor:"transparent"
},
tooltip:{
xDateFormat:"%Y-%m-%d %H:%M",
shared:true,
crosshairs:{
color:"orange",
width:1
},
snap:50,
formatter:null,
useHTML:true,
backgroundColor:"rgba(241, 243, 248, 0.85)"
},
title:null,
xAxis:[
{
gridLineWidth:null,
gridLineDashStyle:"Dash",
type:"datetime",
endOnTick:true,
startOnTick:true,
plotBands:[],
plotLines:[],
title:[],
minRange:600000,
opposite:false,
lineColor:"#C0D0E0",
lineWidth:0,
tickColor:"#C0D0E0",
tickInterval:null,
tickPosition:"outside",
pointPadding:null,
groupPadding:null,
borderWidth:null,
formatter:null,
min:1364346000000,
max:1364432400000
}
],
yAxis:[
{
gridLineWidth:1,
gridLineDashStyle:"Solid",
type:"linear",
labels:{
formatter:function() {return this.value;}
},
title:{
text:"Temps (ms)"
},
min:null,
max:null,
plotBands:[],
plotLines:[],
minRange:null,
opposite:false,
lineColor:"#C0D0E0",
lineWidth:0,
tickColor:"#C0D0E0",
tickInterval:null,
tickPosition:"outside",
pointPadding:null,
groupPadding:null,
borderWidth:null,
formatter:null
},
{
gridLineWidth:1,
gridLineDashStyle:"Solid",
type:"linear",
labels:{
enabled:true
},
title:{
text:"nbr Anomalies"
},
min:null,
max:null,
plotBands:[],
plotLines:[],
minRange:null,
opposite:true,
lineColor:"#FF0000",
lineWidth:0,
tickColor:"#C0D0E0",
tickInterval:1,
tickPosition:"outside",
pointPadding:0,
groupPadding:0,
borderWidth:0,
formatter:null
}
],
plotOptions:{
area:{
marker:{
enabled:true,
radius:1
},
lineWidth:1,
connectNulls:false,
shadow:false,
fillOpacity:0.3,
zIndex:1
},
areaspline:{
marker:{
enabled:false
},
lineWidth:1,
connectNulls:false,
shadow:false,
fillOpacity:0.3,
zIndex:1
},
series:{
marker:{
lineColor:"orange",
states:{
hover:{
fillColor:"orange",
radius:1
}
}
}
},
column:{
marker:{
enabled:false
},
borderWidth:1,
shadow:false,
fillOpacity:0.3,
zIndex:0
}
},
series:[
{
data:[[1364346000000,828],[1364346600000,992.5],[1364347200000,1156.5],[1364347800000,1109.5],[1364348400000,1304.5],[1364349000000,1078],[1364349600000,977],[1364350200000,977],[1364350800000,961],[1364351400000,1672],[1364352000000,984.5],[1364352600000,797],[1364353200000,1125],[1364353800000,1008],[1364354400000,1055],[1364355000000,914],[1364355600000,1039],[1364356200000,851.5],[1364356800000,961],[1364357400000,945.5],[1364358000000,945.5],[1364358600000,1133],[1364359200000,945],[1364359800000,828.5],[1364360400000,1359.5],[1364361000000,1281],[1364361600000,1133],[1364362200000,945.5],[1364362800000,984.5],[1364363400000,835.5],[1364364000000,914],[1364364600000,1109.5],[1364365200000,1078],[1364365800000,1820.5],[1364366400000,922],[1364367000000,922],[1364367600000,1055],[1364368200000,960.5],[1364368800000,938],[1364369400000,976.5],[1364370000000,781],[1364370600000,953.5],[1364371200000,1718.5],[1364371800000,992],[1364372400000,1055],[1364373000000,867.5],[1364373600000,1047],[1364374200000,2375],[1364374800000,1234.5],[1364375400000,1148.5],[1364376000000,1031],[1364376600000,1234.5],[1364377200000,1023.5],[1364377800000,1015.5],[1364378400000,1078],[1364379000000,969],[1364379600000,984.5],[1364380200000,1164],[1364380800000,1210.5],[1364381400000,1367],[1364382000000,1523.5],[1364382600000,835.5],[1364383200000,1007.5],[1364383800000,1375],[1364384400000,929.5],[1364385000000,945.5],[1364385600000,969],[1364386200000,19601.5],[1364386800000,1273],[1364387400000,1210.5],[1364388000000,961],[1364388600000,890.5],[1364389200000,1039],[1364389800000,906],[1364390400000,2875],[1364391000000,1125],[1364391600000,1125.5],[1364392200000,945],[1364392800000,1266],[1364393400000,914],[1364394000000,960.5],[1364394600000,1047.5],[1364395200000,820],[1364395800000,1023],[1364396400000,906],[1364397000000,1047],[1364397600000,1078],[1364398200000,914.5],[1364398800000,1172],[1364399400000,1516],[1364400000000,1062],[1364400600000,882.5],[1364401200000,953],[1364401800000,1320.5],[1364402400000,828],[1364403000000,1008],[1364403600000,937.5],[1364404200000,1538.5],[1364404800000,914],[1364405400000,1812.5],[1364406000000,1164],[1364406600000,1062.5],[1364407200000,1038.5],[1364407800000,867],[1364408400000,812.5],[1364409000000,1524],[1364409600000,860],[1364410200000,929.5],[1364410800000,1024],[1364411400000,992.5],[1364412000000,882.5],[1364412600000,1047],[1364413200000,883.5],[1364413800000,960.5],[1364414400000,930],[1364415000000,906.5],[1364415600000,828],[1364416200000,1507.5],[1364416800000,922],[1364417400000,883],[1364418000000,1344],[1364418600000,820],[1364419200000,874.5],[1364419800000,945.5],[1364420400000,953],[1364421000000,929.5],[1364421600000,899],[1364422200000,938],[1364422800000,1187.5],[1364423400000,1007.5],[1364424000000,961],[1364424600000,961],[1364425200000,977],[1364425800000,984.5],[1364426400000,992],[1364427000000,992.5],[1364427600000,860],[1364428200000,1156.5],[1364428800000,1148.5],[1364429400000,1039],[1364430000000,1031],[1364430600000,1804.5],[1364431200000,1249.5],[1364431800000,969]],
xAxis:0,
yAxis:0,
index:0,
name:"Temps de chargement de la page et des objets",
type:"area",
color:null,
zIndex:1,
stacking:"normal",
legend:null,
borderWidth:null,
fillOpacity:0.3,
borderColor:null,
pointPadding:null,
groupPadding:null,
dataLabels:{
},
tooltip:{
useHTML:true,
valueSuffix:" ms",
pointFormat:"<div class=\\\"cartouche\\\"><div style=\\\"background-color:{series.color};height:10px;width:10px;float:left;\\\"><\/div><span>{series.name}: <b>{point.stackY} ms<\/b><\/span><\/div>"
}
},
{
data:[[1364346000000,16],[1364346600000,7.5],[1364347200000,8],[1364347800000,31],[1364348400000,0],[1364349000000,7.5],[1364349600000,0],[1364350200000,0],[1364350800000,8],[1364351400000,0],[1364352000000,8],[1364352600000,0],[1364353200000,0],[1364353800000,0],[1364354400000,0],[1364355000000,7.5],[1364355600000,0],[1364356200000,0],[1364356800000,8],[1364357400000,0],[1364358000000,0],[1364358600000,47],[1364359200000,8],[1364359800000,15.5],[1364360400000,8],[1364361000000,55],[1364361600000,0],[1364362200000,8],[1364362800000,8],[1364363400000,8],[1364364000000,31],[1364364600000,8],[1364365200000,8],[1364365800000,39],[1364366400000,31.5],[1364367000000,7.5],[1364367600000,23],[1364368200000,16],[1364368800000,7.5],[1364369400000,0],[1364370000000,0],[1364370600000,7.5],[1364371200000,8],[1364371800000,0],[1364372400000,15.5],[1364373000000,0],[1364373600000,16],[1364374200000,180],[1364374800000,15.5],[1364375400000,15],[1364376000000,16],[1364376600000,7.5],[1364377200000,0],[1364377800000,39.5],[1364378400000,8],[1364379000000,7.5],[1364379600000,8],[1364380200000,8],[1364380800000,24],[1364381400000,8],[1364382000000,47],[1364382600000,8],[1364383200000,16],[1364383800000,15.5],[1364384400000,0],[1364385000000,23],[1364385600000,46.5],[1364386200000,16],[1364386800000,0],[1364387400000,8],[1364388000000,8],[1364388600000,16],[1364389200000,0],[1364389800000,8],[1364390400000,0],[1364391000000,23.5],[1364391600000,23],[1364392200000,16],[1364392800000,0],[1364393400000,141],[1364394000000,31.5],[1364394600000,7.5],[1364395200000,0],[1364395800000,8],[1364396400000,8],[1364397000000,8],[1364397600000,8],[1364398200000,7.5],[1364398800000,31.5],[1364399400000,0],[1364400000000,0],[1364400600000,0],[1364401200000,39],[1364401800000,31.5],[1364402400000,15.5],[1364403000000,0],[1364403600000,8],[1364404200000,8],[1364404800000,7.5],[1364405400000,0],[1364406000000,15.5],[1364406600000,8],[1364407200000,8],[1364407800000,15.5],[1364408400000,62],[1364409000000,62.5],[1364409600000,0],[1364410200000,0],[1364410800000,0],[1364411400000,8],[1364412000000,23.5],[1364412600000,47],[1364413200000,15.5],[1364413800000,8],[1364414400000,8],[1364415000000,8],[1364415600000,0],[1364416200000,23.5],[1364416800000,0],[1364417400000,7.5],[1364418000000,15],[1364418600000,8],[1364419200000,94],[1364419800000,0],[1364420400000,23.5],[1364421000000,8],[1364421600000,7.5],[1364422200000,23],[1364422800000,8],[1364423400000,24],[1364424000000,7.5],[1364424600000,15],[1364425200000,7.5],[1364425800000,0],[1364426400000,8],[1364427000000,7.5],[1364427600000,7.5],[1364428200000,7.5],[1364428800000,15.5],[1364429400000,16],[1364430000000,7.5],[1364430600000,0],[1364431200000,15.5],[1364431800000,15.5]],
xAxis:0,
yAxis:0,
index:0,
name:"Temps de chargement de la page",
type:"area",
color:null,
zIndex:1,
stacking:"normal",
legend:null,
borderWidth:null,
fillOpacity:0.3,
borderColor:null,
pointPadding:null,
groupPadding:null,
dataLabels:{
},
tooltip:{
useHTML:true,
valueSuffix:" ms",
pointFormat:"<div class=\\\"cartouche\\\"><div style=\\\"background-color:{series.color};height:10px;width:10px;float:left;\\\"><\/div><span>{series.name}: <b>{point.stackY} ms<\/b><\/span><\/div>"
}
},
{
data:[[1364346000000,343.5],[1364346600000,328.5],[1364347200000,202.5],[1364347800000,304.5],[1364348400000,297.5],[1364349000000,250],[1364349600000,257.5],[1364350200000,312],[1364350800000,172],[1364351400000,219],[1364352000000,218.5],[1364352600000,234.5],[1364353200000,500],[1364353800000,359],[1364354400000,492],[1364355000000,320.5],[1364355600000,266],[1364356200000,351.5],[1364356800000,328],[1364357400000,265.5],[1364358000000,296.5],[1364358600000,273],[1364359200000,250],[1364359800000,430],[1364360400000,374.5],[1364361000000,516],[1364361600000,336],[1364362200000,351.5],[1364362800000,265.5],[1364363400000,187.5],[1364364000000,406],[1364364600000,265],[1364365200000,227],[1364365800000,421.5],[1364366400000,320],[1364367000000,211],[1364367600000,320.5],[1364368200000,336],[1364368800000,281],[1364369400000,242],[1364370000000,289.5],[1364370600000,273.5],[1364371200000,289],[1364371800000,304.5],[1364372400000,320],[1364373000000,414],[1364373600000,476],[1364374200000,383],[1364374800000,430],[1364375400000,562.5],[1364376000000,445.5],[1364376600000,461],[1364377200000,281.5],[1364377800000,320],[1364378400000,804],[1364379000000,328.5],[1364379600000,297],[1364380200000,562],[1364380800000,601.5],[1364381400000,328],[1364382000000,469],[1364382600000,258],[1364383200000,492],[1364383800000,687.5],[1364384400000,211],[1364385000000,461.5],[1364385600000,305],[1364386200000,398.5],[1364386800000,586.5],[1364387400000,320.5],[1364388000000,390.5],[1364388600000,414],[1364389200000,273.5],[1364389800000,422],[1364390400000,312.5],[1364391000000,328],[1364391600000,500],[1364392200000,296.5],[1364392800000,359],[1364393400000,1851.5],[1364394000000,367],[1364394600000,476.5],[1364395200000,297],[1364395800000,703.5],[1364396400000,359.5],[1364397000000,429.5],[1364397600000,554.5],[1364398200000,336],[1364398800000,648],[1364399400000,367],[1364400000000,305],[1364400600000,625.5],[1364401200000,539],[1364401800000,445],[1364402400000,328.5],[1364403000000,343.5],[1364403600000,968.5],[1364404200000,305],[1364404800000,414],[1364405400000,453],[1364406000000,547],[1364406600000,304.5],[1364407200000,382.5],[1364407800000,484.5],[1364408400000,391],[1364409000000,281],[1364409600000,171.5],[1364410200000,453],[1364410800000,359.5],[1364411400000,367],[1364412000000,328],[1364412600000,234],[1364413200000,351.5],[1364413800000,289],[1364414400000,351.5],[1364415000000,288.5],[1364415600000,289.5],[1364416200000,430],[1364416800000,312.5],[1364417400000,305],[1364418000000,344],[1364418600000,234.5],[1364419200000,203],[1364419800000,304.5],[1364420400000,500],[1364421000000,343.5],[1364421600000,265.5],[1364422200000,516],[1364422800000,546.5],[1364423400000,453],[1364424000000,445.5],[1364424600000,321],[1364425200000,422],[1364425800000,203],[1364426400000,242.5],[1364427000000,351.5],[1364427600000,523],[1364428200000,375],[1364428800000,422],[1364429400000,398],[1364430000000,203.5],[1364430600000,437.5],[1364431200000,344],[1364431800000,500]],
xAxis:0,
yAxis:0,
index:0,
name:"Réception premier octet",
type:"area",
color:null,
zIndex:1,
stacking:"normal",
legend:null,
borderWidth:null,
fillOpacity:0.3,
borderColor:null,
pointPadding:null,
groupPadding:null,
dataLabels:{
},
tooltip:{
useHTML:true,
valueSuffix:" ms",
pointFormat:"<div class=\\\"cartouche\\\"><div style=\\\"background-color:{series.color};height:10px;width:10px;float:left;\\\"><\/div><span>{series.name}: <b>{point.stackY} ms<\/b><\/span><\/div>"
}
},
{
data:[[1364346000000,24],[1364346600000,31],[1364347200000,31.5],[1364347800000,23.5],[1364348400000,30.5],[1364349000000,16],[1364349600000,31.5],[1364350200000,16],[1364350800000,23],[1364351400000,38.5],[1364352000000,23.5],[1364352600000,23],[1364353200000,24],[1364353800000,16],[1364354400000,31],[1364355000000,15.5],[1364355600000,31],[1364356200000,23.5],[1364356800000,23],[1364357400000,23.5],[1364358000000,31.5],[1364358600000,39.5],[1364359200000,16],[1364359800000,15],[1364360400000,32],[1364361000000,31],[1364361600000,23],[1364362200000,15.5],[1364362800000,54.5],[1364363400000,16],[1364364000000,31.5],[1364364600000,31.5],[1364365200000,31],[1364365800000,23.5],[1364366400000,47],[1364367000000,23.5],[1364367600000,39],[1364368200000,31.5],[1364368800000,31.5],[1364369400000,31],[1364370000000,23],[1364370600000,23],[1364371200000,54.5],[1364371800000,32],[1364372400000,23.5],[1364373000000,23],[1364373600000,31.5],[1364374200000,15.5],[1364374800000,31.5],[1364375400000,39],[1364376000000,31],[1364376600000,31.5],[1364377200000,23.5],[1364377800000,15.5],[1364378400000,24],[1364379000000,31],[1364379600000,23.5],[1364380200000,16],[1364380800000,23.5],[1364381400000,23.5],[1364382000000,31],[1364382600000,31],[1364383200000,23.5],[1364383800000,39.5],[1364384400000,39],[1364385000000,23],[1364385600000,47],[1364386200000,23],[1364386800000,23],[1364387400000,31.5],[1364388000000,16],[1364388600000,23.5],[1364389200000,15.5],[1364389800000,23],[1364390400000,15.5],[1364391000000,31.5],[1364391600000,23],[1364392200000,24],[1364392800000,55],[1364393400000,31],[1364394000000,31],[1364394600000,15.5],[1364395200000,23.5],[1364395800000,23],[1364396400000,31.5],[1364397000000,31],[1364397600000,31],[1364398200000,15.5],[1364398800000,24],[1364399400000,23.5],[1364400000000,47],[1364400600000,23],[1364401200000,24],[1364401800000,15.5],[1364402400000,15.5],[1364403000000,23.5],[1364403600000,31.5],[1364404200000,31],[1364404800000,23.5],[1364405400000,23.5],[1364406000000,15.5],[1364406600000,23.5],[1364407200000,24],[1364407800000,23.5],[1364408400000,15.5],[1364409000000,46.5],[1364409600000,31.5],[1364410200000,24],[1364410800000,15.5],[1364411400000,23.5],[1364412000000,15.5],[1364412600000,24],[1364413200000,31],[1364413800000,15.5],[1364414400000,15.5],[1364415000000,16],[1364415600000,23],[1364416200000,23],[1364416800000,31],[1364417400000,15],[1364418000000,39],[1364418600000,23.5],[1364419200000,23.5],[1364419800000,31],[1364420400000,23],[1364421000000,31.5],[1364421600000,16],[1364422200000,23.5],[1364422800000,15.5],[1364423400000,23.5],[1364424000000,31.5],[1364424600000,31],[1364425200000,15.5],[1364425800000,39],[1364426400000,23],[1364427000000,23],[1364427600000,24],[1364428200000,16],[1364428800000,70],[1364429400000,31.5],[1364430000000,16],[1364430600000,31],[1364431200000,23.5],[1364431800000,16]],
xAxis:0,
yAxis:0,
index:0,
name:"Temps de connexion",
type:"area",
color:null,
zIndex:1,
stacking:"normal",
legend:null,
borderWidth:null,
fillOpacity:0.3,
borderColor:null,
pointPadding:null,
groupPadding:null,
dataLabels:{
},
tooltip:{
useHTML:true,
valueSuffix:" ms",
pointFormat:"<div class=\\\"cartouche\\\"><div style=\\\"background-color:{series.color};height:10px;width:10px;float:left;\\\"><\/div><span>{series.name}: <b>{point.stackY} ms<\/b><\/span><\/div>"
}
},
{
data:[[1364346000000,38.5],[1364346600000,46.5],[1364347200000,39],[1364347800000,23.5],[1364348400000,55],[1364349000000,54.5],[1364349600000,70],[1364350200000,39],[1364350800000,47],[1364351400000,86],[1364352000000,62.5],[1364352600000,32],[1364353200000,39],[1364353800000,54],[1364354400000,39],[1364355000000,39.5],[1364355600000,15.5],[1364356200000,47],[1364356800000,32],[1364357400000,39],[1364358000000,23.5],[1364358600000,39],[1364359200000,47],[1364359800000,39.5],[1364360400000,47],[1364361000000,31],[1364361600000,47],[1364362200000,47],[1364362800000,125],[1364363400000,54],[1364364000000,31],[1364364600000,47],[1364365200000,23.5],[1364365800000,39],[1364366400000,47],[1364367000000,54.5],[1364367600000,62.5],[1364368200000,31],[1364368800000,39.5],[1364369400000,63],[1364370000000,47],[1364370600000,31.5],[1364371200000,94],[1364371800000,23],[1364372400000,55],[1364373000000,31],[1364373600000,54.5],[1364374200000,46.5],[1364374800000,31],[1364375400000,24],[1364376000000,39.5],[1364376600000,39],[1364377200000,62.5],[1364377800000,39.5],[1364378400000,46.5],[1364379000000,31],[1364379600000,38.5],[1364380200000,46.5],[1364380800000,31],[1364381400000,55],[1364382000000,70],[1364382600000,24],[1364383200000,31.5],[1364383800000,62],[1364384400000,31],[1364385000000,24],[1364385600000,39],[1364386200000,39.5],[1364386800000,31.5],[1364387400000,31],[1364388000000,31],[1364388600000,23],[1364389200000,31.5],[1364389800000,32],[1364390400000,31.5],[1364391000000,23.5],[1364391600000,32],[1364392200000,23],[1364392800000,46.5],[1364393400000,39],[1364394000000,31.5],[1364394600000,1031.5],[1364395200000,31],[1364395800000,31.5],[1364396400000,39],[1364397000000,39.5],[1364397600000,24],[1364398200000,31.5],[1364398800000,31],[1364399400000,31],[1364400000000,46.5],[1364400600000,31],[1364401200000,38.5],[1364401800000,93.5],[1364402400000,62.5],[1364403000000,39],[1364403600000,31],[1364404200000,1531],[1364404800000,23.5],[1364405400000,70],[1364406000000,23.5],[1364406600000,47],[1364407200000,39],[1364407800000,31],[1364408400000,31.5],[1364409000000,63],[1364409600000,31],[1364410200000,23],[1364410800000,70],[1364411400000,31],[1364412000000,31.5],[1364412600000,38.5],[1364413200000,31],[1364413800000,39],[1364414400000,39],[1364415000000,39],[1364415600000,31.5],[1364416200000,55],[1364416800000,39.5],[1364417400000,23.5],[1364418000000,31],[1364418600000,31],[1364419200000,23.5],[1364419800000,24],[1364420400000,31.5],[1364421000000,31.5],[1364421600000,46.5],[1364422200000,31],[1364422800000,39.5],[1364423400000,47],[1364424000000,31],[1364424600000,31],[1364425200000,70],[1364425800000,47],[1364426400000,54.5],[1364427000000,32],[1364427600000,47],[1364428200000,31],[1364428800000,62.5],[1364429400000,23],[1364430000000,31],[1364430600000,31],[1364431200000,31.5],[1364431800000,39]],
xAxis:0,
yAxis:0,
index:0,
name:"Temps de réponse DNS",
type:"area",
color:null,
zIndex:1,
stacking:"normal",
legend:null,
borderWidth:null,
fillOpacity:0.3,
borderColor:null,
pointPadding:null,
groupPadding:null,
dataLabels:{
},
tooltip:{
useHTML:true,
valueSuffix:" ms",
pointFormat:"<div class=\\\"cartouche\\\"><div style=\\\"background-color:{series.color};height:10px;width:10px;float:left;\\\"><\/div><span>{series.name}: <b>{point.stackY} ms<\/b><\/span><\/div>"
}
},
{
data:[[1364353200000,1],[1364409600000,1]],
xAxis:0,
yAxis:1,
index:0,
name:"Anomalies",
type:"column",
color:"rgba(255,0,0, 0.5)",
zIndex:1,
stacking:"normal",
legend:null,
borderWidth:1,
fillOpacity:0.3,
borderColor:"rgba(216,28,28, 0.5)",
pointPadding:0,
groupPadding:null,
dataLabels:{
},
tooltip:null
}
],
colors:[
"#FFC000",
"#FF8300",
"#4B41FF",
"#8DC6FF",
"#AB0000",
"#615EB0",
"#FCE151",
"#FFBA00",
"#FF9724",
"#E39810",
"#DF5300",
"#F10000",
"#94211A",
"#4A411B",
"#015F1B",
"#298A2F",
"#869420",
"#83803B",
"#806460",
"#782FA7",
"#7309DB",
"#5900B0",
"#FFC000",
"#FF8300",
"#4B41FF",
"#8DC6FF",
"#AB0000",
"#615EB0",
"#FCE151",
"#FFBA00",
"#FF9724",
"#E39810",
"#DF5300",
"#F10000",
"#94211A",
"#4A411B",
"#015F1B",
"#298A2F",
"#869420",
"#83803B",
"#806460",
"#782FA7",
"#7309DB",
"#5900B0"
]
}
chart = new Highcharts.Chart(char_option);})
result: http://jsfiddle.net/PL79W/11/
thanks

Remove startOnTick and endOnTick for xAxis, and will be working fine, see: http://jsfiddle.net/PL79W/13/

This isn't an answer but I can't get this to work either and all the answers provided have WAY TOO MUCH code to sift through to get down to the solution. So, simplifying this to a two point plot, I'd like all the plots (areas and lines) to extend the full width of the chart with no gaps on the left and right.
Here's my fiddle: http://jsfiddle.net/lamarant/KTksk/
$('#container').highcharts({
chart: {
type: 'area',
plotBackgroundColor: '#00B417'
},
xAxis: {
categories: ['Mar', 'Apr']
},
yAxis: {
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
plotOptions: {
area: {
pointPlacement: 'on',
connectNulls: true
},
line: {
connectNulls: true
}
},
series: [{
showInLegend: false,
data: [194, 205],
marker: {
enabled: false
},
fillColor: '#D9B900',
lineColor: '#D9B900'
}, {
showInLegend: false,
data: [180, 190],
marker: {
enabled: false
},
fillColor: '#B80006',
lineColor: '#B80006'
}, {
type: 'line',
name: 'Actual Values',
lineColor: '#000000',
color: '#000000',
data: [225, 215]
}, {
type: 'line',
name: 'Target Values',
lineColor: '#0000ff',
color: '#0000ff',
data: [200, 200]
}]
});

Resources