CODEWITHSUNDEEP
angulartypescript
rameez khan
rameez khan

Reputation: 359

Angular ng2-chart can we hide labels and backgound layers

I am using ng2 chart in my angular app.

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

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() {}
}

Issue is its look this right now

enter image description here

I need to hide these number labels and this background check type boxes. Is it possible to hide them ? I am trying to do but i am stuck and not able to do this

Official example

https://stackblitz.com/edit/ng2-charts-line-template

Updated Background line and label are removed by help of answer but its showing some line on top enter image description here

Upvotes: 1

Views: 1233

Answers (1)

sofa_maniac
sofa_maniac

Reputation: 1657

For hiding the number labels on the left and hide the grid in the background respectively, add this in the lineChartOptions.

scales: { 
      yAxes: [{ ticks: { fontSize: 0 }}],
      xAxes: [{ gridLines: { display: false }}]
},

Upvotes: 2

Related Questions