CODEWITHSUNDEEP
angulartypescriptchart.jsng2-charts
Amila Iddamalgoda
Amila Iddamalgoda

Reputation: 4286

Ng2-charts + How to customize the position of X axis labels?

I'm using https://valor-software.com/ng2-charts/ for generating following chart.

Expected Graph enter image description here

Actual Graph Right now what I have achieved is following. enter image description here

1.) How to customize the position of X axis labels as above displayed in Graph #1 ?

2.) Also regarding displaying the value percentages on top of each bar, https://github.com/valor-software/ng2-charts/issues/662 post helped however works only if mouse hover over the bar. Any solution so that data remains on the bar even if tooltip is displayed or on hover. Currently on mouse over it disappears ?

Upvotes: 2

Views: 6208

Answers (1)

Abhishek
Abhishek

Reputation: 1778

I think this is help you. its working as you expecting.

HTML: 

<div>
  <div style="display: block">
    <canvas baseChart
            [datasets]="barChartData"
            [labels]="barChartLabels"
            [options]="barChartOptions"
            [legend]="barChartLegend"
            [chartType]="barChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
  </div>
  <button (click)="randomize()">Update</button>
</div>

TS: 

public barChartLabels:string[] = ['2006', '2007', '2008', '2009', '2010', '2011'];
  public barChartType:string = 'bar';
  public barChartLegend:boolean = true;


 public barChartOptions: any = {
    responsive: true,
    tooltips: {
      enabled: false
    },
    animation: {
      onComplete: function () {
        var ctx = this.chart.ctx;
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        var chart = this;
        var datasets = this.config.data.datasets;

        datasets.forEach(function (dataset: Array<any>, i: number) {
          ctx.font = "10px Arial";


          ctx.fillStyle = "Black";
          chart.getDatasetMeta(i).data.forEach(function (p: any, j: any) {
            ctx.fillText(datasets[i].data[j], p._model.x, p._model.y - 20);
          });

        });
      }
    },
    legend: {
      display: true,
      labels: {
        fontColor: '#4286f4',
        backgroundColor: '#4286f4'
      }
    },
    scales: {
     yAxes: [
      {
          display: true,
          ticks: {
            min: 0,
            max: 100,
            stepSize: 100,
          },
          gridLines: {
                offsetGridLines: false
            }
      }
    ],
  }
  }

  public barChartData:any[] = [
    {data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'}
  ];

  // events
  public chartClicked(e:any):void {
    console.log(e);
  }

  public chartHovered(e:any):void {
    console.log(e);
  }

  public randomize():void {
    // Only Change 3 values
    let data = [
      Math.round(Math.random() * 100),
      59,
      80,
      (Math.random() * 100),
      56,
      (Math.random() * 100),
      40];
    let clone = JSON.parse(JSON.stringify(this.barChartData));
    clone[0].data = data;
    this.barChartData = clone;
  }

you can also check on link below:

Link

Upvotes: 2

Related Questions