CODEWITHSUNDEEP
javascriptchart.js
omega
omega

Reputation: 43843

First point on scatter plot on JavaScript chart.js not showing

I created a scatter plot, this is the code below. The point at (0,0) does not show on the chart (actually it happens as long as x=0, y can be anything). If I hover on that point, the tooltip does show. Also when I set a title in the options, the title does not show up on the page.

Also how can I put a label on the x and y axis?

Does anyone know what I am doing wrong?

Thanks

 <!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<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: [{
                    type: 'linear',
                    position: 'bottom'
                }]
            }
        }
    });
</script>
</body>

</html>

I am on chrome 61 and 62. See screenshot:

capture

Upvotes: 1

Views: 2866

Answers (1)

pokeybit
pokeybit

Reputation: 1032

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>

Upvotes: 2

Related Questions