Chart.js: Radial Bar with Doughnut Chart

[Darel13712]

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 do you have an image of what you're looking to achieve?

[Darel13712]

@etimberg Well basically what my code does but I want to hide white elements and their tooltips. They appear grey if you hover them.

upd I made hovercolour white and border too, but how do I turn tooltips off for them?

Also it would be cool to have option to make charts like these http://www.datavizcatalogue.com/methods/radial_bar_chart.html and write values inside chart for a single bar inside it like here https://vizuly.io/product/radial-progress/

[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

[Darel13712]

@etimberg thank you!

[etimberg]

Closing in favour of #3644 which has a proposal on how to solve this

[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]
};`