Chartjs-Is it possible to remove the cutout border on a doughnut graph using ChartJS 3.9?

by

0👍

✅

Ok I finally found a solution for my own question. It’s quite roundabout, so I don’t know if it’s an actual answer for anyone else.

It involves using three graphs, unfortunately:

var sliceA = 60000,
    sliceB = 24000,
    sliceC = 36000;
var protected = (((sliceA + sliceB)/(sliceA + sliceC + sliceB)) * 360);

//colors
var outerRing = 'green';

var ctx = document.getElementById("chart");
var chart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    datasets: [{
        data: [sliceA, sliceB, sliceC],
        backgroundColor: ['limegreen', 'skyblue', 'firebrick'],
        radius: '82%',
        cutout: '50%',
    }]
  }
});
var chart2 = document.getElementById('chart2').getContext('2d');

let doughnut2 = new Chart(chart2, {
  type: 'doughnut',
  data: {
    datasets: [{ // OUTER ring
      data: [1, 98, 1], //leave at 100
      backgroundColor: [outerRing, 'transparent', outerRing],
      circumference: (protected + 5), //determines circumference of outer border X out of 360
      weight: 0.5,
      radius: '100%',
      borderWidth: 0,
      borderAlign: 'inside',
      borderColor: 'transparent',
        rotation: -2
    }, 
        { data: //14, 14, 22, 37, 13
            [100],
            backgroundColor: [outerRing],
            radius: '97%',
            cutout: '92%',
            circumference: (protected + 2),
            borderWidth: '5px',
            borderColor: outerRing,
            rotation: -1
        }
    ]
  },

  options: {
    parsing: {
      key: 'nested.value'
    }
  }

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<div class="container">
  <canvas id="chart" style="position:absolute;"></canvas>
  <canvas id="chart2" style="position:absolute;"></canvas>
</div>

it’s not perfect, i’m still working out how to make the back rotation and addition to the variable "protected" in the outer rings responsive, with the intention of making it so that the inside of each tick mark aligns perfectly with 0 degrees and var protected degrees on the circle, to properly indicate that the outer ring encompasses all slices of the doughnut chart within the specified range.

you can change the outer ring style from a capital i to a [ style by changing the radius of each of the two layers of the outer ring. Switching the second dataset to be 100% and the first to be ~95% will change it accordingly.

0👍

You can leave a single line instead of a rectangle by modifying the width property weight: 0.15 to weight: 0.001 and the border property borderWidth: 4 to borderWidth: 1. There is no other property you can change to make it more like what you want.

The new code:

  var chart1 = document.getElementById('chart1').getContext('2d');

  let doughnut1 = new Chart(chart1, {
    type: 'doughnut',
    data: {
      datasets: [{ // OUTER ring
        data: [100], //leave at 100
        backgroundColor: ['#fff'],
        circumference: 300, //determines circumference of outer border X out of 360
        weight: 0.001,
        radius: '100%',
        borderColor: 'black',
        borderWidth: 1
      }, {
        data: [14, 14, 22, 37, 13],
        backgroundColor: ['#f5ce42', '#ccc3a3', '#fc95f2', '#cdb2ed', '#423225'],
        radius: '95%',
        borderColor: 'black',
        borderAlign: 'inside'
      }]
    }
  });

Leave a comment