The opposite X aXis series is not showed in the navigator - highcharts
I have a problem.
My graphic has 6 series, of which 3 belong to the lower X axis and the other 3 to the upper one. The problem is that the series belonging to the upper X axis are not displayed in the navigator. This causes that when modifying the range these series "break". Here the evidence:
http://jsfiddle.net/6gqbj8sk/
Also, I would like the points of the 2 axes to be aligned (the number of points in each series is the same).
Thanks!
The code:
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
zoomType: 'x'
},
xAxis: [{
type: 'datetime',
}, {
type: 'datetime',
opposite: true,
}],
yAxis: {
visible: true,
opposite: false,
showLastLabel: true,
labels: {
enabled: true,
format: "{value}",
align: "right"
},
},
tooltip: {
pointFormatter: function () {
return '<span style="color:' + this.series.color + '">' + this.series.name + '</span>: <b>' + Highcharts.numberFormat(this.y, 2) + '</b> ' + unidades + '<br/>';
}
},
legend: {
enabled: true
},
navigator: {
enabled: true
},
rangeSelector: {
enabled: true
},
scrollbar: {
enabled: true
},
navigation: {
buttonOptions: {
enabled: true
}
},
series: [{"name":"Activa","stack":0,"type":"spline","xAxis":0,"pointStart":"1540339200000","data":[[1540339200000,0.352],[1540340100000,0.288],[1540341000000,0.464],[1540341900000,0.576],[1540342800000,0.304],[1540343700000,0.288],[1540344600000,0.464],[1540345500000,0.512],[1540346400000,0.368],[1540347300000,0.336],[1540348200000,0.384],[1540349100000,0.496],[1540350000000,0.432],[1540350900000,0.368],[1540351800000,0.304],[1540352700000,0.432],[1540353600000,0.544],[1540354500000,0.368],[1540355400000,0.288],[1540356300000,0.352],[1540357200000,0.544],[1540358100000,0.416],[1540359000000,0.272],[1540359900000,0.288],[1540360800000,0.56],[1540361700000,0.48],[1540362600000,0.256],[1540363500000,0],[1540364400000,0.272],[1540365300000,0.256],[1540366200000,0.224],[1540367100000,0.72],[1540368000000,0.304],[1540368900000,0.304],[1540369800000,0.064],[1540370700000,0.928],[1540371600000,0.4],[1540372500000,0.848],[1540373400000,0.24],[1540374300000,0.16],[1540375200000,0],[1540376100000,0.192],[1540377000000,0.864],[1540377900000,0.096],[1540378800000,0.432],[1540379700000,0.48],[1540380600000,0.336],[1540381500000,0.032],[1540382400000,0],[1540383300000,0.128],[1540384200000,0.32],[1540385100000,0.048],[1540386000000,0],[1540386900000,0.112],[1540387800000,0.32],[1540388700000,0.224],[1540389600000,0],[1540390500000,0.128],[1540391400000,0.208],[1540392300000,0.192],[1540393200000,0.08],[1540394100000,1.28],[1540395000000,1.808],[1540395900000,1.984],[1540396800000,1.84],[1540397700000,1.296],[1540398600000,0.128],[1540399500000,0.368],[1540400400000,1.248],[1540401300000,0],[1540402200000,0.08],[1540403100000,0.336],[1540404000000,0.256],[1540404900000,0.672],[1540405800000,0.144],[1540406700000,0.4],[1540407600000,0.816],[1540408500000,0.736],[1540409400000,0.912],[1540410300000,0.656],[1540411200000,0.544],[1540412100000,0.48],[1540413000000,0.384],[1540413900000,0.304],[1540414800000,0.448],[1540415700000,0.592],[1540416600000,0.368],[1540417500000,0.304],[1540418400000,0.4],[1540419300000,0.592],[1540420200000,0.4],[1540421100000,0.304],[1540422000000,0.384],[1540422900000,0.496],[1540423800000,0.464],[1540424700000,0.368]]},{"name":"Reactiva","stack":1,"type":"spline","xAxis":0,"pointStart":"1540339200000","data":[[1540339200000,0.352],[1540340100000,0.416],[1540341000000,0.096],[1540341900000,0],[1540342800000,0.4],[1540343700000,0.416],[1540344600000,0.176],[1540345500000,0],[1540346400000,0.256],[1540347300000,0.352],[1540348200000,0.272],[1540349100000,0],[1540350000000,0.096],[1540350900000,0.288],[1540351800000,0.384],[1540352700000,0.128],[1540353600000,0],[1540354500000,0.272],[1540355400000,0.416],[1540356300000,0.272],[1540357200000,0],[1540358100000,0.208],[1540359000000,0.416],[1540359900000,0.416],[1540360800000,0],[1540361700000,0.112],[1540362600000,0.432],[1540363500000,0.544],[1540364400000,0.144],[1540365300000,0.176],[1540366200000,0.512],[1540367100000,0.272],[1540368000000,0.112],[1540368900000,0.128],[1540369800000,0.448],[1540370700000,0.288],[1540371600000,0.384],[1540372500000,0.208],[1540373400000,0.336],[1540374300000,0.416],[1540375200000,0.528],[1540376100000,0.24],[1540377000000,0.56],[1540377900000,0.416],[1540378800000,0.432],[1540379700000,0.208],[1540380600000,0.032],[1540381500000,0.512],[1540382400000,0.528],[1540383300000,0.336],[1540384200000,0.016],[1540385100000,0.464],[1540386000000,0.528],[1540386900000,0.4],[1540387800000,0.064],[1540388700000,0.368],[1540389600000,0.544],[1540390500000,0.384],[1540391400000,0.24],[1540392300000,0.24],[1540393200000,0.432],[1540394100000,0.24],[1540395000000,0.064],[1540395900000,0],[1540396800000,0.048],[1540397700000,0.256],[1540398600000,0.448],[1540399500000,0],[1540400400000,1.184],[1540401300000,0.576],[1540402200000,0.528],[1540403100000,0.048],[1540404000000,0.176],[1540404900000,0.736],[1540405800000,0.432],[1540406700000,0.24],[1540407600000,0.144],[1540408500000,0.256],[1540409400000,0.112],[1540410300000,0.16],[1540411200000,0],[1540412100000,0.064],[1540413000000,0.288],[1540413900000,0.416],[1540414800000,0.112],[1540415700000,0],[1540416600000,0.32],[1540417500000,0.416],[1540418400000,0.288],[1540419300000,0],[1540420200000,0.192],[1540421100000,0.416],[1540422000000,0.288],[1540422900000,0.016],[1540423800000,0.032],[1540424700000,0.304]]},{"name":"Aparente","stack":2,"type":"spline","xAxis":0,"pointStart":"1540339200000","data":[[1540339200000,0.496],[1540340100000,0.504],[1540341000000,0.472],[1540341900000,0.576],[1540342800000,0.504],[1540343700000,0.504],[1540344600000,0.496],[1540345500000,0.512],[1540346400000,0.448],[1540347300000,0.488],[1540348200000,0.472],[1540349100000,0.496],[1540350000000,0.444],[1540350900000,0.468],[1540351800000,0.488],[1540352700000,0.452],[1540353600000,0.544],[1540354500000,0.456],[1540355400000,0.504],[1540356300000,0.444],[1540357200000,0.544],[1540358100000,0.464],[1540359000000,0.496],[1540359900000,0.504],[1540360800000,0.56],[1540361700000,0.492],[1540362600000,0.504],[1540363500000,0.544],[1540364400000,0.308],[1540365300000,0.312],[1540366200000,0.56],[1540367100000,0.768],[1540368000000,0.324],[1540368900000,0.328],[1540369800000,0.452],[1540370700000,0.972],[1540371600000,0.556],[1540372500000,0.872],[1540373400000,0.412],[1540374300000,0.444],[1540375200000,0.528],[1540376100000,0.308],[1540377000000,1.028],[1540377900000,0.428],[1540378800000,0.612],[1540379700000,0.524],[1540380600000,0.336],[1540381500000,0.512],[1540382400000,0.528],[1540383300000,0.36],[1540384200000,0.32],[1540385100000,0.468],[1540386000000,0.528],[1540386900000,0.416],[1540387800000,0.328],[1540388700000,0.432],[1540389600000,0.544],[1540390500000,0.404],[1540391400000,0.316],[1540392300000,0.308],[1540393200000,0.44],[1540394100000,1.304],[1540395000000,1.808],[1540395900000,1.984],[1540396800000,1.84],[1540397700000,1.32],[1540398600000,0.464],[1540399500000,0.368],[1540400400000,1.72],[1540401300000,0.576],[1540402200000,0.536],[1540403100000,0.34],[1540404000000,0.312],[1540404900000,0.996],[1540405800000,0.456],[1540406700000,0.468],[1540407600000,0.828],[1540408500000,0.78],[1540409400000,0.92],[1540410300000,0.676],[1540411200000,0.544],[1540412100000,0.484],[1540413000000,0.48],[1540413900000,0.516],[1540414800000,0.46],[1540415700000,0.592],[1540416600000,0.488],[1540417500000,0.516],[1540418400000,0.492],[1540419300000,0.592],[1540420200000,0.444],[1540421100000,0.516],[1540422000000,0.48],[1540422900000,0.496],[1540423800000,0.464],[1540424700000,0.476]]},{"name":"Activa","stack":0,"type":"column","xAxis":1,"pointStart":"1540252800000","data":[[1540252800000,0.288],[1540253700000,0.608],[1540254600000,0.48],[1540255500000,0.288],[1540256400000,0.384],[1540257300000,0.384],[1540258200000,0.496],[1540259100000,0.512],[1540260000000,0.304],[1540260900000,0.288],[1540261800000,0.528],[1540262700000,0.56],[1540263600000,0.32],[1540264500000,0.288],[1540265400000,0.432],[1540266300000,0.528],[1540267200000,0.416],[1540268100000,0.288],[1540269000000,0.384],[1540269900000,0.448],[1540270800000,0.48],[1540271700000,0.352],[1540272600000,0.352],[1540273500000,0.32],[1540274400000,0.48],[1540275300000,0.528],[1540276200000,0.304],[1540277100000,0.128],[1540278000000,0.24],[1540278900000,0.32],[1540279800000,0.016],[1540280700000,0.432],[1540281600000,0.4],[1540282500000,0.384],[1540283400000,0.608],[1540284300000,0.64],[1540285200000,0.16],[1540286100000,0.304],[1540287000000,0.224],[1540287900000,0.112],[1540288800000,0],[1540289700000,0.192],[1540290600000,0.784],[1540291500000,0.736],[1540292400000,0.128],[1540293300000,0.16],[1540294200000,0.256],[1540295100000,0.912],[1540296000000,0.224],[1540296900000,0.032],[1540297800000,0.256],[1540298700000,0.32],[1540299600000,0],[1540300500000,0],[1540301400000,0.336],[1540302300000,0.256],[1540303200000,0.048],[1540304100000,0.096],[1540305000000,0.176],[1540305900000,0.256],[1540306800000,0.416],[1540307700000,1.856],[1540308600000,1.792],[1540309500000,2.16],[1540310400000,3.152],[1540311300000,1.968],[1540312200000,1.888],[1540313100000,1.984],[1540314000000,2.256],[1540314900000,1.36],[1540315800000,0],[1540316700000,0.528],[1540317600000,0.352],[1540318500000,1.344],[1540319400000,0.048],[1540320300000,0.304],[1540321200000,0.32],[1540322100000,0.368],[1540323000000,0.384],[1540323900000,0.352],[1540324800000,0.368],[1540325700000,0.496],[1540326600000,0.48],[1540327500000,0.32],[1540328400000,0.304],[1540329300000,0.544],[1540330200000,0.544],[1540331100000,0.304],[1540332000000,0.304],[1540332900000,0.496],[1540333800000,0.512],[1540334700000,0.368],[1540335600000,0.384],[1540336500000,0.32],[1540337400000,0.496],[1540338300000,0.528]]},{"name":"Reactiva","stack":1,"type":"column","xAxis":1,"pointStart":"1540252800000","data":[[1540252800000,0.416],[1540253700000,0],[1540254600000,0],[1540255500000,0.416],[1540256400000,0.272],[1540257300000,0.24],[1540258200000,0],[1540259100000,0.096],[1540260000000,0.384],[1540260900000,0.416],[1540261800000,0.064],[1540262700000,0],[1540263600000,0.352],[1540264500000,0.416],[1540265400000,0.208],[1540266300000,0],[1540267200000,0.112],[1540268100000,0.4],[1540269000000,0.256],[1540269900000,0.096],[1540270800000,0],[1540271700000,0.272],[1540272600000,0.304],[1540273500000,0.352],[1540274400000,0],[1540275300000,0.08],[1540276200000,0.384],[1540277100000,0.48],[1540278000000,0.24],[1540278900000,0.048],[1540279800000,0.512],[1540280700000,0.496],[1540281600000,0.256],[1540282500000,0.192],[1540283400000,0.4],[1540284300000,0.432],[1540285200000,0.432],[1540286100000,0.224],[1540287000000,0.24],[1540287900000,0.448],[1540288800000,0.56],[1540289700000,0.288],[1540290600000,0.048],[1540291500000,0.448],[1540292400000,0.464],[1540293300000,0.384],[1540294200000,0.208],[1540295100000,0.528],[1540296000000,0.4],[1540296900000,0.56],[1540297800000,0.224],[1540298700000,0.064],[1540299600000,0.56],[1540300500000,0.56],[1540301400000,0.16],[1540302300000,0.176],[1540303200000,0.48],[1540304100000,0.464],[1540305000000,0.368],[1540305900000,0.208],[1540306800000,0.256],[1540307700000,0.016],[1540308600000,0.08],[1540309500000,0.016],[1540310400000,0],[1540311300000,0],[1540312200000,0.064],[1540313100000,0.096],[1540314000000,0],[1540314900000,0.176],[1540315800000,0.56],[1540316700000,0.736],[1540317600000,0.032],[1540318500000,1.136],[1540319400000,0.592],[1540320300000,0.48],[1540321200000,0.256],[1540322100000,0.08],[1540323000000,0.256],[1540323900000,0.32],[1540324800000,0.272],[1540325700000,0],[1540326600000,0.128],[1540327500000,0.384],[1540328400000,0.416],[1540329300000,0.032],[1540330200000,0.032],[1540331100000,0.416],[1540332000000,0.416],[1540332900000,0.128],[1540333800000,0],[1540334700000,0.288],[1540335600000,0.288],[1540336500000,0.368],[1540337400000,0],[1540338300000,0.08]]},{"name":"Aparente","stack":2,"type":"column","xAxis":1,"pointStart":"1540252800000","data":[[1540252800000,0.504],[1540253700000,0.608],[1540254600000,0.48],[1540255500000,0.504],[1540256400000,0.472],[1540257300000,0.452],[1540258200000,0.496],[1540259100000,0.52],[1540260000000,0.488],[1540260900000,0.504],[1540261800000,0.532],[1540262700000,0.56],[1540263600000,0.476],[1540264500000,0.504],[1540265400000,0.48],[1540266300000,0.528],[1540267200000,0.432],[1540268100000,0.492],[1540269000000,0.46],[1540269900000,0.46],[1540270800000,0.48],[1540271700000,0.444],[1540272600000,0.464],[1540273500000,0.476],[1540274400000,0.48],[1540275300000,0.536],[1540276200000,0.488],[1540277100000,0.496],[1540278000000,0.34],[1540278900000,0.324],[1540279800000,0.512],[1540280700000,0.656],[1540281600000,0.476],[1540282500000,0.428],[1540283400000,0.728],[1540284300000,0.772],[1540285200000,0.46],[1540286100000,0.376],[1540287000000,0.328],[1540287900000,0.46],[1540288800000,0.56],[1540289700000,0.348],[1540290600000,0.784],[1540291500000,0.86],[1540292400000,0.48],[1540293300000,0.416],[1540294200000,0.328],[1540295100000,1.052],[1540296000000,0.46],[1540296900000,0.56],[1540297800000,0.34],[1540298700000,0.328],[1540299600000,0.56],[1540300500000,0.56],[1540301400000,0.372],[1540302300000,0.312],[1540303200000,0.484],[1540304100000,0.472],[1540305000000,0.408],[1540305900000,0.328],[1540306800000,0.488],[1540307700000,1.856],[1540308600000,1.792],[1540309500000,2.16],[1540310400000,3.152],[1540311300000,1.968],[1540312200000,1.888],[1540313100000,1.988],[1540314000000,2.256],[1540314900000,1.372],[1540315800000,0.56],[1540316700000,0.904],[1540317600000,0.352],[1540318500000,1.76],[1540319400000,0.592],[1540320300000,0.568],[1540321200000,0.408],[1540322100000,0.376],[1540323000000,0.46],[1540323900000,0.476],[1540324800000,0.456],[1540325700000,0.496],[1540326600000,0.496],[1540327500000,0.5],[1540328400000,0.516],[1540329300000,0.544],[1540330200000,0.544],[1540331100000,0.516],[1540332000000,0.516],[1540332900000,0.512],[1540333800000,0.512],[1540334700000,0.468],[1540335600000,0.48],[1540336500000,0.488],[1540337400000,0.496],[1540338300000,0.536]]}]
});
To create a chart with a series that you want to compare (data from one day in your example) you can set the same date for the particular points and use the tooltip to present the precise date. Check simplified demo I posted you below.
Code:
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
zoomType: 'x'
},
xAxis: [{
type: 'datetime',
labels: {
formatter: function() {
return Highcharts.dateFormat('%H:%M', this.value);
}
}
}],
yAxis: {
visible: true,
opposite: false,
showLastLabel: true,
labels: {
enabled: true,
format: "{value}",
align: "right"
},
},
tooltip: {
pointFormatter: function() {
var timestamp = this.series.userOptions.pointStart,
date = Highcharts.dateFormat('%b %e, %Y', +timestamp);
return '<span style="color:' + this.series.color + '">' + this.series.name + ' - ' + date + '</span>: <b>' + Highcharts.numberFormat(this.y, 2) + '</b><br/>';
},
xDateFormat: '%H:%M'
},
legend: {
enabled: true
},
navigator: {
enabled: true
},
rangeSelector: {
enabled: false
},
scrollbar: {
enabled: false
},
navigation: {
buttonOptions: {
enabled: true
}
},
series: [{
"name": "Activa",
"type": "spline",
"xAxis": 0,
"pointStart": "1540339200000",
"data": [
[1540339200000, 0.352],
[1540340100000, 0.288],
[1540341000000, 0.464],
]
}, {
"name": "Reactiva",
"type": "spline",
"xAxis": 0,
"pointStart": "1540339200000",
"data": [
[1540339200000, 0.352],
[1540340100000, 0.416],
[1540341000000, 0.096],
]
}, {
"name": "Aparente",
"type": "spline",
"xAxis": 0,
"pointStart": "1540339200000",
"data": [
[1540339200000, 0.496],
[1540340100000, 0.504],
[1540341000000, 0.472],
]
}, {
"name": "Activa",
"type": "column",
"xAxis": 0,
"pointStart": "1540252800000",
"data": [
[1540339200000, 0.288],
[1540340100000, 0.608],
[1540341000000, 0.48],
]
}, {
"name": "Reactiva",
"type": "column",
"xAxis": 0,
"pointStart": "1540252800000",
"data": [
[1540339200000, 0.416],
[1540340100000, 0],
[1540341000000, 0],
]
}, {
"name": "Aparente",
"type": "column",
"xAxis": 0,
"pointStart": "1540252800000",
"data": [
[1540339200000, 0.504],
[1540340100000, 0.608],
[1540341000000, 0.48],
]
}]
});
Demo:
https://jsfiddle.net/BlackLabel/9cye2qrm/
Investigating thoroughly, I found out that it is not possible to show 2 X-axis in the same "Navigator" component. Therefore, I had to find another solution.
What I did was to take the new extremes when modifying the zoom of the range in the "Navigator" and set them to the upper axis, in the following way:
xAxis: [{
type: 'datetime',
events: {
afterSetExtremes() {
let bottomAxis = this,
topAxis = this.chart.xAxis[1],
diferenciaMin = Math.abs(bottomAxis.dataMin - bottomAxis.min),
diferenciaMax = Math.abs(bottomAxis.dataMax - bottomAxis.max);
topAxis.setExtremes(topAxis.dataMin + diferenciaMin, topAxis.dataMax - diferenciaMax, true)
}
}
}, {
type: 'datetime',
opposite: true,
}],
The logic is simple. I also leave the official documentation of the afterSetExtremes() function:
https://api.highcharts.com/highcharts/xAxis.events.afterSetExtremes
Related
how to hide the line when i draw my chart
I have this chart and I made some changes in the code so that only I show the points :
chart: {
// type: 'spline',
zoomType: 'x, y',
panning: true,
parKey: 'shift'
},
title: {
text: 'Area de Grafica'
},
xAxis: {
categories: ['']
},
yAxis: {
title:{
text: ''
}
},
tooltip:{
crosshairs: [true,true],
formatter: function() {
return this.x + ', ' + this.y;
}
},
series: [{
name: 'grafica tabla de valores',
data: [[val1, val2], [val3, val4], [val5, val6], [val7, val8], [val9, val10], [val11, val12], [val13, val14], [val15, val16], [val17, val18], [val19, val20]],
lineWidth: 0,
marker: {
enabled: true,
radius: 5,
fillColor: 'Red',
symbol: 'url(assets/imgs/sun.png)' //'diamond', 'square',
//lineWidth: 2,
//lineColor: 'Black',
//fillColor: 'white'
}
}],
states: {
hover: {
lineWidthPlus: 0
}
},
exporting: {
showTable: true
},
});
When I run the app it works but at the moment when I move the mouse cursor to the graphic area, you see the line.
I was trying something like 'showLines' but it doesn't work :(
Updating single category data in Highcharts column chart
I am trying to use a column chart with single category but 4 values. The initial rendering of the graph works fine. However, when I use series[0].setData() method to update the data, it creates 4 categories as opposed to updating the single category.
Here is the jsfiddle link
$(function() {
var chart;
$(document).ready(function() {
chart = Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Packet Summary Stats'
},
subtitle: {
text: 'Source: ABC'
},
xAxis: {
categories: [
'Packet Summary'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Packet Count'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 1
}
},
series: [{
"data": [100],
"name": "Rx"
}, {
"data": [90],
"name": "Tx"
}, {
"data": [10],
"name": "Dropped"
}, {
"data": [10],
"name": "No Match"
}]
});
});
$('#button').click(function() {
chart.series[0].setData([
[200],
[180],
[20],
[20]
]);
});
});
I am unable to figure out what am I doing wrong here. Any help is appreciated.
Thanks
You have to update chart as
Fiddle
$('#button').click(function() {
chart.series[0].setData(
[200]
);
chart.series[1].setData(
[180]
);
chart.series[2].setData(
[20]
);
chart.series[3].setData(
[20]
);
});
HighStock pointRange issue
I am having some difficulty getting pointRange to work for a HighStock combination chart I've written.
You can see the issue here, the bars should be 28 days wide but they are not. I can get this code to work on a non-HighStock chart but something is preventing it from working in HighStock and I've been unable to figure it out.
http://jsfiddle.net/3fnfy434/
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
height: 450
},
credits: {
enabled: false
},
rangeSelector : {
inputEnabled: false,
selected : 2,
buttons: [{
type: 'month',
count: 3,
text: '3m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
labelStyle: {
color: '#40C6CE',
fontWeight: 'bold'
}
},
title : {
text : 'test'
},
xAxis: {
type: 'datetime'
},
yAxis: [{
allowDecimals: false,
labels: {
formatter: function() {
return this.value;
},
style: {
color: '#25408F'
}
},
title: {
text: 't',
style: {
color: '#25408F'
}
}
}],
navigator: {
baseSeries: 1
},
series : [{
name: 's1',
data: d1,
type: 'column',
visible: true,
pointRange: 28 * 24 * 3600 * 1000,
tooltip: {
valueDecimals: 0,
valueSuffix: ''
}
},
{
name : 's2',
data : d2,
color: '#25408F',
dataGrouping: {
enabled: false
},
pointRange: 24 * 3600 * 1000,
tooltip: {
valueDecimals: 1,
valueSuffix: ''
}
}]
});
Any help greatly appreciated.
highcharts- stacked bar, how can I make the chart cover the width 100%?
I have created a chart in jsfiddle which represents two values. id like the stacked bar chart to be adjusted so that it takes the whole width of the div. it should cover the background, like so.
http://jsfiddle.net/ftaran/jBHDM/4/
$(function () {
$('#container').highcharts({
chart: {
type: 'bar',
background:'yellow'
},
credits: {
enabled: false
},
title: {
text: null
},
xAxis: {
labels: {
enabled: false
}
},
yAxis: {
title: null,
labels: {
enabled: false
},
labels: {
enabled: false
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + ':</b> ' + this.y + '<br/>' + this.percentage.toFixed(2) + '%';
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Fail',
color: 'red',
data: [5]
}, {
name: 'Success',
color: 'green',
data: [2]
}]
});
});
Try using this yAxis parameter:
yAxis: {
...
endOnTick: false,
...
},
Just complementing #wergeld's answer. If you still haven't gotten the result expected after applying his suggestion:
yAxis: {
max: totalOfSeriesData
}
Per example:
series: [
{
name: 'John',
data: [5],
color: 'red',
},
{
name: 'Jane',
data: [2],
},
{
name: 'Joe',
data: [3],
},
],
yAxis: {
max: 10, // 5 + 2 + 3 = 10
endOnTick: false,
}
Highcharts: Remove space between plot border and actual chart
We are migrating from a flash based charting library (FusionCharts) to a JavaScript based one (HighCharts).
This is what our current flash charts look like
And this is what I've got so far with HighCharts.
How can I remove the space (marked with big dumb red arrows) between the plot border and the actual chart data?
Here's my code: http://jsfiddle.net/ChrisMBarr/7JAcN/1/
var chart = new Highcharts.Chart({
chart:{
renderTo: 'container',
type: 'areaspline',
plotBorderWidth: 1,
spacingTop:2,
spacingRight:5,
spacingBottom:5,
spacingLeft:2,
borderWidth:1,
borderRadius:0,
borderColor:'#999'
},
credits: {
enabled: false
},
title: {
text: 'Total spam in the last 7 days'
},
legend: {
verticalAlign: 'bottom',
borderWidth: 1,
backgroundColor: '#FFFFFF'
},
xAxis: {
allowDecimals:false,
categories: [
'Thu 2/14',
'Fri 2/15',
'Sat 2/16',
'Sun 2/17',
'Mon 2/18',
'Tue 2/19',
'Wed 2/20'
],
labels: {
staggerLines: 2
},
tickmarkPlacement: 'on',
},
yAxis: {
allowDecimals:false,
alternateGridColor: '#F7F7F7',
title: {
text: 'Number of Emails',
margin:5
}
},
tooltip: {
formatter: function() {
var isSpam = this.series.name === _chartOptions.series[1].name
return ''+this.x +': <strong>'+ this.y +(isSpam ? " Spam" : "") +' Emails</strong>';
}
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
"name": "Total Mail",
"color":"#339999",
"data": [2,3,4,7,8,8,8]
},{
"name": "Spam",
"color":"#003399",
"data": [2,2,4,4,4,6,8]
}]
});
This might help:
xAxis: {
min: 0.5, max: 5.5
...
where max = number of data point minus 1.5
You should use minPadding/maxPadding parameters but it doens't work with categories. So I suggest to remove categoreis, use min value and tickInterval
http://jsfiddle.net/7JAcN/3/
http://api.highcharts.com/highcharts#xAxis.minPadding
xAxis: {
allowDecimals:false,
minPadding:0,
maxPadding:0,
/*categories: [
'Thu 2/14',
'Fri 2/15',
'Sat 2/16',
'Sun 2/17',
'Mon 2/18',
'Tue 2/19',
'Wed 2/20'
],*/
labels: {
staggerLines: 2
},
tickmarkPlacement: 'on',
},
The best way to remove paddings is to add pointPlacement: 'on'
plotOptions: {
areaspline: {
pointPlacement: 'on'
}
}
With option "tickmarkplacement" set to "on", the xAxis "startontick" option might help you:
xAxis: {
startOnTick: false,
tickmarkplacement:"on",
...
see
this jsfiddle, forked from the Highcharts API documentation