TypeScript
const DATE_FORMAT: string = 'DD.MM.YYYY';
const TIME_FORMAT: string = 'HH:mm:ss.ff';
const DATE_TIME_FORMAT: string = 'DD.MM.YYYY HH:mm:ss';
const chart = new CanvasJS.Chart("chartContainer", {
exportFileName: 'Trend Chart',
exportEnabled: true,
zoomEnabled: false,
zoomType: 'x',
theme: 'white',
toolTip: {
shared: true,
enabled: true,
animationEnabled: false,
},
axisX: {
labelFontSize: 14,
gridThickness: 1,
gridColor: '#9C9998',
labelAutoFit: true
},
axisY: [{
labelFontSize: 14,
gridThickness: 1,
gridColor: '#9C9998',
lineColor: '#FF2C6F',
labelFontColor: '#FF2C6F'
}, {
labelFontSize: 14,
gridThickness: 1,
gridColor: '#9C9998',
interval: 7,
lineColor: '#009933',
labelFontColor: '#009933'
}],
axisY2: [{
labelFontSize: 14,
gridThickness: 1,
gridColor: '#9C9998',
lineColor: '#FF2C6F',
labelFontColor: '#FF2C6F'
}, {
labelFontSize: 14,
gridThickness: 1,
gridColor: '#9C9998',
interval: 7,
lineColor: '#009933',
labelFontColor: '#009933'
}],
backgroundColor: '#ffffff',
data: [{
axisYIndex: 1,
lineColor: '#FF2C6F',
markerType: 'circle',
markerSize: 1,
type: 'spline',
showInLegend: false,
lineThickness: 1,
axisYType: 'secondary',
//axisYType: 'primary',
lineDashType: null,
dataPoints: [
{ x: 10, y: 71 },
{ x: 20, y: 55},
{ x: 30, y: 50 },
{ x: 40, y: 65 },
{ x: 50, y: 95 },
{ x: 60, y: 68 },
{ x: 70, y: 28 },
{ x: 80, y: 34 },
{ x: 90, y: 14}
]
}, {
axisYIndex: 2,
lineColor: '#009933',
markerType: 'circle',
markerSize: 1,
type: 'spline',
showInLegend: false,
lineThickness: 1,
//axisYType: 'secondary',
axisYType: 'primary',
lineDashType: null,
dataPoints: [
{ x: 20, y: 71},
{...