Turning Pie Charts into Donut Charts

Ask the Community No-Code Solutions
1

ANOTHER STOP PRESS: This was a bit flaky - timing issue, sometimes didn’t work. This code is a bit more robust.

I don’t like pie charts - I think they look like something out of the Flintstones, so Claude and I came up with a bit of JS to turn them into Donut charts. And I think they look way better! And I also changed the % to the absolute value. Code below, should be obvious what does what, but I’ve left a list of the other things that can be changed below to get the imagination going … enjoy.

This is also set up to be used on multiple charts.

And it uses two listeners, one for when the view renders, and another for when the views redraws, for example if you have a filter on the view.

/****************************************************************************
 TURNS PIE CHARTS TO DONUT CHARTS WITH COUNTS NOT PERCENTAGES
****************************************************************************/
var donutTimer;

function applyDonut(event, view) {
  clearTimeout(donutTimer);
  donutTimer = setTimeout(function() {
    var viewId = view.key;
    var el = document.querySelector('#' + viewId + ' [data-highcharts-chart]');
    if (el) {
      var idx = parseInt(el.getAttribute('data-highcharts-chart'));
      var chart = Highcharts.charts[idx];
      if (chart) {
        chart.update({
          plotOptions: {
            pie: {
              innerSize: '50%',
              dataLabels: {
                formatter: function() {
                  return this.point.y;
                }
              }
            }
          }
        });
      }
    }
  }, 500);
}

$(document).on('knack-view-render.view_xxx knack-view-render.view_yyy', applyDonut);
$(document).on('knack-records-render.view_xxx knack-records-render.view_yyy', applyDonut);

image
image583×534 22.6 KB

Highcharts pie/donut charts have a lot of knobs. Main ones worth knowing:

Labels & Text

  • dataLabels.format — what shows on the slices (name, value, %, or combo)

  • dataLabels.distance — how far labels sit from the slice edge

  • dataLabels.style — font size, colour, weight

  • title.text / subtitle.text — chart title

Slices

  • innerSize — donut hole size (px or %)

  • size — overall pie size

  • startAngle — rotation of the whole chart

  • slicedOffset — how far a slice pops out on click

  • borderWidth / borderColor — slice borders

Colours

  • colors — array of hex colours for each slice, in order

  • Individual slice colour via the series data

Tooltip

  • tooltip.pointFormat — what shows on hover

  • tooltip.headerFormat — the header line

Legend

  • legend.enabled — show/hide

  • legend.layout — horizontal or vertical

  • legend.align / legend.verticalAlign — positioning

Interactivity

  • plotOptions.pie.allowPointSelect — click to slice out

  • plotOptions.pie.point.events — click handlers

To inspect current values before changing anything:

javascript

Highcharts.charts[1].userOptions

That dumps the full current config.

2

Nice one @LeighBerre96926! I’ve been enjoying your contributions over the last week.
There is a lot of untapped potential with Highcharts for Classic apps.