ng2-chart text label wrap and graph width

Viewed 977

I've been having a hard time finding documentation that will show me all the possible features on how to control/customize a chart and it's properties.

I wanted to know if i am displaying data in a horizontalBar chart is there a way to get the long label text to wrap? My graph size is affected by that feature and i can't find a way that will allow me to wrap label text.

I also wanted to know is there a property so that i can control the actual width of the graph with bars and not affecting the vertical label width. So i can give more room for the vertical label text and less space for the graph part.

Here is how i am currently rendering my graph:

barChartOptions: any = {
    scaleShowVerticalLines: false,
    responsive: true,
    scales: {
      xAxes: [{
        ticks: {
          beginAtZero:true,
          max: 100
        }
      }],
        yAxes: [{
          ticks: {

          }
        }]
    },
      tooltips:{
        mode: 'point'
      }
  };
  barChartLabels: string[] = [];
  barChartType: string = 'horizontalBar';
  barChartLegend: boolean = false;
  barChartData: any[] = [];
  data: any;

  colorsOverride: Array<Color> = [{
    backgroundColor: '#6aaf6a',
    hoverBackgroundColor: 'purple'
  }];

    getChartData(link:string){
        this.service.getQuery(link).subscribe(
            data => {
                this.data = data;
                this.barChartLabels = this.data.map(x => x.display);
                this.chartData = this.data.map(x => x.value);
                this.barChartData = [{data: this.chartData, label:'sample' }];
            }
        );
    }
0 Answers
Related