data in x-axis in highcharts with 15mins timeblock - highcharts
I am facing issue in displaying 96 Timeblock on x-axis in highcharts.
Array which needs to be displayed is
["00:00", "00:15", "00:30", "00:45", "01:00", "01:15", "01:30", "01:45", "02:00", "02:15", "02:30", "02:45", "03:00", "03:15", "03:30", "03:45", "04:00", "04:15", "04:30", "04:45", "05:00", "05:15", "05:30", "05:45", "06:00", "06:15", "06:30", "06:45", "07:00", "07:15", "07:30", "07:45", "08:00", "08:15", "08:30", "08:45", "09:00", "09:15", "09:30", "09:45", "10:00", "10:15", "10:30", "10:45", "11:00", "11:15", "11:30", "11:45", "12:00", "12:15", "12:30", "12:45", "13:00", "13:15", "13:30", "13:45", "14:00", "14:15", "14:30", "14:45", "15:00", "15:15", "15:30", "15:45", "16:00", "16:15", "16:30", "16:45", "17:00", "17:15", "17:30", "17:45", "18:00", "18:15", "18:30", "18:45", "19:00", "19:15", "19:30", "19:45", "20:00", "20:15", "20:30", "20:45", "21:00", "21:15", "21:30", "21:45", "22:00", "22:15", "22:30", "22:45", "23:00", "23:15", "23:30", "23:45"],
I need all these values to be displayed on x-axis with 15mins interval,
{
startOnTick: false,
endOnTick: false,
min: 0,
//type: 'datetime',
//pointInterval:1,
tickInterval: 0.25,
max: Math.max(this.deviation.allTimeBlocks.length),
minRange: 1000 * 60 * 60 * 60,
type: 'datetime',
scrollbar: {
enabled: true
},
tickPixelInterval: 0.25,
//tickmarkPlacement: 'on',
title: {
text: 'Time (hrs)',
style: {
color: this.Highcharts.getOptions().colors[1]
}
},
categories: ["00:00", "00:15", "00:30", "00:45", "01:00", "01:15", "01:30", "01:45", "02:00", "02:15", "02:30", "02:45", "03:00", "03:15", "03:30", "03:45", "04:00", "04:15", "04:30", "04:45", "05:00", "05:15", "05:30", "05:45", "06:00", "06:15", "06:30", "06:45", "07:00", "07:15", "07:30", "07:45", "08:00", "08:15", "08:30", "08:45", "09:00", "09:15", "09:30", "09:45", "10:00", "10:15", "10:30", "10:45", "11:00", "11:15", "11:30", "11:45", "12:00", "12:15", "12:30", "12:45", "13:00", "13:15", "13:30", "13:45", "14:00", "14:15", "14:30", "14:45", "15:00", "15:15", "15:30", "15:45", "16:00", "16:15", "16:30", "16:45", "17:00", "17:15", "17:30", "17:45", "18:00", "18:15", "18:30", "18:45", "19:00", "19:15", "19:30", "19:45", "20:00", "20:15", "20:30", "20:45", "21:00", "21:15", "21:30", "21:45", "22:00", "22:15", "22:30", "22:45", "23:00", "23:15", "23:30", "23:45"],
},
You can use scrollablePlotArea:
chart: {
scrollablePlotArea: {
minWidth: 2500
}
}
Demo:
https://jsfiddle.net/BlackLabel/t8cLzpes/
API reference:
https://api.highcharts.com/highcharts/chart.scrollablePlotArea.minWidth
Related
Twilio - Studio - HTTP Request
Hello I am working with Twilio Studio and I am using an HTTP Request, which brings me the following information.
[
{
"id": 131316,
"name": "User 1",
"location_id": 38716,
"times": [
{
"day": 1,
"day_name": "Monday",
"open": "08:30",
"close": "13:00"
},
{
"day": 1,
"day_name": " Monday",
"open": "14:00",
"close": "18:00"
},
{
"day": 2,
"day_name": "Tuesday",
"open": "08:30",
"close": "13:00"
},
{
"day": 2,
"day_name": "Tuesday",
"open": "14:00",
"close": "18:00"
},
{
"day": 3,
"day_name": "Wednesday",
"open": "08:30",
"close": "13:00"
},
{
"day": 3,
"day_name": "Wednesday",
"open": "14:00",
"close": "18:00"
},
{
"day": 4,
"day_name": "Thursday",
"open": "08:30",
"close": "13:00"
},
{
"day": 4,
"day_name": "Thursday",
"open": "14:00",
"close": "18:00"
},
{
"day": 5,
"day_name": "Friday",
"open": "08:30",
"close": "13:00"
},
{
"day": 5,
"day_name": "Friday",
"open": "14:00",
"close": "17:00"
}
]
},
{
"id": 131313,
"name": "User 2",
"location_id": 38716,
"times": [
{
"day": 1,
"day_name": " Monday",
"open": "08:30",
"close": "14:00"
},
{
"day": 1,
"day_name": " Monday",
"open": "15:00",
"close": "18:00"
},
{
"day": 2,
"day_name": "Tuesday",
"open": "08:30",
"close": "14:00"
},
{
"day": 2,
"day_name": "Tuesday",
"open": "15:00",
"close": "18:00"
},
{
"day": 3,
"day_name": "Wednesday",
"open": "08:30",
"close": "14:00"
},
{
"day": 3,
"day_name": "Wednesday",
"open": "15:00",
"close": "18:00"
},
{
"day": 4,
"day_name": "Thursday",
"open": "08:30",
"close": "14:00"
},
{
"day": 4,
"day_name": "Thursday",
"open": "15:00",
"close": "18:00"
},
{
"day": 5,
"day_name": "Friday",
"open": "08:30",
"close": "14:00"
},
{
"day": 5,
"day_name": "Friday",
"open": "15:00",
"close": "17:00"
}
]
},
{
"id": 130975,
"name": "User 3",
"location_id": 38716,
"times": [
{
"day": 1,
"day_name": " Monday",
"open": "08:30",
"close": "13:00"
},
{
"day": 1,
"day_name": " Monday",
"open": "14:00",
"close": "18:00"
},
{
"day": 2,
"day_name": "Tuesday",
"open": "08:30",
"close": "13:00"
},
{
"day": 2,
"day_name": "Tuesday",
"open": "14:00",
"close": "18:00"
},
{
"day": 3,
"day_name": "Wednesday",
"open": "08:30",
"close": "13:00"
},
{
"day": 3,
"day_name": "Wednesday",
"open": "14:00",
"close": "18:00"
},
{
"day": 4,
"day_name": "Thursday",
"open": "08:30",
"close": "13:00"
},
{
"day": 4,
"day_name": "Thursday",
"open": "14:00",
"close": "18:00"
},
{
"day": 5,
"day_name": "Friday",
"open": "08:30",
"close": "13:00"
},
{
"day": 5,
"day_name": "Friday",
"open": "14:00",
"close": "17:00"
}
]
}
]
I want to capture the "name" information that comes from the HTTP response but I have not been able to do it. I have used the following options without it working for me.
{{widgets.ListaPrestadores.response.parsed.name}}
{{widgets.ListaPrestadores.response.parsed.name[0]}}
{{widgets.ListaPrestadores.response.body.parsed.name}}
{{widgets.ListaPrestadores.response.body.parsed.name[0]}}
Does anyone have an idea how I could do this? Thank you.
Try wrapping the array in an object like below, then access first element in the array with the syntax.
Note that, although an array is valid JSON, if your request returns an array of objects, it will not be parsed by your Studio Flow
{{widgets.http_1.parsed.data[0].name}}
{"data":
[
{
"id": 131316,
"name": "User 1",
"location_id": 38716,
"times": [
{
"day": 1,
"day_name": "Monday",
"open": "08:30",
"close": "13:00"
},
{
"day": 1,
"day_name": " Monday",
"open": "14:00",
"close": "18:00"
},
{
"day": 2,
"day_name": "Tuesday",
"open": "08:30",
"close": "13:00"
},
{
"day": 2,
"day_name": "Tuesday",
"open": "14:00",
"close": "18:00"
},
{
"day": 3,
"day_name": "Wednesday",
"open": "08:30",
"close": "13:00"
},
{
"day": 3,
"day_name": "Wednesday",
"open": "14:00",
"close": "18:00"
},
{
"day": 4,
"day_name": "Thursday",
"open": "08:30",
"close": "13:00"
},
{
"day": 4,
"day_name": "Thursday",
"open": "14:00",
"close": "18:00"
},
{
"day": 5,
"day_name": "Friday",
"open": "08:30",
"close": "13:00"
},
{
"day": 5,
"day_name": "Friday",
"open": "14:00",
"close": "17:00"
}
]
},
{
"id": 131313,
"name": "User 2",
"location_id": 38716,
"times": [
{
"day": 1,
"day_name": " Monday",
"open": "08:30",
"close": "14:00"
},
{
"day": 1,
"day_name": " Monday",
"open": "15:00",
"close": "18:00"
},
{
"day": 2,
"day_name": "Tuesday",
"open": "08:30",
"close": "14:00"
},
{
"day": 2,
"day_name": "Tuesday",
"open": "15:00",
"close": "18:00"
},
{
"day": 3,
"day_name": "Wednesday",
"open": "08:30",
"close": "14:00"
},
{
"day": 3,
"day_name": "Wednesday",
"open": "15:00",
"close": "18:00"
},
{
"day": 4,
"day_name": "Thursday",
"open": "08:30",
"close": "14:00"
},
{
"day": 4,
"day_name": "Thursday",
"open": "15:00",
"close": "18:00"
},
{
"day": 5,
"day_name": "Friday",
"open": "08:30",
"close": "14:00"
},
{
"day": 5,
"day_name": "Friday",
"open": "15:00",
"close": "17:00"
}
]
},
{
"id": 130975,
"name": "User 3",
"location_id": 38716,
"times": [
{
"day": 1,
"day_name": " Monday",
"open": "08:30",
"close": "13:00"
},
{
"day": 1,
"day_name": " Monday",
"open": "14:00",
"close": "18:00"
},
{
"day": 2,
"day_name": "Tuesday",
"open": "08:30",
"close": "13:00"
},
{
"day": 2,
"day_name": "Tuesday",
"open": "14:00",
"close": "18:00"
},
{
"day": 3,
"day_name": "Wednesday",
"open": "08:30",
"close": "13:00"
},
{
"day": 3,
"day_name": "Wednesday",
"open": "14:00",
"close": "18:00"
},
{
"day": 4,
"day_name": "Thursday",
"open": "08:30",
"close": "13:00"
},
{
"day": 4,
"day_name": "Thursday",
"open": "14:00",
"close": "18:00"
},
{
"day": 5,
"day_name": "Friday",
"open": "08:30",
"close": "13:00"
},
{
"day": 5,
"day_name": "Friday",
"open": "14:00",
"close": "17:00"
}
]
}
]
}
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).
Highchart - show heatmap legend by category
I would like to use the heatmap to generate a status overview of a machine for a given day. The states show up as I want but I have a question about the legend. Can I show a 'traditional' legend that shows the states and their colors.
Highchart fiddle: http://jsfiddle.net/p7v2f117/7/
$(function () {
$('#container').highcharts({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 40
},
title: {
text: 'HIGHCHART - Machine State on 1/7/2015'
},
xAxis: { // minute interval
categories: ['00', '15', '30', '45']
},
yAxis: { // hour
categories: ['20:00', '21:00'],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 320
},
tooltip: {
formatter: function () {
return '<b>' + this.series.yAxis.categories[this.point.y] + ' (' + this.series.xAxis.categories[this.point.x] + 'min)</b>' + '<br>state: <b>' + this.point.value + '</b><br>More details go here'
}
},
series: [{
name: 'Machine State',
borderColor: '#000000',
borderWidth: 1,
data: [{
x: 0,
y: 0,
value: 'RUN',
color: '#00FF00'
}, {
x: 1,
y: 0,
value: 'RUN',
color: '#00FF00'
}, {
x: 2,
y: 0,
value: 'RUN',
color: '#00FF00'
}, {
x: 3,
y: 0,
value: 'IDLE',
color: '#00FFFF'
}, {
x: 0,
y: 1,
value: 'IDLE',
color: '#00FFFF'
}, {
x: 1,
y: 1,
value: 'DOWN',
color: '#FF0000'
}, {
x: 2,
y: 1,
value: 'PM',
color: '#C0C0C0'
}, {
x: 3,
y: 1,
value: 'Marathon',
color: '#FFCCFF'
}, ],
dataLabels: {
enabled: false
}
}]
});
});
I am trying to basically get the same behavior that I can get in Fusion charts, where the color is automatically driven by the status field (text) and it shows the categories. The fact that they are clickable is nice but not necessary.
Fusionchart fiddle: http://jsfiddle.net/c8V2F/25/
FusionCharts.ready(function () {
var chart = new FusionCharts({
type: 'heatmap',
renderAt: 'chartdiv1',
width: '600',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "FUSIONCHART - Machine State on 1/7/2015",
"plottooltext": "<div id='nameDiv' style='font-size: 12px; border-bottom: 1px dashed #666666; font-weight:bold; padding-bottom: 3px; margin-bottom: 5px; display: inline-block; color: #888888;'>$tlLabel</div>{br}State: <b>$value</b>{br}details can go here",
"mapbycategory": "1",
//Cosmetics
"showXaxisLabels": "1",
"showYaxisLabels": "1",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"showBorder": "0",
"bgColor": "#ffffff",
"showShadow": "0",
"usePlotGradientColor": "0",
"canvasBgColor": "#ffffff",
"canvasBorderAlpha": "0",
"legendBgAlpha": "0",
"legendBorderAlpha": "0",
"legendShadow": "0",
"legendItemFontSize": "10",
"legendItemFontColor": "#666666",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5"
},
"dataset": [{
"data": [{
"rowid": "20:00",
"columnid": "00",
"categoryid": "RUN",
"displayvalue": ""
}, {
"rowid": "20:00",
"columnid": "15",
"categoryid": "RUN"
}, {
"rowid": "20:00",
"columnid": "30",
"categoryid": "RUN"
}, {
"rowid": "20:00",
"columnid": "45",
"categoryid": "IDLE"
}, {
"rowid": "21:00",
"columnid": "00",
"categoryid": "IDLE"
}, {
"rowid": "21:00",
"columnid": "15",
"categoryid": "DOWN"
}, {
"rowid": "21:00",
"columnid": "30",
"categoryid": "PM"
}, {
"rowid": "21:00",
"columnid": "45",
"categoryid": "Marathon"
}, ]
}],
"colorrange": {
"gradient": "0",
"color": [{
"label": "RUN",
"code": "00FF00"
}, {
"label": "ASSIST",
"code": "FFFF00"
}, {
"label": "DOWN",
"code": "FF0000"
}, {
"label": "IDLE",
"code": "00FFFF"
}, {
"label": "PM",
"code": "C0C0C0"
}, {
"label": "ENG",
"code": "00B0F0"
}, {
"label": "Marathon",
"code": "FFCCFF"
}
]
}
}
});
chart.render();
});
Is there a simple way to not show the legend at all?
I can certainly convert the states back to a number if that makes more sense.
--Nico
You need to cover default parameter for highmaps: var H = Highcharts; H.seriesTypes.heatmap.prototype.axisTypes = ['xAxis', 'yAxis'], H.seriesTypes.heatmap.prototype.optionalAxis = null; Example: http://jsfiddle.net/ww6Lbnc5/
how to make a chart in grails?
as a noob in groovy/grails , i'd like to learn how to make or use a plugin for charts .
i tried zing chart , tried the exemples , but nothing as a result , sometimes i have the area of the chart and nothing else.
So to display the chart i used zing :
<zing:chart type="area" width="700" height="350" container="acceptToConvertChart" data="${data}" xLabels="${labels}" effect="4" />
And for the script :
<script> def labels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
def data = [
'Visitors': [100, 300, 200, 240, 500, 100, 80],
'Purchases': [30, 50, 12, 20, 55, 20, 10]
]</script>
when i use it , nothing hapen , the area just disapear
for include :
<zing:include/>
and it's underlined in yellow like every thing that's in relation with zing chart and when i hover it ,it says that zing is unknown , so what i should do?
Please help .
When you explain ,just know that i am not java developper .
Thank you in advance.
you need something like this in your HTML:
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
<script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
ZC.LICENSE =["569d52cefae586f634c54f86dc99e6a9","ee6b7db5b51705a13dc2339db3edaf6d"]; </script>
</head>
<body>
Here is your ZingChart:
<div id='myChart'></div>
</body>
and something like this javascript:
zingchart.THEME = "classic";
var myConfig =
{
"type": "area",
"background-color": "#fff",
"stacked": false,
"title": {
"text": "Visitors & Sales",
"background-color": "#fff",
"font-color": "#05636c",
"adjust-layout":true
},
"tooltip": {
"visible": false
},
"plot": {
"aspect": "stepped",
"line-width": "1px",
"marker": {
"visible": false
},
"hover-state": {
"visible": false
},
"shadow": false
},
"plotarea": {
"margin": "dynamic"
},
"scale-x": {
"values": [
"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"
],
"line-color": "#000",
"line-width": "1px",
"guide": {
"visible": false
},
"tick": {
"line-color": "#000",
"line-width": "1px"
},
"label": {
"text": "Days of the Week",
"font-size": "14px",
"font-family": "helvetica",
"font-weight": "normal",
"offset-y": "5%",
"font-color":"#05636c"
},
"item": {
"font-color": "#05636c",
"font-weight": "normal",
"font-family": "helvetica",
"font-size": "12px",
"offset-y": "3%"
}
},
"scale-y": {
"values": "0:600:50",
"line-color": "#000",
"line-width": "1px",
"tick": {
"line-color": "#000",
"line-width": "1px"
},
"label": {
"text": "Volume",
"font-size": "14px",
"font-family": "helvetica",
"font-weight": "normal",
"font-color":"#05636c"
},
"item": {
"font-color": "#05636c",
"font-weight": "normal",
"font-family": "helvetica",
"font-size": "12px",
"offset-x": "-5%"
},
"guide": {
"visible": false
}
},
"crosshair-x": {
"line-color": "#ffffff",
"marker": {
"visible": false
},
"plot-label": {
"text": "<strong>%v</strong> %t",
"shadow": 0,
"font-size": "12px",
"font-color": "#05636c",
"font-family": "helvetica",
"border-width": "1px",
"border-color": "#05636c",
"background-color": "#ffffff",
"text-align": "center"
},
"scale-label": {
"font-size": "12px",
"font-color": "#000000",
"font-family": "helvetica",
"background-color": "#ffffff",
"offset-y": "3%"
}
},
"series": [
{
"values": [
30, 50, 12, 20, 55, 20, 10
]
},
{
"values": [
100, 300, 200, 240, 500, 100, 80]
}
]
};
zingchart.render({
id : 'myChart',
data : myConfig,
height: 300,
width: 500
});
please take a look at this working example
note that you will probably have for populate the section
"values": [
30, 50, 12, 20, 55, 20, 10
]
with your actual values coming from your grails controller
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]
}]
});