ChartJs & ng2-charts Troubleshooting

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"

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',
    'Standard Flow',
    'Vessel Harvest'

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

1 Like

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

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,