Spline Area StockChart are used as an alternative to Area in order to smoothen the data. Below Example also shows formatting the y-value being shown in tooltip. Try moving mouse over datapoints to observe the customized tooltip content.
window.onload = function () {
var dataPoints = [];
var stockChart = new CanvasJS.StockChart("stockChartContainer",{
title:{
text:"Exchange Rate for EUR to USD"
},
charts: [{
data: [{
type: "splineArea",
color: "#3698C5",
yValueFormatString: "€1 = $#,###.##",
dataPoints : dataPoints
}]
}],
navigator: {
slider: {
minimum: new Date(2015, 00, 01),
maximum: new Date(2016, 00, 01)
}
}
});
$.getJSON("https://canvasjs.com/data/gallery/stock-chart/usdeur.json", function(data) {
for(var i = 0; i < data.length; i++){
dataPoints.push({x: new Date(data[i].date), y: Number(data[i].price)});
}
stockChart.render();
});
}