Highcharts bar chart configuration to increase height and round edges -
in angular 4 project using angular2-highcharts library create stacked bar chart. following object configuration have far.
{ title: { text: '' }, xaxis: { categories: [''], crosshair: true, visible: false }, yaxis: { min: 0, max: 100, title: { text: '' }, labels: { enabled: true }, visible: false }, chart: { type: 'bar', backgroundcolor: 'rgba(255, 255, 255, 0.1)' }, legend: { enabled: false }, plotoptions: { column: { pointpadding: 0, borderwidth: 0, stacking: 'normal', datalabels: { enabled: true, formatter: function() { return this.point.y + '%'; }, inside: true }, enablemousetracking: false, }, series: { stacking: 'normal', datalabels: { enabled: true, formatter: function () { if (this.point.y) { return this.point.y + '%'; } return ''; }, style: { fontsize: '10px' }, padding: 10 }, borderwidth: 0 } }, series: [{ name: 'pending', data: ..., color: '#ff4233' }, { name: 'executed', data: ..., color: '#34d788' }, { name: 'cancelled', data: ..., color: '#8f8c87' }] }
as see in desired result chart has more height , edges round. don't know how do.
have tried use rounded-corners plugin? can use following properties:
borderradiustopleft
, borderradiustopright
, borderradiusbottomright
, borderradiusbottomleft
plugin reference:
https://github.com/highcharts/rounded-corners
example:
http://jsfiddle.net/3lhzx8ao/
Comments
Post a Comment