Rounded corners in tall charts
I have a graph like this http://jsfiddle.net/developer_fiddle/6VKtb/
I want to get rounded corners in this graph, but I cannot do that because I used conspiracy stripes here. Is it possible to have rounded corners in this graph? There is also an option to move the circle marker slightly below the panel.
Corresponding code
function drawGraph(point,container)
{
Highcharts.setOptions({
chart:{
type:'bar',
margin:[15,15,35,15],
plotBorderWidth: 1,
plotBorderColor: '#999',
},
credits:{enabled:false},
legend:{enabled:false},
title:{text:''},
xAxis:{
tickLength:0,
lineWidth:0,
labels: ""
},
yAxis:{
min:1,
tickColor:'#888',
tickWidth:2,
tickLength:6,
tickInterval:1,
minorTickInterval:5,
minorTickWidth:2,
minorTickLength:4,
minorGridLineWidth:0,
tickPosition: 'outside',
gridLineWidth:1,
endOnTick:false,
},
plotOptions:{
series: {
animation: false,
},
bar:{
borderRadius:10,
},
scatter:{
animation:false,
marker:{
radius:'15',
fillColor : '#F00',
}
}
}
});
var chart1 = new Highcharts.Chart({
chart:{renderTo:container},
xAxis:{max:1},
yAxis:{
title:{
text:'',
},
max:10,
labels:{y:20,style:{fontSize:'11px'}},
plotBands:[{from:1,to:1.5,color: 'rgba(214,69,41,.3)'},
{from:1.5,to:3.5,color:'rgba(240,168,57,.3)'},
{from:3.5,to:5,color: 'rgba(209,218,85,.3)'},
{from:5,to:6,color: 'rgba(166,199,111,.3)'},
{from:6,to:7.5,color: 'rgba(130,182,69,.3)'},
{from:7.5,to:9.5,color: 'rgba(106,150,49,.3)'},
{from:9.5,to:10,color: 'rgba(82,121,44,.3)',outerRadius: '105'}]
},
series:[
{name:'Target',type: 'scatter',data:[[0,0]]}]
});
point = parseInt(point);
chart1.series[0].points[0].update({x:0,y:point}, true, {duration: 1000});
}
source to share
How to use a bar chart with stacking
for normal
and rounded corners plugin? Take a look: http://jsfiddle.net/2TuCW/67/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
bar: {
stacking: 'normal'
}
},
yAxis: {
endOnTick: false,
maxPadding: 0
},
series: [{
data: [29.9],
// usage:
borderRadiusTopLeft: 25,
borderRadiusTopRight: 25
}, {
data: [29.9]
}, {
data: [29.9]
}, {
data: [29.9]
}, {
data: [29.9],
borderRadiusBottomRight: 25,
borderRadiusBottomLeft: 25
}]
});
source to share
There seems to be no plotBorderRadius parameter, per document and per experiment.
There is a chartBorderRadius, but it will only help you if you make the graph fill the entire chart area, which means your marker cannot go beyond the chart area as it is now.
In your current code, you are not showing any settings for round corners other than the "bar" type, but I do not see a row of dashes in your data. The settings for the panel type do not apply to plotBands or any other element.
I would suggest your two options are:
1) make the graph fill the whole chart area by setting all margins and distance to 0, or 2) find some complicated svg code to draw it by hand
source to share