top of page

Convert bar chart to progress bars

Below script to allow us convert a bar chart to progress bars.


  1. Create a bar chart

  • Bar chart should contains only one field under 'Categories' and no field under 'Break by'

  • Calculation of first value panel should be 1 and convert to percentage (100%). This is the grey color background bar in the screenshot.

  • Second value panel contains actual calculation for bar chart.

2. Add below script to widget

3. Save the script and refresh widget

widget.on('processresult', function(se, ev){ = false
	ev.result.yAxis[0].visible = false
	ev.result.xAxis.gridLineWidth = 0
	ev.result.xAxis.lineColor = 'transparent'
	ev.result.series[0].dataLabels = {enabled : false}
	ev.result.series[0].states = {
						hover: {
							enabled: false
	$.each(ev.result.series, function(index, value){
		value.borderRadius = 12

widget.on("beforedatapointtooltip", function (se, ev){

	if(ev.context.points[0].seriesName == ev.widget.metadata.panels[1].items[0].jaql.title)

432 views0 comments

Recent Posts

See All


bottom of page