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": {
"title": {
"display": true,
"text": "No of Trials"
},
"ticks": {
"precision": 0
}
}
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart"></canvas>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>