Creating a chart which will have inital zero values in its series and have the compare option on but this will not display a chart.
$(function () {
$('#container').highcharts({
plotOptions: {
series: {
compare: 'percent'
}
},
series: [{
name: 'Sample',
data: [0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}]
});
});
Inital Value Zero jsFiddle
If I change the initial value to non-zero then the chart will display
series: [{
name: 'Sample',
data: [1, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
Initial Value Non Zero jsFiddle
Having a zero value does cause issues for the percent compare but it still should be able to display the chart. Any ideas other than removing the valid initial zero value or the percent compare??
Turns out this was an existing issue in HighCharts/HighStock Graph disappear when comparing (percent) and series start with 0 which has now been resolved & committed by Torstein. Many thanks to Pawel for pointing out the existing issue.
Related
I have written following code to display chart. I haven't mentioned x Axis and y axis labels. Those are auto generated.
I want to display 'low' on starting of scale and 'high' at end of scale on x axis instead of full scale.
$('#container').highcharts({
yAxis: {
title: {
text: 'Temperature'
},
id: 'my_y',
lineWidth: 2,
lineColor: '#F33',
min:0,
max:100
},
series: [{
name: 'Temperature',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
color: '#F33'
}]
});
like this?
Its a bit "hacky" i'm sure there is a better way of doing it but it works.
xAxis: {
tickAmount: 2,
labels: {
formatter: function () {
if (typeof(this.axis.ticks[this.value]) != "undefined"){
if(this.axis.ticks[this.value].isFirst) {
return 'low'
}
else if (this.axis.ticks[this.value].isLast){
return 'high'
}
}
}
}
}
When markers are disabled, the symbols used for a line chart are simple vertically-centered paths
but for area charts are rectangles
I'd like to use the paths for all chart types, and I can't figure out how. The closest I've gotten is to set legend.symbolHeight to 2, but this results in a bottom-aligned rectangle for the area chart:
Is it possible to tell all charts to use the vertically-centered path?
You can use a fake series with different type and then linked two series by the option.
series: [{
type: 'line',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
type: 'line',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
},{
type: 'line',
color: 'red',
}, {
color: 'red',
type: 'area',
showInLegend: false,
linkedTo:':previous',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}]
Example:
- http://jsfiddle.net/kjq0cn8p/
I have a area chart. Its legend symbol comes up with a border radius.
Tried the below code and I could remove the the radius in IE9. Does not work in IE7.Please help.
$(chart.series).each(function () {
this.legendSymbol.attr({
'rx': 0,
'ry': 0,
'border-radius': '0px',
'height': 12
});
});
Border-radius is not supported by IE7, unfortunately.
Please check this matrix:
http://caniuse.com/border-radius
attr() is avaiable only in SVG, but IE6/7 use VML, which not allows to use this function.
EDIT:
You can use small workaround which include "fake" series, which correct marker (like square) and linked area serie with symbol.
series: [{
name: 'first',
type: 'scatter',
color: 'blue',
id: 'other',
marker: {
symbol: 'square'
}
}, {
showInLegend: false,
name: 'first',
linkedTo: 'other',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}]
http://jsfiddle.net/Drjyz/1/
THis code worked for me.
if (this.legendSymbol != undefined && this.legendSymbol != null) {
this.legendSymbol.attr({
'rx': 0,
'ry': 0,
'r': 0,
'height': symbolWidth
});
}
Specifically the 'r':0 made it work in the VML rendering browsers.
Can I rely on this solution?
http://jsfiddle.net/jriggs/8Sg8K/17/
See it by hitting the update button.
Ideally, I would just like for the line series to appear on top of the column, like adjusting the z-index, if that makes sense.
I've tried disable animations with no luck. Seems to have something to do with the order that the series are declared - but not sure.
$(function () {
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Monthly Average Temperature'
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5]
},{
name: 'Cleveland',
data: [10, 4, 11, 14.5, 18.2, 21.5]
}]
},
function (chart) {
$('#btn').click(function () {
chart.series[0].update({
type: "column"
});
});
});
});
});
Just adjust the zIndex for each of the series just like you said:
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5],
zIndex: 10
},{
name: 'Cleveland',
data: [10, 4, 11, 14.5, 18.2, 21.5],
zIndex: 20
}]
See it running here.
I've just upgraded to latest version and the column chart (which is dynamically updated) works on IE9 (?!?) but does not on latest Chrome
I think this is a highcharts bug that has been fixed. I tested their latest work (http://github.highcharts.com/master/highcharts.js) before reporting the bug, and the problem went away for me.
I believe this is the github issue: https://github.com/highslide-software/highcharts.com/issues/1623
I've prepared example which add columns dynamically (via button)
http://jsfiddle.net/DQTMP/
$('#container').highcharts({
chart: {
type: 'spline'
},
title: {
text: 'Monthly Average Temperature'
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 23.3, 18.3, 13.9, 9.6]
}]
},function(chart){
$('#btn').click(function(){
chart.addSeries({
type:'column',
data:[1,2,3,4,5]
});
});
});
Please let me know if you come across problem with this example in your Chrome.