Highcharts pie legend clipped off - highcharts

When the Pie chart legend is paginated, the legend items on the first line of the legend are not fully displayed, it is clipped off
Here's the fiddle for it, with the code here:
function(){
$('#container').highcharts({
credits:{
enabled:false
},
legend:{
itemStyle:{
fontFamily:'Arial',
fontSize:'10pt'
},
maxHeight:55,
},
tooltip:{
style:{
fontFamily:'Arial',
fontSize:'10pt'
}
},
title:{
style:{
color:'#000000',
fontFamily:'Arial'
},
text:'Pie legend problem',
margin:50
},
chart:{
renderTo:'container'
},
series:[
{
name:'Incident',
type:'pie',
data:[
{
name:'Nadia Wilshire',
y:49,
color:'#73a8f0'
},
{
name:'ITIL User',
y:15,
color:'#318047'
},
{
name:'David Luie',
y:9,
color:'#f5c533',
},
{
name:'Don Godfire',
y:7,
color:'#004789',
},
{
name:'Bethline Angleen',
y:5,
color:'#f18320',
},
{
name:'Howard Johnwind',
y:3,
color:'#8f5699',
},
{
name:'Luke Smith',
y:3,
color:'#1e90ff',
},
{
name:'(empty)',
y:2,
color:'#3ed662',
},
{
name:'(empty2)',
y:2,
color:'#3ed662',
},
{
name:'(empty3)',
y:2,
color:'#3ed662',
},
{
name:'(empty4)',
y:2,
color:'#3ed662',
},
]
}
],
exporting:{
enabled:true
},
plotOptions:{
pie:{
cursor:'pointer',
size:'95%',
dataLabels:{
enabled:false
},
showInLegend:true,
tooltip:{
pointFormat:'<b>{point.y}</b>'
}
}
}
});

Adjust fontsize by px and use maxHeight accordingly.
legend:{
itemStyle:{
fontFamily:'Arial',
fontSize:'13px'
},
maxHeight:58
DEMO: http://jsfiddle.net/Ly3Zr/

Related

Highcharts - Highstock chart showing double line on hovering data points to show tooltip

Highstock chart showing double line on hovering data points to show the tooltip, which supose to be single and should be in sync.
AS one can check in foddle (link shared below and in snashot) the line on hovering are double and somewhat not in sync. In series second object(2end series), if we set xaxis as 0 or remove it then this issue disappears but xaxis labels also gets removed. I need both the xaxis labels and single line on hover.
I am sharing the link to the fiddle:
https://jsfiddle.net/akt6284m/2/
code:
Highcharts.stockChart('container', {
series: [
{
"type":"areaspline",
"color":"rgba(87,169,222,0.8)",
"data":[
{
"y":0,
"x":1608737040000,
},
{
"y":0,
"x":1608737100000,
},
{
"y":2,
"x":1608737160000,
},
{
"y":0,
"x":1608737220000,
},
{
"y":0,
"x":1608737280000,
},
{
"y":0,
"x":1608737340000,
},
{
"y":0,
"x":1608737400000,
},
....
]
},
{
"type":"column",
"groupPadding":0,
"showInLegend":false,
"yAxis":1,
"xAxis":1,
"data":[
{
"y":1,
"x":1608737040000,
"color":"#02DE27",
},
{
"y":1,
"x":1608737100000,
"color":"#02DE27",
},
{
"y":1,
"x":1608737160000,
"color":"#FF3635",
},
{
"y":1,
"x":1608737220000,
"color":"#02DE27",
},
{
"y":1,
"x":1608737280000,
"color":"#02DE27",
},
{
"y":1,
"x":1608737340000,
"color":"#02DE27",
},
{
"y":1,
"x":1608737400000,
"color":"#02DE27",
},
{
"y":1,
"x":1608737460000,
"color":"#02DE27",
},
....
],
"label":{
"format":""
}
},
{
"type":"scatter",
"data":[
[
1608737160000,
0
],
[
1608738060000,
0
]
],
"color":"#FF3635"
}
],
yAxis: [{
height: '50%'
}, {
height: '50%',
top: '50%'
}],
xAxis: [{
tickLength: 0,
lineWidth: 1,
labels: {
enabled: false
},
height: '50%'
}, {
top: '50%',
height: '50%',
}]
});
Please if anyone can help me with this issue.
The column series has different padding for the xAxis by default. Try to use this config for the xAxis which is assigned to the line series.
xAxis: [{
minPadding: 0.021,
maxPadding: 0.021,
labels: {
enabled: false
},
height: '50%'
}, {
top: '50%',
height: '50%',
}]
Demo: https://jsfiddle.net/BlackLabel/eu94vcta/
API: https://api.highcharts.com/highcharts/xAxis.maxPadding

Highcharts custom formatting/coloring of category labels

I need to be able to apply background coloring (and text coloring to maintain contrast) to category labels.
I couldn't find an easy way to set each category label independently and came up with a working solution but now the width of my label column is too wide and applying marginLeft doesn't work.
First is there an easier way to achieve what I want or a solution to the width.
Here's the result:
and fiddle can be found here
Highcharts.ganttChart('container', {
chart: {
// marginLeft: 400,
events: {
load: function() {
for (var tickPos in this.yAxis[0].ticks) {
console.log(tickPos);
var ch = this.yAxis[0].chart;
var tick = this.yAxis[0].ticks[tickPos];
var label = tick.label;
if (typeof label !== "undefined") {
var text = label.textStr;
var obj = JSON.parse(text);
var element = label.element;
element.textContent = obj.name;
if (typeof obj.background !== "undefined") {
element.style["background-color"] = obj.background;
}
if (typeof obj.color !== "undefined") {
element.style["color"] = obj.color;
}
}
}
}
}
},
title: {
text: 'Highcharts Gantt Chart'
},
subtitle: {
text: 'With linked to split'
},
xAxis: {
minPadding: 0.05,
maxPadding: 0.05
},
"yAxis": [{
"scrollbar": {
"enabled": true
},
labels: {
useHTML: true
},
"uniqueNames": true
}],
tooltip: {
outside: true
},
rangeSelector: {
enabled: true,
selected: 5
},
time: {
useUTC: true
},
plotOptions: {
column: {
grouping: true
}
},
"series": [{
"name": "main",
"tooltip": {
"headerFormat": null
},
"data": [{
"name": '{"name": "Color prep and printing", "background":"green", "color":"white"}',
"id": "_dqbcsMWXEeeTdKTuQU2hRA",
"start": 1577836800000,
"end": 1582934400000,
"color": {
"patternIndex": 0
}
}, {
"name": '{"name": "Send to color house", "background":"blue", "color":"white"}',
"id": "_dqkmv8WXEeeTdKTuQU2hRA",
"parent": "_dqbcsMWXEeeTdKTuQU2hRA",
"start": 1577836800000,
"end": 1580428800000,
"duration": 30
}, {
"name": '{"name": "Generate proofs", "background":"teal", "color":"white"}',
"id": "_dq3hkMWXEeeTdKTuQU2hRA",
"parent": "_dqbcsMWXEeeTdKTuQU2hRA",
"start": 1578614400000,
"end": 1579651200000,
"duration": 12,
"dependency": [{
"to": "_dqkmv8WXEeeTdKTuQU2hRA"
}]
}, {
"name": '{"name": "Print and ship", "background":"crimson"}',
"id": "_drLDlcWXEeeTdKTuQU2hRA",
"parent": "_dqbcsMWXEeeTdKTuQU2hRA",
"start": 1581292800000,
"end": 1582934400000,
"duration": 19,
"dependency": [{
"to": "_dq3hkMWXEeeTdKTuQU2hRA"
}]
}],
"dataLabels": [{}, {
"enabled": true,
"align": "right",
"format": "{point.duration}"
}]
}],
});
To increase the width, you can set width style:
yAxis: {
labels: {
useHTML: true,
style: {
width: '300px',
textOverflow: 'ellipsis'
}
},
...
},
Live demo: https://jsfiddle.net/BlackLabel/nkz9xmh0/
API Reference: https://api.highcharts.com/gantt/yAxis.labels.style

Highcharts/highstock set yAxis Min and Max with Scroll

I have a stacked column highstock chart with positive and negative stacks and a horizontal scrollbar. I am trying to have the yAxis with min and max values according to the max data and min data so I've setup those values (after calculating them) in highstock's json.
However, the length of the names of the users on the xAxis are overriding these max values, is there a way around that?
Here's my js fiddle: http://jsfiddle.net/fj6d2/3931/
As the code is too large to be posted here, here's the configuration without all the data:
Highcharts.chart('container', {
"chart":{
"type":"column"
},
"title":{
"text":""
},
"xAxis":{
"min":0,
"max":31,
"categories":[
"Xxx Xxxx",
"Xxx Xxxx",
"Xxx Xxxx",
"Xxx Xxxxx",
],
"labels":{
"style":{
"font-size":"12px"
},
"useHTML":true,
"events":{
}
}
},
"scrollbar":{
"enabled":true,
"barBackgroundColor":"gray",
"barBorderRadius":7,
"barBorderWidth":0,
"buttonBackgroundColor":"gray",
"buttonBorderWidth":0,
"buttonArrowColor":"yellow",
"buttonBorderRadius":7,
"rifleColor":"yellow",
"trackBackgroundColor":"white",
"trackBorderWidth":1,
"trackBorderColor":"silver",
"trackBorderRadius":7
},
"yAxis":{
"title":{
"text":"Time (hh:mm)"
},
"tickInterval":600,
"labels":{
},
"gridLineWidth":0,
"plotLines":[
{
"value":0,
"width":1,
"color":"#000",
"zIndex":4
}
],
"tickmarkPlacement":"on",
"max":45336,
"min":-21443
},
"plotOptions":{
"column":{
"stacking":"normal",
"events":{
}
}
},
"credits":{
"enabled":false
},
"tooltip":{
"shared":true,
"crosshairs":true
},
"legend":{
"align":"right",
"verticalAlign":"top",
"itemStyle":{
"display":"none"
},
"title":{
"text":"Click a colour"
}
},
"series":[
{
"name":"On Task Teacher Recommended",
"data":[
487,
13512,
10064,
2664,
],
"color":"#86E067",
"events":{
},
"point":{
"events":false
},
"customEvents":{
"series":{
},
"point":{
}
}
},
{
"name":"On Task Student Discovered",
"data":[
1276,
5495,
1307,
3369,
],
"color":"#5CB5E5",
"events":{
},
"point":{
"events":false
},
"customEvents":{
"series":{
},
"point":{
}
}
},
{
"name":"Uncategorised",
"data":[
944,
12202,
2920,
4643,
],
"color":"#F98157",
"events":{
},
"point":{
"events":false
},
"customEvents":{
"series":{
},
"point":{
}
}
},
{
"name":"Off Task",
"data":[
-126,
-686,
-1998,
-927,
],
"color":"#E3454D",
"events":{
},
"point":{
"events":false
},
"customEvents":{
"series":{
},
"point":{
}
}
}
]
});
you can truncate long name (xAxis) of highcharts using function
function truncString(str, max, add){
add = add || '...';
return (typeof str === 'string' && str.length > max ? str.substring(0,max)+add : str);
};
And call this function in formatter
"labels":{
"formatter": function() {
return truncString(this.value,8,'...')
},
"style":{
"font-size":"12px"
},
"useHTML":true,
"events":{
}
}
Fiddle demo

Highcharts Horizontal stacked bar, reduce space between bar and x-axis

I have been working on a horizontal stacked bar in highchart. I need to remove the space between the x-axis and the bar in the chart.
You can get the details from this image:
.
Below are the chart options:
{
"chart":{
"type":"bar",
"renderTo":"ConfigurationTickets"
},
"title":{
"text":null
},
"xAxis":{
"groupPadding":0
},
"yAxis":{
"min":0,
"title":{
"text":null
},
"gridLineWidth":0,
"labels":{
"enabled":true
},
"minorTickLength":0,
"tickLength":0,
"minPadding":0.5,
"maxPadding":0.5
},
"legend":{
"enabled":false,
"reversed":true
},
"plotOptions":{
"series":{
"stacking":"percent",
"minPointLength":1,
"pointWidth":20,
"pointPadding":0,
"point":{
"events":{
}
},
"column":{
"pointPadding":0,
"groupPadding":0
},
"showInLegend":false,
"softThreshold":true
},
"cursor":"pointer",
"bar":{
"groupPadding":0.1,
"pointWidth":20,
"pointPadding":0
}
},
"series":[
{
"data":[
{
"y":3,
"color":"#ac89cb"
}
],
"name":"more than 31"
},
{
"data":[
{
"y":2,
"color":"#8d749a"
}
],
"name":"21 - 30"
},
{
"data":[
{
"y":3,
"color":"#72557b"
}
],
"name":"Less than 20"
}
]}
So, you had a lot of things out of place in your chart options.
Here's an example that uses this updated code to fill the space with the bar:
"plotOptions": {
"series": {
"stacking": "percent",
"minPointLength": 1,
"pointPadding": 0,
"groupPadding": 0,
"cursor": "pointer"
}
}
Fiddle:
http://jsfiddle.net/jlbriggs/muyz8rjz/1/

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