Chartjs-Wrong rendered bar chart Chart.js

by

1👍

✅

Paste this in your code:

import { Component, OnInit } from '@angular/core';
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import { Label } from 'ng2-charts';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  public barChartOptions: ChartOptions = {
    title: {
      display: true,
      text: 'Bodegas',
      fontSize: 16
    },
    responsive: true,
    scales: {
      yAxes: [{
        stacked: true,
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        stacked: true
      }]
    },
    legend: {
      display: false
    }
  };
public barChartLabels: Label[] = ['Bodega 1', 'Bodega 2'];
public barChartType: ChartType = 'bar';
public barChartLegend = true;
public barChartPlugins = [];

public barChartData: ChartDataSets[] = [
  { data: [65, 0], label: 'Bodegas', backgroundColor: 'pink', hoverBackgroundColor: 'pink', borderWidth: 0 },
  { data: [0, 80], label: 'Bodegas', backgroundColor: 'blue', hoverBackgroundColor: 'blue', borderWidth: 0 }
]

  constructor() { }

  ngOnInit() {
  }
}

I think the “legend” is unnecessary, but if you want to show it then change its value to true

0👍

https://stackblitz.com/edit/ng2-charts-bar-template-6vdwsj

//You needed to add the horizontalBar property

 public barChartType: ChartType = 'horizontalBar';

Leave a comment