Doughnut Empty State | Chart.js
Description: Open source HTML5 Charts for your website

# # Doughnut Empty State

const config = { type: 'doughnut', data: data, options: { plugins: { emptyDoughnut: { color: 'rgba(255, 128, 0, 0.5)', width: 2, radiusDecrease: 20 } } }, plugins: [plugin] };

    const config = {
      type: 'doughnut',
      data: data,
      options: {
        plugins: {
          emptyDoughnut: {
            color: 'rgba(255, 128, 0, 0.5)',
            width: 2,
            radiusDecrease: 20
          }
        }
      },
      plugins: [plugin]
    };

const plugin = { id: 'emptyDoughnut', afterDraw(chart, args, options) { const {datasets} = chart.data; const {color, width, radiusDecrease} = options; let hasData = false; for (let i = 0; i < datasets.length; i += 1) { const dataset = datasets[i]; hasData |= dataset.data.length > 0; } if (!hasData) { const {chartArea: {left, top, right, bottom}, ctx} = chart; const centerX = (left + right) / 2; const centerY = (top + bottom) / 2; const r = Math.min(right - left, bottom - top) / 2; ctx.beginPath(); ctx.lineWidth = width || 2; ctx.strokeStyle = color || 'rgba(255, 128, 0, 0.5)'; ctx.arc(centerX, centerY, (r - radiusDecrease || 0), 0, 2 * Math.PI); ctx.stroke(); } } };

    const plugin = {
      id: 'emptyDoughnut',
      afterDraw(chart, args, options) {
        const {datasets} = chart.data;
        const {color, width, radiusDecrease} = options;
        let hasData = false;
        for (let i = 0; i < datasets.length; i += 1) {
          const dataset = datasets[i];
          hasData |= dataset.data.length > 0;
        }
        if (!hasData) {
          const {chartArea: {left, top, right, bottom}, ctx} = chart;
          const centerX = (left + right) / 2;
          const centerY = (top + bottom) / 2;
          const r = Math.min(right - left, bottom - top) / 2;
          ctx.beginPath();
          ctx.lineWidth = width || 2;
          ctx.strokeStyle = color || 'rgba(255, 128, 0, 0.5)';
          ctx.arc(centerX, centerY, (r - radiusDecrease || 0), 0, 2 * Math.PI);
          ctx.stroke();
        }
      }
    };

const data = { labels: [], datasets: [ { label: 'Dataset 1', data: [] } ] };

    const data = {
      labels: [],
      datasets: [
        {
          label: 'Dataset 1',
          data: []
        }
      ]
    };

## # Docs

- Data structures (`labels`)
- Plugins
- Doughnut and Pie Charts