JSFiddle - React, Tailwind, and code Playground

by jontxo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0-rc.1/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 graphOptions =() => ({
            responsive: true,
            elements: {},
            legend: {
                display: false
            },
            maintainAspectRatio: true,
            plugins: {
                legend: {
                    display: false
                },
                datalabels: {
                    color: '#ffffff',
                    formatter: (value) => value ? `${value}` : ''
                }
            },
        })
    var writeValueInCenter =() => ({
            id: 'paint_number_in_center',
            beforeDraw: (chart) => {
                const { width } = chart;
                const { height } = chart;
                const ctx = chart.ctx;
                const textX = Math.round((width - ctx.measureText(chart.options.elements.text).width) / 2);
                const textY = (height + chart.chartArea.top) / 2;
                ctx.fillStyle = this.theme === 'Dark' ? '#73879c' : '#73879c';
                ctx.fillText(chart.options.elements.text, textX, textY);
                ctx.save();
            }
        })
    var generateChart = (chartName, chartData, graphOptions, chartCenterValue) => {
            const canvas = document.getElementById(chartName);
            const ctx = canvas.getContext('2d');
            (graphOptions.elements).text = chartCenterValue;
            const chart = new Chart(ctx, {
                data: chartData,
                options: graphOptions,
                plugins: [writeValueInCenter(), ChartDataLabels],
                type: 'doughnut'
            });
            return chart;
        }

    const centerNumberSteps = 19;
    const stepsChart = generateChart( 'steps', dataSteps, graphOptions(), centerNumberSteps );