ChartJs & ng2-charts Troubleshooting

[luclib (Lucas Liberman)]

This is a follow-up to my previous question regarding chartjs, ng2-chart, and Cumulocity

Note: The application is intended to pull information from Cumulocity using the services provided by the @c8y/client package, but for now I am using mock data until I can get the bar chart to display as intended.

I know this is not a Cumulocity-specific question, but the only resource that I have managed to find is this guide from Digital Ocean, which uses the specific dependency versions as I am.

I have installed a compatible version of chart.js and ng2-chart (below) into my own Angular application, but I am encountering this problem wherein the chart only displays the desired data for 1 month in a year-long period.

chart.js: "^2.9.4",
ng2-charts: "^2.4.2",

The bar chart is supposed to display the total counts from 6 different device modes per month, meaning that the x-axis should have the name of the months, and each month have 6 bars.

The labels are stored in a string array:

  private months: string[] = [
    'Jan', 'Feb', 'Mar', 'Apr',
    'May', 'June', 'July', 'Aug',
    'Sep', 'Oct', 'Nov', 'Dec'
  ]

While the data for each device mode is stored as a number array of length = 12 as follows:

  private modeData: number[] = [
    24, 29, 32, 25, 17, 28,
    21, 14, 16, 25, 26, 24
  ]

I have hooked the bar chart to my <canvas> element as follows:

  <div id="charts" class="row">
          <canvas id="mode-count-chart"
              baseChart
             [chartType]="'bar'"
             [legend]="true"
             [datasets]="modeChartData"
             [labels]="chartLabels"
             [options]="chartOptions">
          </canvas>
  </div>

My dataset is designed as follows:

 this.chartLabels = this.months;
  this.modeChartData = [
    {
      data:  this.advFlowModeData,
      label: this.modes[0]
    },
    {
      data: this.barModeData,
      label: this.modes[1]
    },
    {
      data: this.pedModeData,
      label: this.modes[2]
    },
    {
      data: this.stdFlowModeData,
      label: this.modes[3]
    },
    {
      data: this.tamisModeData,
      label: this.modes[4]
    },
    {
      data: this.vesHarvModeData,
      label: this.modes[5]
    },
  ]

The variable modes is an array carrying the names for each column of data.

  private modes: string[] = [
    'Advanced Flow',
    'Bariatric',
    'Pediatric',
    'Standard Flow',
    'Tamis',
    'Vessel Harvest'
  ];

[yash.pshah (Yash Shah)]

Hi,
I don’t see any reason about why it’s not working unless if any data issue.
I tried to reproduce based on random data and it’s working as expected. you can see example here

[luclib (Lucas Liberman)]

Thank you, Yash. I used your code as a model, and it worked!

[luclib (Lucas Liberman)]

A further note: I was able to display the graph as it is by only providing for the [datasets] attribute to my <canvas> element. My chart options object has not had much effect, except for changing the max and minimum values of the y-axis.

Below, I commented out the options that had no visible effect on my graph:

    this.myChartOptions = {
      responsive: true,
      scales: {
        yAxes: [
          {
            ticks: {
              min: 0,
            },
          },
        ],
        xAxes: [{}],
      },
      plugins: {
        datalabels: {
          // display: false,
          // align: 'top',
          // anchor: 'end',
  
          // font: {
          //   family: 'Open sans',
          //   size: 14,
          // },
        },
        // deferred: false,
      },  
    };