Create Lollipop Chart

Jedox allows you to insert a range of charts to visualise data in reports. When a particular chart is not on offer, it’s possible to customise charts to create the chart you want.

Jedox uses highcharts API: https://api.highcharts.com/highcharts/

Following the highcharts API you can customise the JSON in the advanced properties tab to create a custom chart. In this example I'll create a lollipop chart:

The chart is created by modifying a bar chart to layer 3 bars. The front bar is the coloured one. The second is a white bar that covers the black bar and gives the effect of a lollipop.

The black bar sits at the back.

To begin creating the chart you'll need to set up the columns of data the chart sources from. Lollipop charts show variances. We'll create 3 columns of data for the chart.

1. Black bar. Calculate variance as a percentage. This is the number that shows on the data label.

2. White bar. This is the shortest bar – make it 5% shorter than the black bar.

3. Colour bar. This is the middle length bar - make it 2.5% shorter than the black bar.

Now you have the data set up, the next step is to create a simple bar chart:

There is a bunch of editing you can do without going into advanced properties – let’s do that now.

Right click on the chart and click format chart properties.

For Chart and Plot area, border and fill should be set to no fill. In the legend section, set Show legend to unticked.

Click OK and close out of that. Right click on each axis and click format axis. Both axes should not be showing, and the left-hand axis should be reversed.

Format each data series by right clicking on each data series and clicking format data series. The longest bar should be black and show data labels formatted as a percentage. The other two bars should not show labels. Middle should be green and shortest should be white.

Your chart should look similar to this:

Now we’ll go into Advanced and edit the JSON to create the lollipop chart. This time after clicking Format chart properties go into the Advanced section.

Inside of plot options, add the following code:

"bar": {

      "grouping": false,

      "pointPadding": 0

    }

grouping - Disables automatic grouping (side-by-side)

pointPadding - sets No padding between columns

Next go into each series and add the following code.

Series 1 :

"pointWidth": 12

Series 2:

"pointWidth": 12

Series 3:

"negativeColor": "#ff0000",

"pointWidth": 12,

"padding":10

Result:

We've created a lollipop chart!