I'm using ChartJS for a project at work, where I try to generate a chart from one or more series of data and some option (chart type, title, type of values of x and y, and so on). Everything is going smooth except of a scatter type when I have multiple dataset on data.
var ctx = $('#myChart');
var chart = new Chart (ctx,{
type: "scatter",
data: {
"datasets":[
{
label:"Series #1",
fill:false,
borderColor:"rgba(0,137,176,0.4)",
backgroundColor:"rgba(0,137,176,0.1)",
pointBorderColor:"rgba(0,137,176,0.7)",
pointBackgroundColor:"rgba(0,137,176,0.5)",
data:[
{"x":"alpha","y":36.2},
{"x":"beta","y":36.9},
{"x":"gamma","y":37},
{"x":"delta","y":38.3},
{"x":"epsilon","y":37.9},
{"x":"zeta","y":37.2}
]
}, {
label:"Series #2",
fill:false,
borderColor:"rgba(19,237,150,0.4)",
backgroundColor:"rgba(19,237,150,0.1)",
pointBorderColor:"rgba(19,237,150,0.7)",
pointBackgroundColor:"rgba(19,237,150,0.5)",
data:[
{"x":"alpha","y":37.4},
{"x":"beta","y":37.1},
{"x":"gamma","y":36.5},
{"x":"delta","y":36.4},
{"x":"epsilon","y":36.4},
{"x":"zeta","y":36.5}
]
}, {
label:"Series #3",
fill:false,
borderColor:"rgba(248,231,28,0.4)",
backgroundColor:"rgba(248,231,28,0.1)",
pointBorderColor:"rgba(248,231,28,0.7)",
pointBackgroundColor:"rgba(248,231,28,0.5)",
data:[
{"x":"alpha","y":38.1},
{"x":"beta","y":38.4},
{"x":"gamma","y":39},
{"x":"delta","y":39.2},
{"x":"epsilon","y":38.1},
{"x":"zeta","y":37.4}
]
}],
"labels":["alpha","beta","gamma","delta","epsilon","zeta"]},
options: {
elements: { line: { tension: 0 } },
scales: {
xAxes: [
{
scaleLabel:{
display:true,
labelString:"Date"
},
bounds:"data",
type:"category"
},{
display:false
},{
display:false
}
],
yAxes:[
{
scaleLabel: {
display:true,
labelString:"Temperature (°C)"
},
bounds:"data",
ticks:{
min:35.9,
max:39.5,
autoSkip:false,
stepSize:0.6
}
}, {
display:false
}, {
display:false
}
]
},
},
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<canvas id="myChart"></canvas>
</body>
</html>As you can easily notice, in my graph there's no grid, no xAxes definition, no yAxes definition. And I don't know why.
So, this is my question: why my scatter chart do not show grid and axes?
I give two more hints:
1 - if you play with the snippet changing the chart type from scatter to line, everything works fine.
2 - The weird xAxes structure is automatically generated since the three passed datasets uses all the same categories. My code create the first xAxes from the first dataset, and create a simple object { display: false } for the other datasets (chart.options.scales.xAxes requires to be an Array of the same size of the Dataset).
I always consider myself a newbie so any suggestion (about this problem, but also about my approach to it) is more than welcome.
If you remove the
{ display: false }you can see the gridlines. Not sure if you need this or not?If you do really need this, then you can always check
if (type === 'line')and if so you add the{ display: false }to the options.