JSFiddle - React, Tailwind, and code Playground

by bairog

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/0.7.0/chartjs-plugin-datalabels.min.js"></script>
<canvas id="myChart1"></canvas>

JavaScript

var pointsData = {
        datasets: [{
            datalabels: {
                color: '#c0c0c0'
            },
            label: 'лидер',
            fill: false,
            lineTension: 0,
            data: [{ x: 0, y: 0, name: "Лидер" }],
            backgroundColor: '#c0c0c0',
            showLine: false
        },
        {
            datalabels: {
                color: '#e44269'
            },
            label: 'выбрали сотрудника как тактического лидера',
            fill: false,
            lineTension: 0,
            data: [{ x: 0.309, y: -0.951, name: "Сидоров1" }, { x: -0.666, y: 0.753, name: "Иванов1" }],
            backgroundColor: '#e44269',
            showLine: false
        },
        {
            datalabels: {
                color: '#ed7506'
            },
            label: 'выбрали сотрудника как стратегического лидера',
            fill: false,
            lineTension: 0,
            data: [{ x: 0.309, y: 0.951, name: "Сидоров2" }, { x: -0.666, y: -0.753, name: "Иванов2" }],
            backgroundColor: '#ed7506',
            showLine: false
        }
        ]
    };

    var optionsPoints = {
        maintainAspectRatio: false,
        animation: false,
        legend: false,
        scales: {
            xAxes: [{
                display: false,
                ticks: {
                    min: -1.1,
                    max: 1.1
                }
            }],
            yAxes: [{
                display: false,
                ticks: {
                    min: -1.1,
                    max: 1.1
                }
            }]
        },
        plugins: {
            // Change options for ALL labels of THIS CHART
            datalabels: {
                align: 'start',
                anchor: 'end',
                font: {
                    weight: 'bold'
                },
                formatter: function (value, context) {
                    return value.name;
                }
            }
        }
    };


   ...