2

I'm trying to create a scatter plot with Chartjs. I want to have few datasets centered around one X value, and three Y values. When I can't set the custom X labels for my dataset, and also can't set a fixed range for X axes.

This is how I generate the data:

     function generateData(n, xCenter, yCenter) {
            var data = [];
            var spread = 0.2
            for (var i = 0; i < n; i++) {
            data.push({
                    x: (Math.random() - 0.5)*spread + xCenter,
                    y: (Math.random() - 0.5)*spread + yCenter
            })
            }
            return data
            } 
            var scatterChartData = {
            datasets: [
                {
            label: 'My First dataset',
                    backgroundColor: "#0000FF",
                    data: generateData(100, 1, 2)
            }, 
            {
            label: 'My Second dataset',
                    backgroundColor: "#00FF00",
                    data: generateData(50, 1, 3)
            },
            {
            label: 'My Second dataset',
                    backgroundColor: "#00FF00",
                    data: generateData(50, 1, 4)
            },
            ]
            }

Here are the scatter options:

var scatterOptions = {
            tooltips: {
            enabled: true
            },
                    responsive: true, // Instruct chart js to respond nicely.
                    maintainAspectRatio: false, // Add to prevent default behaviour of full-width/height  
                    responsive: true,
                    legend: {
                    display: false
                    },
                    scales: {
                    xAxes: [{
                    gridLines: {
                    display: false,
                            ticks: {
                            min: 0,
                            max: 10,
                                    stepSize: 0.01
                            }
                    }
                    }],
                            yAxes: [{
                            gridLines: {
                            display: true,
                                    ticks: {
                                    stepSize: 0.01,
                                            suggestedMin: 0.5,
                                            suggestedMax: 5
                                    }
                            }
                            }]
                    }
            }

And this is the plot:

            var myChart = new Chart(ctx, {
            showTooltips: false,
                    type: 'scatter',
                    data: scatterChartData,
                    options: scatterOptions
            });

0 Answers0