Angular Stacked Bar 100% Chart

Download Angular Chart Samples

Example shows Angular Stacked Bar 100% Chart where datapoints from different series are stacked one on top of other & width of bar is calculated as a percentage of total sum.

/* app.component.ts */
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {	
  chartOptions = {
    animationEnabled: true,
    exportEnabled: true,
    title:{
      text: "🍨ICE CREAM SALES🍨",
      fontFamily: "Calibri, Arial, sans-serif"
    },
    axisX:{
      title: "Quarter",
      reversed: true
    },
    axisY:{
      suffix: "%"
    },
    toolTip:  {
      shared: true
    },
    data: [{
      type: "stackedBar100",
      name: "Blueberry",
      showInLegend: "true",
      yValueFormatString: "#,###'%'",
      color: "#5570b2",
      dataPoints: [
        {  y: 40.75, label: "Q1"},
        {  y: 27.3, label: "Q2" },
        {  y: 11, label: "Q3" },
        {  y: 34, label: "Q4" }
      ]
    }, {
      type: "stackedBar100",
      name: "Vanilla",
      showInLegend: "true",
      yValueFormatString: "#,###'%'",
      color: "#f6d788",
      dataPoints: [
        {  y: 12.75, label: "Q1"},
        {  y: 35.7, label: "Q2" },
        {  y: 59, label: "Q3" },
        {  y: 18, label: "Q4" }
      ]
    }, {
      type: "stackedBar100",
      name: "Chocolate",
      showInLegend: "true",
      yValueFormatString: "#,###'%'",
      color: "#8D5531",
      dataPoints: [
        {  y: 12.5, label: "Q1"},
        {  y: 25, label: "Q2" },
        {  y: 8, label: "Q3" },
        {  y: 23, label: "Q4" }
      ]
    }, {
      type: "stackedBar100",
      name: "Strawberry",
      showInLegend: "true",
      yValueFormatString: "#,###'%'",
      color: "#c13c3c",
      dataPoints: [
        {  y: 34, label: "Q1"},
        {  y: 12, label: "Q2" },
        {  y: 22, label: "Q3" },
        {  y: 25, label: "Q4" }
      ]
    }]
  }	
}                              
/* app.module.ts */
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

import * as CanvasJSAngularChart from '../assets/canvasjs.angular.component';
var CanvasJSChart = CanvasJSAngularChart.CanvasJSChart;

@NgModule({
  declarations: [
    AppComponent,
    CanvasJSChart
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }                        
<div>
    <canvasjs-chart [options]="chartOptions" [styles]="{width: '100%', height:'360px'}"></canvasjs-chart>    
</div>

Chart Customizations

color property can be used to change the color of data-series. You can also enable legends for all the series by setting showInLegend to true. Other commonly used customization options include fillOpacity, legendText, etc.

Note   For step by step instructions, follow our Angular Integration Tutorial