ngx-charts: changing chart by updating dom element with property binding

Question

I want to change ngx chart by changing it from Dom and insert the new one within property binding, however changing Dom is done by [innerHTML]=stringVar; but if inside of my stringVar was ngx-chart element it's not rendering it.

import { Component, OnInit } from '@angular/core';
import { NgxChartsModule } from '@swimlane/ngx-charts';

import { single, multi } from '../../shared/data';
import { CHARTS } from '../../shared/mock-charts';

@Component({
 selector: 'app-chart-graph',
 template: '<div [innerHTML]="ChartGraph"></div>',
styleUrls: ['./chart-graph.component.css']
})
export class ChartGraphComponent implements OnInit {
 ChartGraph = `<ngx-charts-bar-vertical
  [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)">
</ngx-charts-bar-vertical>`;

 single: any[];
 multi: any[];
 CHARTS: any[];

 // options
 showXAxis = true;
 showYAxis = true;
 gradient = false;
 showLegend = true;
 showXAxisLabel = true;
 xAxisLabel = 'Country';
 showYAxisLabel = true;
 yAxisLabel = 'Population';

 colorScheme = {
 domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
 };

constructor() {
Object.assign(this, { single, multi });
}

 onSelect(event) {
  console.log(event);
}

ngOnInit() {

}

}

score 0 · Answer 1 · answered May 31 '17 at 07:05

It's not work with property  binding just do like add that in template for good practice.


    @Component({
        selector: 'app-chart-graph',
        styleUrls: ['./chart-graph.component.css'],
        template: '<ngx-charts-bar-vertical
                     [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)">
               </ngx-charts-bar-vertical>'
    })

    export class ChartGraphComponent implements OnInit {
      single: any[];
      multi: any[];
      CHARTS: any[];

    // options
    showXAxis = true;
    showYAxis = true;
    gradient = false;
    showLegend = true;
    showXAxisLabel = true;
    xAxisLabel = 'Country';
    showYAxisLabel = true;
    yAxisLabel = 'Population';

    //remaining code
    }

Add this in your template

 //you can also add @input() in graph component options pass them in like
     <app-chart-graph [width]="" [height]="" [data]=""..></app-chart-graph>
   </div>

Thanks yala, but the is a component too and i want to change component dynamically by another chart component. — Adnan, May 31 '17 at 09:08
then use change detection for another chart ,when that chart change it will automatically change , check for change detection https://stackoverflow.com/questions/41726875/angular2-input-change-detection — yala ramesh, May 31 '17 at 18:31

ngx-charts: changing chart by updating dom element with property binding

1 Answers1