Angular Chartjs plugin Changing bar chart width and height RRS feed

  • Question

  • User956626884 posted


    I am not sure if this can be done but I am write an angular page with chartjs. I have multiple dataset for a horizontalbar chart. I was able to get it to overlap but I would like to change one of the bar's width. To get the overlap, I used a plugin to change the bar's height as shown below in this link


    As you can see, both dataset are shown as bar starting from y=0 to y = some max value. I would like to change one of the bar's width to be narrow. The goal is to have a long bar and the other bar to be narrow and be placed at the max value. When I changed both the height and width of one of the bar, I get the following chart which is incorrect.


    I am not sure why the bar suddenly was start from top of the chart. I think I may be not incorrectly setting the values.

    Any help is appreciated.

    import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
    import { Chart } from 'chart.js';
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss']
    export class AppComponent implements OnInit {
      title = 'barchart';
      private chartRef
      @ViewChild('myChart') set ref(ref: ElementRef) {
         this.chartRef = ref;
      ngOnInit() {
        var data = {
          labels: ["x1", "x2", "x3"],
          datasets: [{
            label: "First",
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderWidth: 1,
            data: [10, 20, 30],
            yAxesID : "y-axis-1",
            label: "Second",
            backgroundColor: 'rgba(255, 206, 86, 0.2)',
            borderWidth: 1,
            data: [5, 30, 35],
            yAxesID : "y-axis-1",
        var options = {
          scales: {
            xAxes: [{
             stacked: false,
              display: true,
              barThickness: 70,
              ticks: {
                beginAtZero: true
            yAxes: [{
             stacked: true,
              id: "y-axis-1",
              ticks: {
                beginAtZero: true
        var canvas = <HTMLCanvasElement> document.getElementById("myChart");
        var ctx = canvas.getContext("2d")
        var myBarChart = new Chart(ctx, {
             afterDatasetsUpdate: function (chart) {
               Chart.helpers.each(chart.getDatasetMeta(0).data, function (rectangle, index) {
                rectangle._view.height = rectangle._model.height = 30;
                rectangle._view.width = rectangle._model.width = 10;
          type: 'horizontalBar',
         // type: 'bar',
          data: data,
          options: options

    Thursday, April 18, 2019 3:32 PM

All replies