After successfully creating a component chart using ngx-charts in angular 2 and pulling data from data.ts, I am now looking to reuse the same component to display a second chart with a different data set (data2.ts). Is this even possible? Can someone guide me in the right direction? Do I need to create a directive or pass the data via property?
I initially considered creating another component and passing a different data set as a last resort, but with potentially having 10 charts in total, that might not be the most efficient option.
UPDATED CODE
graph.component.ts
some imports ...
@Component({
selector: 'app-graph',
templateUrl: './graph.component.html',
styleUrls: ['./graph.component.css']
})
export class GraphComponent {
multi: any[];
//options
showXAxis = true;
showYAxis = true;
showLegend = true;
showXAxisLabel = true;
showYAxisLabel = true;
xAxisLabel = 'Slot';
yAxisLabel = 'Utilization (%)';
barPadding = 24;
colorScheme = {
domain: ['#0866c6', '#ff8c00', '#C0C0C0']
};
constructor() {
Object.assign(this, { multi })
}
onSelect(event) {
console.log(event);
}
}
@NgModule({
imports: [ BrowserModule, NgxChartsModule],
declarations: [ GraphComponent ],
bootstrap: [ GraphComponent ]
})
export class AppModule { }
graph.component.html
<ngx-charts-bar-vertical-stacked
[view]="view"
[scheme]="colorScheme"
[results]="multi"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
(select)="onSelect($event)">
</ngx-charts-bar-vertical-stacked>
To implement this on my main view component mainview.component.html:
<section class="section">
<div class="row ">
<app-odometer></app-odometer>
<app-graph></app-graph>
<app-dateselector></app-dateselector>
</div>
<div class="row ">
<div class="col-xl-3"></div>
<app-graph [data]="data"></app-graph>
<div class="col-xl-3"></div>
</div>
<div class="row ">
<div class="col-xl-3"></div>
<app-graph></app-graph>
<div class="col-xl-3"></div>
</div>
</section>