-1

barchart

html file

  <canvas width="3" height="1"
                  *ngIf="loaded"
                  baseChart
                  [data]="barChartData"
                  [labels]="barChartLabels"
                  [options]="barChartOptions"
                  [legend]="barChartLegend"
                  [chartType]="barChartType"
                  [colors]="chartColors"
                >
                </canvas>

ts file

 chartColors: Array<any> = [
    {
      // all colors in order
      backgroundColor: ['#2EA082', '#2B2272', '#A687FF'],
    },
  ];
  barChartOptions: ChartOptions = {
    responsive: true,
    legend: {
      display: false,
    },

    scales: {
      yAxes: [
        {
          ticks: {
            callback: function (value: number, index, values) {
              return '$ ' + Intl.NumberFormat().format(value / 100000) + 'K';
            },
          },
        },
      ],
      xAxes: [
        {
          gridLines: {
            lineWidth: 0,
          },
        },
      ],
    },
  };

  barChartLabels: string[] = [];
  barChartType: ChartType = 'bar';
  barChartLegend: boolean = true;
  barChartData: any[] = [];
  loaded = false;

I'm using chartjs 2.9.4 and ng2 2.4.2 version. how to reduce bar thickness and also i tried using barThickness under xAxes but it is not working. I have attached the image for reference

Mohamed Irshath
  • 65
  • 2
  • 8

2 Answers2

1

You can use the dataset option barPercentage as described here.

In you code, this could look as follows:

barChartData: ChartDataSets[] = [
  {
    label: 'My Dataset',
    data: [65, 56, 40],    
    barPercentage: 0.5
  }
];
uminder
  • 23,831
  • 5
  • 37
  • 72
0

Just insert static data for testing purpose and set barThickness property instead of barPercentage. It worked for me.

Karan Rajgor
  • 1
  • 1