Chartjs-Angular 8: Creating a custom horizontal bar chart

by

0👍

You may use ng2-charts library which is powerful library for build charts.
Here you can find example of code for horizontal bar chart: https://stackblitz.com/edit/angular-vpd3ce

Line public lineChartType = 'horizontalBar'; define type of your chart.

In html part you should add such code:

<canvas baseChart width="400" height="400"
    [datasets]="lineChartData"
    [labels]="lineChartLabels"
    [options]="lineChartOptions"
    [colors]="lineChartColors"
    [legend]="lineChartLegend"
    [chartType]="lineChartType"  -- chart type ('horizontalBar' in your case)
    [plugins]="lineChartPlugins">
  </canvas>

Full documentation you can find here https://www.chartjs.org/docs/latest/

ng2-charts supports onClick event. Example here: https://valor-software.com/ng2-charts/#/LineChart

0👍

indexAxis: The base axis of the chart. ‘x’ for vertical charts and ‘y’ for horizontal charts.

 public barChartOptions: ChartConfiguration<'bar'>['options'] = {
    responsive: true,
    indexAxis: 'y', // <---- set *indexAxis* to 'y'
  };

Leave a comment