CODEWITHSUNDEEP
javascriptangularchart.js
user3468921
user3468921

Reputation: 601

Chart js: bar width

I want to display data in chart js (version 3.7.1) with horizontal bar chart. Data are loading from backend. My problem is with widht of bar. When I have only a few records, bars are very thick.1 When I have a lot of records (for example 1000) bars are very narrow and are missing label.2 How can you see in images. I would like have still the same widht for bars and if is a lot of records enable scroll.

There is my code:

  createConfig(config: ChartConfigDto): ChartConfiguration {
    return {
      type: 'bar',
      data: {
        labels: config.labels,
        datasets:
            config.datasets.map((dataset, index) => ({
              label: dataset.label,
              backgroundColor: `${CHART_COLORS[index]}`,
              borderColor: `${CHART_COLORS[index]}`,
              data: dataset.data,
              barThickness: 'flex',
            }))
      },
      options: {
        indexAxis: 'y',
        plugins: {
          title: {
            display: true,
            text: 'Sites',
          },
          legend: {
            position: 'top',
          },
        },
        responsive: true,
        scales: {
          x: {
            stacked: true,
            position: 'top',
          },
          y: {
            stacked: true,
            grid: {
              display: false,
            },
          }
        },
      },
    }
  }

        <div class="modal-body">
          <canvas appChart [config]="config"></canvas>
        </div>

Thank you for help

Upvotes: 2

Views: 2105

Answers (1)

Manish Patidar
Manish Patidar

Reputation: 804

There are two properties you can use to achieve.

You can use maxBarThickness property in the dataset.

Here I'm attaching Stackblitz demo

Upvotes: 2

Related Questions