Minimum Donut Slice - Apex Charts

46 views Asked by At

so I've recently been working on the ApexCharts library implementation and I have run into some problems. So, basically I am wanting to set a minimum size for a donut slice, because when data values have a huge gap it gets to the point where the slice becomes invisible, or at least not far off.

Here is an example of the chart: enter image description here

That data in the small slice is 30, the rest of the slices are 300, 400, 500, 600. So, what I am trying to achieve is to create some kind of logic to say that if the size of the slice is equal to or less than 50 set the size of the slice to 50.

However, the problem I am facing is that I need the slice to still show the original data.

Thanks in advance to anyone who can help!

This is my code so far:

var optionsDonutChart = {
  series: [30, 5, 300, 400, 500, 600],
  chart: {
    width: 450,
    type: 'donut',
  },
  dataLabels: {
    enabled: false,
  },
  plotOptions: {
    pie: {
      donut: {
        size: '50%',
      },
    },
  },
  stroke: {
    width: 10,
  },
  labels: ['Expired', 'Revoked', 'Expiring Soon', 'Issued', 'Draft', 'Not Started'],
  colors: ['#A82200', '#A82200', '#A82200', '#005835', '#2D77BE', '#2D77BE'],
  responsive: [{
    breakpoint: 480,
    options: {
      chart: {
        width: 200
      },
    }
  }]
};

if (optionsDonutChart.series.some(data => data <= 50)) {
  optionsDonutChart.plotOptions.pie.donut.size = '50%';
}

var chart = new ApexCharts(document.querySelector("#donutChart"), optionsDonutChart);
chart.render();
0

There are 0 answers