locked
Angular Chartjs plugin Changing bar chart width and height RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User956626884 posted

    Hello,

    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

    !https://imgur.com/a/M2NmxkI

    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.

    !https://imgur.com/a/kiKBPaZ

    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';

@Component({
  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, {

       plugins:[{
         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