JSFiddle - React, Tailwind, and code Playground

by jontxo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/1.0.0/chartjs-plugin-datalabels.min.js"></script>
<div class="x_content container-fluid">
                    <table class="w-100 d-flex flex-column">
                        <tr class="d-flex flex-row justify-content-center">
                            <td class="me-3">
                                <div class="chart-container">
                                    <canvas id="steps"></canvas>
                                </div>
                            </td>
                            <td class="align-top">
                                <table class="w-100">
                                    <tr>
                                        <th class="pe-2">
                                            <div>
                                                <p class="text-center">Status</p>
                                            </div>
                                        </th>
                                        <th class="me-2">                                              
                                            <div>
                                                <p class="text-center">Progress</p>
                                            </div>
                                        </th>
                                    </tr>
                                    <tr>
                                        <td class="pe-2">
                                            <p class="mb-0" data-toggle="tooltip" data-placement="left" title="Scenario passed">
                                                <i class="fa fa-check-circle passed-color me-2"></i>
                                                Passed
                                            </p>
                                        </td>
                                        <td...

JavaScript

var dataSteps = {"datasets":[{"backgroundColor":["#228B22","#E74C3C","#FFD119","#3498DB","#b73122","#F39C12"],"data":[19,0,0,0,0,0]}],"labels":["Passed","Failed","Pending","Skipped","Ambiguous","Undefined"]}
var pluginBeforeDrawOptions = (chart) => {
            const width = chart.width;
            const height = chart.height;
            const ctx = chart.ctx;
            ctx.restore();
            const fontSize = (height / 114).toFixed(2);
            ctx.font = fontSize + 'em sans-serif';
            // ctx.font = "30px " + fontStyle;
            ctx.textBaseline = 'middle';
            const text = chart.config.options.elements.text;
            const textX = Math.round((width - ctx.measureText(text).width) / 2);
            const textY = (height + chart.chartArea.top) / 2;
            ctx.fillStyle = '#696969';
            ctx.fillText(text, textX, textY);
            ctx.save();
        }

graphOptions = ( ) => ({    
    elements: {
        },
    legend: {
      display: false
    },
    maintainAspectRatio: true,
    plugins: {
      datalabels: {
        color: '#ffffff',
        formatter: (value) => value ? `${value}` : ''
      }
    },
  });


var generateChart = (chartName, chartData, graphOptions, pluginBeforeDrawOptions, chartCenterValue) => {
            const canvas = document.getElementById(chartName);
            const ctx = canvas.getContext('2d');
            graphOptions.elements.text = chartCenterValue;
            Chart.plugins.register(ChartDataLabels);
            Chart.pluginService.register({
                beforeDraw: pluginBeforeDrawOptions
            });
            const chart = new Chart(ctx, {
                data: chartData,
                options: graphOptions,
                plugins: [ChartDataLabels],
                type: 'doughnut'
                // tooltipFillColor: 'rgba(51, 51, 51, 0.55)',
            });
            
            return chart;
        }

    const centerNumberSteps = 19;
    const stepsChart =...