Radial Bar with Doughnut Chart

Hello.

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: [
        "Element1",
        "Element2",
        ""
    ],
    datasets: [
        {
            data: [value1, 0, 100 - value1],
            backgroundColor: [
                "#FF6384",
                "#00CCFF",
                "white"
            ]
        },
        {
          data: [0, value2, 100 - value2],
            backgroundColor: [
                "#FF6384",
                "#00CCFF",
                "white"
            ]
        }
        ]
};
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.

[etimberg]

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

[calculateTotal[(https://github.com/chartjs/Chart.js/blob/master/src/controllers/controller.doughnut.js#L257)

// 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

[BeardedYapper]

if you dont want to modify all doughnut charts create your own type extended of doughnut :

`Chart.defaults.RoundedDoughnut  = Chart.helpers.clone(Chart.defaults.doughnut);
Chart.controllers.RoundedDoughnut = Chart.controllers.doughnut.extend() 
Chart.controllers.RoundedDoughnut.prototype.calculateTotal = function() {
  return 100; // all data now has to be in the range [0, 100]
};`