[Chartjs]-Scatter plot not showing anything chartjs needs some debugging

by

1👍

✅

2 things, dont use an outdated version of the lib since your config wont work and the y scale is a linear scale by default so if you want to use strings you need to specify it as a category scale

var ctx = document.getElementById("myChart");

var myChart = new Chart(ctx, {
  "type": "scatter",
  "data": {
    "datasets": [
      {
        "label": "EARRINGS",
        "data": [
          {
            "x": 13,
            "y": "19-07-2021"
          },
          {
            "x": 5,
            "y": "12-08-2021"
          }
        ],
        "showLine": true,
        "fill": false,
        "borderColor": "rgb(125,60,122)"
      },
      {
        "label": "RINGS",
        "data": [
          {
            "x": 4,
            "y": "09-08-2021"
          },
          {
            "x": 1,
            "y": "06-08-2021"
          },
          {
            "x": 9,
            "y": "12-08-2021"
          }
        ],
        "showLine": true,
        "fill": false,
        "borderColor": "rgb(125,60,122)"
      },
      {
        "label": "BANGLES",
        "data": [
          {
            "x": 2,
            "y": "06-08-2021"
          },
          {
            "x": 1,
            "y": "12-08-2021"
          }
        ],
        "showLine": true,
        "fill": false,
        "borderColor": "rgb(125,60,122)"
      },
      {
        "label": "NECKLACES",
        "data": [
          {
            "x": 1,
            "y": "12-08-2021"
          }
        ],
        "showLine": true,
        "fill": false,
        "borderColor": "rgb(125,60,122)"
      }
    ]
  },
  "options": {
    "scales": {
      "x": {
        "title": {
          "display": true,
          "text": "Date"
        },
        "ticks": {
          "precision": 0,
          "maxTicksLimit": 9
        }
      },
      "y": {
        type: 'category',
        "title": {
          "display": true,
          "text": "No of Trials"
        },
        "ticks": {
          "precision": 0
        }
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
<canvas id="myChart"></canvas>

Leave a comment