Chart content doesn’t display

[Yohann]

Hello everyone,
I have some trouble using a spline chart.
The div load without any issues, the title on Y axis is displayed, same for the X axis.
Also, if I hover the div, I see the tooltip with the datas.
But there is no splines displayed. I try to change with collumns or other, the result is the same.

Here is the code :

var chart = new CanvasJS.Chart("chartContainer", {
            	animationEnabled: true,
            	title:{
            		text: "title"
            	},
            	axisX: {
            		valueFormatString: "#,##0.## appels"
            	},
            	axisY: {
            		title: "Nombre d'appels",
            		includeZero: true
            	},
            	legend:{
            		cursor: "pointer",
            		fontSize: 16,
            		itemclick: toggleDataSeries
            	},
            	toolTip:{
            		shared: true
            	},
            	data: [{
            		name: "Appels totaux",
            		type: "spline",
            		yValueFormatString: "#,##0.## appels",
            		showInLegend: true,
            		visible: true,
            		dataPoints:[{"y":"2","label":"07:00-07:30"},
            		{"y":"1","label":"07:30-08:00"},
            		{"y":"6","label":"08:00-08:30"},
            		{"y":"6","label":"08:30-09:00"},
            		{"y":"4","label":"09:00-09:30"},
            		{"y":"4","label":"09:30-10:00"},
            		{"y":"6","label":"10:00-10:30"},
            		{"y":"10","label":"10:30-11:00"},
            		{"y":"7","label":"11:00-11:30"},
            		{"y":"8","label":"11:30-12:00"},
            		{"y":"4","label":"12:00-12:30"},
            		{"y":"7","label":"12:30-13:00"},
            		{"y":"1","label":"13:00-13:30"},
            		{"y":"2","label":"13:30-14:00"},
            		{"y":"6","label":"14:00-14:30"},
            		{"y":"8","label":"14:30-15:00"},
            		{"y":"8","label":"15:00-15:30"},
            		{"y":"8","label":"15:30-16:00"},
            		{"y":"3","label":"16:00-16:30"},
            		{"y":"7","label":"16:30-17:00"},
            		{"y":"2","label":"17:00-17:30"},
            		{"y":"9","label":"17:30-18:00"},
            		{"y":"2","label":"18:00-18:30"},
            		{"y":"1","label":"18:30-19:00"},
            		{"y":"1","label":"19:30-20:00"}]
            	},
            	{
            		name: "Appels pris",
            		type: "spline",
            		yValueFormatString: "#,##0.## appels",
            		showInLegend: true,
            		visible : true,
            		dataPoints: [{"y":"0","label":"07:00-07:30"},
            		{"y":"0","label":"07:30-08:00"},
            		{"y":"4","label":"08:00-08:30"},
            		{"y":"4","label":"08:30-09:00"},
            		{"y":"4","label":"09:00-09:30"},
            		{"y":"4","label":"09:30-10:00"},
            		{"y":"6","label":"10:00-10:30"},
            		{"y":"5","label":"10:30-11:00"},
            		{"y":"7","label":"11:00-11:30"},
            		{"y":"8","label":"11:30-12:00"},
            		{"y":"4","label":"12:00-12:30"},
            		{"y":"5","label":"12:30-13:00"},
            		{"y":"1","label":"13:00-13:30"},
            		{"y":"2","label":"13:30-14:00"},
            		{"y":"5","label":"14:00-14:30"},
            		{"y":"6","label":"14:30-15:00"},
            		{"y":"8","label":"15:00-15:30"},
            		{"y":"6","label":"15:30-16:00"},
            		{"y":"3","label":"16:00-16:30"},
            		{"y":"6","label":"16:30-17:00"},
            		{"y":"2","label":"17:00-17:30"},
            		{"y":"3","label":"17:30-18:00"},
            		{"y":"2","label":"18:00-18:30"},
            		{"y":"0","label":"18:30-19:00"},
            		{"y":"0","label":"19:30-20:00"}]
            	}]
            });
            chart.render();
        
            function toggleDataSeries(e){
            	if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
            		e.dataSeries.visible = false;
            	}
            	else{
            		e.dataSeries.visible = true;
            	}
            	chart.render();
            }

And the HTML :

<div id="chartContainer" class="mt-3 mx-3 card" style="height: 370px; width:calc(90vw)"></div>

Here is a screen shot of the div, you can see the “zero” at the top left…
https://www.casimages.com/i/20081404383816670.png.html

Thank you very much for your help

• This topic was modified 4 years, 4 months ago by Yohann. Reason: forgot code quote

[Vishwas R]

@yohann,

Datapoint y-value can be numeric only, but you seems to be passing it as string. Passing it as number should work fine.

If you are still facing issue, kindly create JSFiddle reproducing the issue and share it with us so that we can look into the code, understand the scenario better and help you resolve.

From what we have observed, sometimes things get delayed mostly when we are not able to reproduce the issue or not able to understand the exact requirements or the solution that we provide may not work properly due to the variation in chart-options being used by you and us.

Having a JSFiddle helps us in figuring out the issue and many a time we can just edit your code to fix the issue right away.

—
Vishwas R
Team CanvasJS