wrong rendered bar chart Chart.js

Question

Im tring to display a bar chart but im having two bars for each horizontal label, actually i need to display a bar for each horizontal label not 2 in one label, because each horizontal label represents a bar,

here's the horizontal labels

public barChartLabels: Label[] = ['Bodega 1', 'Bodega 2'];

and here's the data,

public barChartData: ChartDataSets[] = [
    { data: [65], label: 'Bodega 1' },
  { data: [80], label: 'Bodega 2' }
  ];

I include a label in each data item because i need to display the legend.

here's my code:

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

thanks

Soul Eeater Soul Eeater · Accepted Answer · 2019-09-23T17:30:58

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

wrong rendered bar chart Chart.js

2 Answers