-1

Is it possible to make the rows a little bit narrow, I did a lot of research but couldn't find anything connected with this. Please have a look at the screenshot,

enter image description here

Also here is the code which I am using

BarChart Options

  stackedChartOptions: ChartOptions = {
    responsive: true,
    scales: {
      xAxes: [{ stacked: true }],
      yAxes: [{ stacked: true }],
    }
  };
  stackedChartColors: any[] = [{ backgroundColor: ['#adcde1', '#3a77af'] }];

  stackedChartLabels: string[] = [];
  stackedChartData: ChartDataSets[] = [];

Template

   <canvas
      baseChart
      [chartType]="'horizontalBar'"
      [datasets]="stackedChartData"
      [colors]="stackedChartColors"
      [options]="stackedChartOptions"
      [labels]="stackedChartLabels"
  </canvas>

Also here is the reproduction example. https://stackblitz.com/edit/ng2-charts-bar-template-si9pkc?file=src%2Fapp%2Fapp.component.html

So my question is:

Is it possible to set the height of rows manually? Any help will be appreciated

UPDATE: In the example the rows are narrow, but it isn't controlled by me

Ashot Aleqsanyan
  • 4,252
  • 1
  • 15
  • 27

1 Answers1

1

I assume you are using chart.js v2.

You can use barThickness to adjust the size of the bar:

https://www.chartjs.org/docs/2.9.4/charts/bar.html#barthickness

stackedChartData: ChartDataSets[] = [
    {
      label: 'Dataset 1',
      backgroundColor: '#adcde1',
      data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
      barThickness: 10 // adjust bar size
    },
    {
      label: 'Dataset 2',
      backgroundColor: '#3a77af',
      data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100].reverse(),
      barThickness: 10 // adjust bar size
    }
  ];

Demo codesandbox:

https://stackblitz.com/edit/ng2-charts-bar-template-2eizu5?file=src%2Fapp%2Fapp.component.ts

Mic Fung
  • 5,404
  • 2
  • 7
  • 17
  • Hello @MicFung, Thank you very much for the answer, but I tried this, if you will try to change `10` to `20` or `30` all of the items will overlap each other, not sure maybe I miss something? – Ashot Aleqsanyan Jun 03 '21 at 18:57
  • @AshotAleqsanyan its a number that goes from 0-1 but it only decreases the width of the bar and not of the grid tick part – LeeLenalee Jun 03 '21 at 19:02
  • @AshotAleqsanyan I don't know if I get your point. how about using `barPercentage` if you want to have relative bar size. Updated stackblitz, you can see the result. – Mic Fung Jun 03 '21 at 19:08