[Chartjs]-First point on scatter plot on JavaScript chart.js not showing

by

2👍

✅

Using .01 value instead of 0 is a funky work around. Also have included the parts to label X and Y axis. I’m on Firefox and all looks fine

EDIT: Included the negative start axis values

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
</head>

<body>


<script>
    var canvas = document.createElement('canvas');
    canvas.width = 400;
    canvas.height = 400;

    document.body.appendChild(canvas);

    var coordinates = [
        {x:0,y:0}, {x:5,y:5}, {x:15,y:15}, {x:20,y:20}, {x:25,y:25}
    ];

    var d1 = coordinates.slice(0,3);
    var d2 = coordinates.slice(3,coordinates.length);
    var data = {
        datasets: [
            {
                label: "Most Relavant",
                borderColor: 'red',
                backgroundColor : 'rgba(255,0,0,0.5)',
                data: d1
            },
            {
                label: "Others",
                borderColor: 'blue',
                backgroundColor : 'rgba(0,0,255,0.5)',
                data: d2
            }
        ]
    };

    new Chart(canvas, {
        type: 'scatter',
        data: data,                
        title:{
            display:true,
            text:'Chart.js Line Chart'
        },
        options: {
            responsive : false,
            scales: {
                xAxes: [{
                    ticks: {
                      min: -2,
                      stepSize: 5
                    },
                    type: 'linear',
                    position: 'bottom',
                    scaleLabel: {
                      display: true,
                      labelString: 'X axis label'
                    }
                }],
                yAxes: [{
                    ticks: {
                      min: -2,
                      stepSize: 5
                    },
                    scaleLabel: {
                      display: true,
                      labelString: 'Y axis label'
                    }
                }]
            }
        }
    });
</script>
</body>

Leave a comment