3

Am using ngx-charts-bar-horizontal in my angular 8 project. It is working fine when i load the results/data array in ngOninit function.

But I want to change the existing data on click of a button. it loads a new data to graph.

<ngx-charts-bar-horizontal

  [view]="view"
  [scheme]="colorScheme"
  [results]="single"
  [gradient]="gradient"
  [xAxis]="showXAxis"
  [yAxis]="showYAxis"
  [legend]="showLegend"
  [showXAxisLabel]="showXAxisLabel"
  [showYAxisLabel]="showYAxisLabel"
  [xAxisLabel]="xAxisLabel"
  [yAxisLabel]="yAxisLabel"
  (select)="onSelect($event)"
  (activate)="onActivate($event)"
  (deactivate)="onDeactivate($event)"
  [legendPosition]="'below'">
</ngx-charts-bar-horizontal>

This is working fine in ngOnInit



 single: any = [
    {
      "name": "API",
      "value": 90
    },
    {
      "name": "DB",
      "value": 12
    },
    {
      "name": "File",
      "value": 1
    },
    {
      "name": "Message/Event",
      "value": 3
    },
    {
      "name": "Poll",
      "value": 15
    }
  ];

On click of a button am callling an api to get new data and pushing to the results array.



this.dashboardservice.getCapabilitiesData(data).subscribe(response => {
          this.single=[];
          this.capabilitiesData = response;

          if (this.capabilitiesData.muelCapabilityGraph) {

            Object.keys(this.capabilitiesData.muelCapabilityGraph).forEach(key => {
              var obj = {
                "name": key,
                "value": this.capabilitiesData.muelCapabilityGraph[key]
              }
              this.single.push(obj);
            });

          }
          this.single=[...this.single];
          console.log("single-->"+JSON.stringify(this.single))
        });

this.single Has the new data but chart is blank.

Am not sure why the chart is not updated with new data. please help!

Sharath Au
  • 39
  • 6
  • Finally I found an answer to this. this.single=[...this.single];. We need to do self assign after any update to the results data. This will trigger an update on chart. – Sharath Au Dec 23 '20 at 06:38

1 Answers1

2

I have forked a project from swimlane-ngxcharts and added a feature to add column/bar on button click ('Add data'). Please have a look. Code on stackblitz: link

abhishek rana
  • 172
  • 4