Radial Bar with Doughnut Chart


There is no radial bar element, but I think it should be possible to make one with doughnut chart but I have some issues with it.

The way I want it to act is to have several lines in certain domain for each line and the rest of the bar is empty. You can see it as a multiple doughnut charts each having only one value.

Problem is doughnut chart stretches sum of values to 100%% so I have to add second element and make it transparent (white) but it still selects when I hover and has a tooltip.

How do I get rid of tooltip for certain elements and disable hover shadow for them too?

Here’s what I have now.

var value1 = 50, value2= 90
var ctx = document.getElementById("myChart");
var data = {
    labels: [
    datasets: [
            data: [value1, 0, 100 - value1],
            backgroundColor: [
          data: [0, value2, 100 - value2],
            backgroundColor: [
var options = {
  rotation: Math.PI,
  circumference: Math.PI,
  cutoutPercentage: 77
var myDoughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: data,
    options: options

Or the more global question is how do I leave some parts of the doughnut empty. I could have different circumferences if there was only one element in dataset, but i have several.

Author: Fantashit

1 thought on “Radial Bar with Doughnut Chart

  1. @Darel13712 I think I have a way that you can achieve that but it requires some patching


    // Patches the calculateTotal method to have a hard-coded maximum
    Chart.controllers.doughnut.prototype.calculateTotal = function() {
      return 100; // all data now has to be in the range [0, 100]

    Then when creating your chart, only have 1 dataset.
    Fiddle of my idea.

    I’ve tagged as an enhancement to see if we can support this in a better way

Comments are closed.