I have incorporated ng2 chart into my Angular application.
Here is a snippet of my code:
<div style="display: block; height: 150px; width: 200px">
<canvas baseChart width="400" height="400" [datasets]="lineChartData" [labels]="lineChartLabels"
[options]="lineChartOptions" [colors]="lineChartColors" [legend]="lineChartLegend" [chartType]="lineChartType"
[plugins]="lineChartPlugins">
</canvas>
</div>
.ts file
import { Component, OnInit, ViewChild } from "@angular/core";
import { ChartDataSets, ChartOptions } from "chart.js";
import { Color, Label } from "ng2-charts";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
public lineChartData: ChartDataSets[] = [
{ data: [65, 59, 80, 81, 56, 55, 40], label: "Series A" }
];
public lineChartLabels: Label[] = ["", "", "", "", "", "", ""];
public lineChartOptions: ChartOptions & { annotation: any } = {
responsive: true
};
public lineChartColors: Color[] = [
{
borderColor: "black",
borderWidth: 1,
pointBorderColor: "white",
backgroundColor: "rgba(135,206,235, 0.3)"
}
];
public lineChartLegend = true;
public lineChartType = "line";
public lineChartPlugins = [];
constructor() {}
ngOnInit() {}
}
The problem I'm facing currently is the appearance of number labels and background check type boxes, which I want to hide. Can this be achieved? I have tried but unable to resolve it.
For reference, you can view the official example here:
https://stackblitz.com/edit/ng2-charts-line-template
The updated version shows that the background line and label have been removed with the help of an answer, but there are still some lines appearing at the top: https://i.sstatic.net/DO1OC.png