many datapoints
Basic Column Chart
HTML
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
TypeScript
const DATE_FORMAT: string = 'DD.MM.YYYY';
const TIME_FORMAT_FULL: string = 'HH:mm:ss.ff';
const TIME_FORMAT_SHORT: string = 'HH:mm:ss';
const DATE_TIME_FORMAT: string = 'DD.MM.YYYY HH:mm:ss';
const defaultChartOptions = {
zoomEnabled: false,
zoomType: 'x',
theme: 'white',
toolTip: {
shared: true,
enabled: true,
animationEnabled: false,
contentFormatter: function (e) {
let content = `${CanvasJS.formatDate(e.entries[0].dataPoint.x, this.DATE_TIME_FORMAT)}<br/>`;
for (let i = 0; i < e.entries.length; i++) {
content += `<span style='color:${e.entries[i].dataSeries.lineColor}'>${
e.entries[i].dataSeries.name
}</span><strong> ${e.entries[i].dataPoint.y.toFixed(3)}</strong><br/>`;
}
return content;
}
},
axisX: {
interval: 1,
intervalType: 'minute',
labelFontSize: 14,
labelFormatter: function (e) {
return CanvasJS.formatDate(e.value, this.TIME_FORMAT_FULL);
},
gridThickness: 1,
gridColor: '#9C9998',
xValueType: 'dateTime',
xValueFormatString: this.TIME_FORMAT_FULL,
crosshair: {
enabled: true,
shared: true,
snapToDataPoint: true,
labelFormatter: function (e) {
return CanvasJS.formatDate(e.value, this.TIME_FORMAT_FULL);
}
},
stripLines: [],
// labelWrap: false,
labelAutoFit: true
// labelAngle: 0
},
axisY: [{
labelFontSize: 14,
gridThickness: 1,
gridColor: '#9C9998'
}],
axisY2: [],
backgroundColor: '#ffffff',
data: [
{
markerType: 'circle',
markerSize: 1,
type: 'spline',
xValueType: 'dateTime',
yValueFormatString: '###',
xValueFormatString: 'HH:mm:ss.ff',
showInLegend: false,
lineThickness: 3,
axisYType: 'primary',
lineDashType: null,
"dataPoints": [
{
"x":...