How can I get two stacked chart.js charts to be different types?

by

👍:0

You have two individual charts, hence you should define a distinct Chart.ChartConfiguration for each. Provided that Chart.ChartOptions are the same for both charts, this could look as follows:

const chartOptions: Chart.ChartOptions = {
  responsive: true,
  maintainAspectRatio: false,
  legend: { display: false },
  scales: {
    xAxes: [{ display: false }],
    yAxes: [{ display: false }],
  }
}

const chartConfigs: Chart.ChartConfiguration[] = [{
    type: 'bar',
    options: chartOptions
  },{
    type: 'line',
    options: chartOptions
}];

And inside ngAfterViewInit, you use chartConfigs[index] to pick the appropriate chart configuration. 

ngAfterViewInit() {
  this.charts = this.chartElementRefs.map((chartElementRef, index) => {
    const config = Object.assign({}, chartConfigs[index], { data: this.chartData[index] });      
    return new Chart(chartElementRef.nativeElement, config);
  });
}

Please have a look at your amended StackBlitz

Leave a comment