+ ) {
+ this.chartData = {
+ dataset: [
+ {
+ label: '',
+ data: [{ x: 0, y: 0 }],
+ tension: 0.2,
+ pointBackgroundColor: this.cssHelper.propertyValue('chart-color-strong-blue'),
+ backgroundColor: this.cssHelper.propertyValue('chart-color-translucent-blue'),
+ borderColor: this.cssHelper.propertyValue('chart-color-strong-blue'),
+ borderWidth: 1
+ },
+ {
+ label: '',
+ data: [],
+ tension: 0.2,
+ pointBackgroundColor: this.cssHelper.propertyValue('chart-color-orange'),
+ backgroundColor: this.cssHelper.propertyValue('chart-color-translucent-yellow'),
+ borderColor: this.cssHelper.propertyValue('chart-color-orange'),
+ borderWidth: 1
+ }
+ ]
+ };
+
+ this.options = {
+ responsive: true,
+ maintainAspectRatio: false,
+ animation: false,
+ elements: {
+ point: {
+ radius: 0
+ }
+ },
+ legend: {
+ display: false
+ },
+ tooltips: {
+ mode: 'index',
+ custom: function (tooltipModel: { x: number; y: number }) {
+ tooltipModel.x = 10;
+ tooltipModel.y = 0;
+ }.bind(this),
+ intersect: false,
+ displayColors: true,
+ backgroundColor: this.cssHelper.propertyValue('chart-color-tooltip-background'),
+ callbacks: {
+ title: function (tooltipItem: any): any {
+ return tooltipItem[0].xLabel;
+ },
+ label: (tooltipItems: any, data: any) => {
+ return (
+ ' ' +
+ data.datasets[tooltipItems.datasetIndex].label +
+ ' - ' +
+ tooltipItems.value +
+ ' ' +
+ this.chartDataUnits
+ );
+ }
+ }
+ },
+ hover: {
+ intersect: false
+ },
+ scales: {
+ xAxes: [
+ {
+ display: false,
+ type: 'time',
+ gridLines: {
+ display: false
+ },
+ time: {
+ tooltipFormat: 'DD/MM/YYYY - HH:mm:ss'
+ }
+ }
+ ],
+ yAxes: [
+ {
+ afterFit: (scaleInstance: any) => (scaleInstance.width = 100),
+ gridLines: {
+ display: false
+ },
+ ticks: {
+ beginAtZero: true,
+ maxTicksLimit: 4,
+ callback: (value: any) => {
+ if (value === 0) {
+ return null;
+ }
+ return this.convertUnits(value);
+ }
+ }
+ }
+ ]
+ },
+ plugins: {
+ borderArea: true,
+ chartAreaBorder: {
+ borderColor: this.cssHelper.propertyValue('chart-color-slight-dark-gray'),
+ borderWidth: 1
+ }
+ }
+ };
+ }