JSFiddle - React, Tailwind, and code Playground

by cubicalmonkey

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
   <div class="chart-container" >
        <canvas id="chart" >
        </canvas>
    </div>

CSS

.chart-container{
    width: auto;
    min-height: 300px;
    border:1px solid black;
    margin:0 auto;

}

JavaScript

var chart = new Chart('chart', {
        type: 'horizontalBar',
        data: {
            labels: ["dgfuadgfdsugfdf mgjugfsdgs", "blah blah..", "blah blah..","Something something something","Something something something","Something something something"],
            datasets: [{
                data: [6, 87, 56,25,100,65],
                backgroundColor: "#4082c4"
            }]
        },
        options:{
            responsive: true,
            maintainAspectRatio: true,
            plugins: {
                datalabels: {
                    color: 'black',
                    anchor: "end",
                    align: "right",
                    offset: 10,
                    display: function (context) {
                        return context.dataset.data[context.dataIndex];
                    },
                    /* Adjust data label font size according to chart size */
            			  font: function(context) {
                        var width = context.chart.width;
                        var size = Math.round(width / 32);

                        return {
                	          weight: 'bold',
                            size: size
                        };
                     },
                    formatter: Math.round
                }
            },
            legend: {
                "display": false
            },
            tooltips: {
                "enabled": false
            },
            scales: {
                yAxes: [{
                    barPercentage: 1.0,
                    gridLines: {
                        display: false
                    },
                    ticks: {
                        fontSize: 20,
                        beginAtZero: true,
                    },
                    /* Keep y-axis width proportional to overall chart width */
                    afterFit: function(scale) {
                        var chartWidth = scale.chart.width;
                        var...