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?
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/
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.
I have the following scatter plot graph, I want to create the graph as such that there is no yaxis and all the scatter plots on the x-axis are seen as a straight line in both the graphs.
following is the fiddle, http://jsfiddle.net/pratik24/n24s2fyk/1/
Code snippet:
$(function () {
$('#container').highcharts('StockChart', {
navigator:{
enabled: false
},
scrollbar:{
enabled: false
},
rangeSelector : {
selected : 1,
enabled:false
},
yAxis: [{
labels: {
align: 'left'
},
title: {
text: 'OHLC'
},
height: '60%'
}, {
labels: {
align: 'left',
x: -3
},
title: {
text: 'Volume'
},
top: '65%',
height: '35%',
offset: 0
}],
series: [{
type: 'scatter',
name: 'AAPL',
data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
type: 'scatter',
name: 'Volume',
data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
yAxis: 1
}]
});
});
How can this be achieved in HighStock,
Thanks
Scatter points in straight line - set data that will be presented like this (e.g. [1,1,1,1,1]) or increase y axis scale using min and max
Example: http://jsfiddle.net/6bkzxoff/
To hide y axis use axis options:
title: {
text: ''
},
labels: {
format: ' '
}
Example: http://jsfiddle.net/6bkzxoff/1/
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.