Chartjs-Is there a way to style multiple borders on Doughnut chart with Chart.js library?

by

2👍

✅

Since you didn’t receive an answer so far, I allow myself to propose a solution that works in case your chart is of a fixed size. This is far from being a perfect solution but the user won’t notice the rather weird code behind.

You can fake the outer and inner borders by defining additional datasets as shown in the code snippet below.

new Chart("myChart", {
  type: 'doughnut',
  data: {
    labels: ["Red", "Blue", "Yellow"],
    datasets: [{
      data: [1, 1, 1],
      borderColor: "#CCCCCC",
      backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"], // required for correct legend colors
      weight: 0.01,
      borderWidth: 1
    }, 
    {
      data: [1],
      backgroundColor: "#FFFFFF",
      hoverBackgroundColor: "#FFFFFF",
      weight: 0.1,
      borderWidth: 1
    },
    {
      data: [200, 100, 25],
      backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
    },  
    {
      data: [1],
      backgroundColor: "#FFFFFF",
      hoverBackgroundColor: "#FFFFFF",
      weight: 0.1,
      borderWidth: 0
    },
      {
      data: [1, 1, 1],
      borderColor: "#CCCCCC",
      weight: 0.03,
      borderWidth: 1
    }]
  },
  options: {
    legend: {
      display: true
    },
    tooltips: {
      filter: tooltipItem => tooltipItem.datasetIndex == 2
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="80"></canvas>

Leave a comment