I'm using highcharts and I love them, but my issue is that when I add use the round corner plugin, if I have a stacked chart with a 0 in it, then the radius wont be applied.
Issue: Here Take a look at Jun and July.
Goal: In this case I need a way to assign the radius to the left of june and the right of july.
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',
animation: false
}
},
series: [
{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 0, 148.5, 216.4, 194.1, 95.6, 54.4],
// usage:
borderRadiusTopLeft: 5,
borderRadiusTopRight: 5
}, {
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
// usage:
borderRadiusBottomRight: 10,
borderRadiusBottomLeft: 10
}
]
});
You can adjust rounded-corners.js to your needs to something like this
(function (H) {
var curPercentage=[];
H.wrap(H.seriesTypes.column.prototype, 'translate', function (proceed) {
var options = this.options,
rTopLeft = options.borderRadiusTopLeft || 0,
rTopRight = options.borderRadiusTopRight || 0,
rBottomRight = options.borderRadiusBottomRight || 0,
rBottomLeft = options.borderRadiusBottomLeft || 0,
topMargin = options.topMargin || 0,
bottomMargin = options.bottomMargin || 0;
proceed.call(this);
if (rTopLeft || rTopRight || rBottomRight || rBottomLeft) {
H.each(this.points, function (point) {
var iBottomRight = rBottomRight,
iBottomLeft = rBottomLeft,
iTopRight = rTopRight,
iTopLeft = rTopLeft;
//console.log(point);
if (typeof(curPercentage[point.index])=='undefined'){
curPercentage[point.index]=0;
}
var prevPercentage = curPercentage[point.index];
curPercentage[point.index]+=1.0*parseFloat(point.percentage).toFixed(6);
//console.log(prevPercentage);
//console.log(curPercentage);
if (prevPercentage==0 & curPercentage[point.index] == 100) {
// special case, only one value > 0, preserve all border radius
// reset for the next call
curPercentage[point.index]=0;
} else if (prevPercentage==0) {
//right side
iBottomRight = 0;
iBottomLeft = 0;
} else if (curPercentage[point.index] == 100) {
//left side
iTopRight = 0;
iTopLeft = 0;
// reset for the next call
curPercentage[point.index]=0;
} else {
// no radius
iBottomRight = 0;
iBottomLeft = 0;
iTopRight = 0;
iTopLeft = 0;
}
var shapeArgs = point.shapeArgs,
w = shapeArgs.width,
h = shapeArgs.height,
x = shapeArgs.x,
y = shapeArgs.y;
// Preserve the box for data labels
point.dlBox = point.shapeArgs;
point.shapeType = 'path';
point.shapeArgs = {
d: [
'M', x + iTopLeft, y + topMargin,
// top side
'L', x + w - iTopRight, y + topMargin,
// top right corner
'C', x + w - iTopRight / 2, y, x + w, y + iTopRight / 2, x + w, y + iTopRight,
// right side
'L', x + w, y + h - iBottomRight,
// bottom right corner
'C', x + w, y + h - iBottomRight / 2, x + w - iBottomRight / 2, y + h, x + w - iBottomRight, y + h + bottomMargin,
// bottom side
'L', x + iBottomLeft, y + h + bottomMargin,
// bottom left corner
'C', x + iBottomLeft / 2, y + h, x, y + h - iBottomLeft / 2, x, y + h - iBottomLeft,
// left side
'L', x, y + iTopLeft,
// top left corner
'C', x, y + iTopLeft / 2, x + iTopLeft / 2, y, x + iTopLeft, y,
'Z']
};
});
}
});
}(Highcharts));
with this change, you will need to set the border radius in all series
series: [{
data: [50, 71.5, 106.4, 129.2, 144.0, 176.0, 0, 148.5, 216.4, 194.1, 95.6, 54.4],
// usage:
borderRadiusTopLeft: 5,
borderRadiusTopRight: 5,
borderRadiusBottomRight: 5,
borderRadiusBottomLeft: 5,
}, {
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
borderRadiusBottomRight: 10,
borderRadiusBottomLeft: 10,
borderRadiusTopLeft: 10,
borderRadiusTopRight: 10
}]
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments