Scatter chart test

by bairog

HTML

<div id="chartDiv"><canvas id="chart"></canvas></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

JavaScript

var data = {
  //labels:["0","1","2"],	
  datasets: [{
    label: 'Person',
    fill: false,
    lineTension: 0,
    data: [ {x: 0.2, y: 0.7, name: 'alex'}, {x: 0.5, y: 0.2, name: 'bart'}, {x: 0.9, y: 0.5, name: 'ken'} ],
    backgroundColor: 'black',
    borderColor: 'black',
    showLine: false
  }]
};

var optionsPoints = {
        maintainAspectRatio: false,
        animation: false,
        scales: {
            xAxis: {
						    display: false,
                min: -1.1,
                max: 1.1
            },
            yAxis: {
                display: false,
                min: -1.1,
                max: 1.1
            }
        },
        plugins: {
            datalabels: {
                align: 'start',
                anchor: 'start',
                font: {
                    weight: 'bold'
                },
								color: 'red',
                formatter: function (value, context) {
                    return value.name;
                }
            }
        }
    };

var ctx = document.getElementById("chart");
var myChart = new Chart(ctx, {
  type: 'scatter',
  data: data,
	plugins: [ChartDataLabels],
  options: optionsPoints
});