Mix Chart in Angular using ApexChart

In this article, we discuss on Mix chart(Line & Column) chart in Angular using Apexchart. In the last article, we discuss how to create a Candlestick chart in Angular.
Mix Chart: We take example for social engagement for the blog in page view and social engagement. To draw the chart lets start install ApexChart.


npm i apexcharts
npm i core-js
npm i ng-apexcharts

After installing module lets add a module in our app.module.ts file.

....
import { NgApexchartsModule } from "ng-apexcharts";
...
@NgModule({
imports:      [ ..., NgApexchartsModule ],
....
})



After adding a module in the app.module file we can use it in our component to draw the chart. Let’s create app.component.ts file and add import ApexChart module in module.


import {ChartComponent,
  ApexAxisChartSeries,
  ApexChart,
  ApexFill,
  ApexYAxis,
  ApexTooltip,
  ApexTitleSubtitle,
  ApexXAxis} from "ng-apexcharts";

Let’s assign values to serse we take here 2 line chart serise for engagement and one column serise for the blog pagview.


 series: [
        {
          name: "Eduforbetterment Blog",
          type: "column",
          data: [550, 510, 418, 680, 229, 350, 350, 352, 650, 320, 257, 290]
        },
        {
          name: "Facebook Engagement",
          type: "line",
          data: [23, 42, 35, 27, 43, 22, 17, 31, 22, 22, 12, 16]
        },
        {
          name: "Reddit Engagement",
          type: "line",
          data: [20, 30, 30, 29, 52, 19, 25, 29, 25, 30, 15, 15]
        }

Below is the full code for draw the chart.


import { Component, VERSION ,ViewChild,OnInit } from '@angular/core';

import {ChartComponent,
  ApexAxisChartSeries,
  ApexChart,
  ApexFill,
  ApexYAxis,
  ApexTooltip,
  ApexTitleSubtitle,
  ApexXAxis} from "ng-apexcharts";

export type ChartOptions = {
  series: ApexAxisChartSeries;
  chart: ApexChart;
  xaxis: ApexXAxis;
  yaxis: ApexYAxis | ApexYAxis[];
  title: ApexTitleSubtitle;
  labels: string[];
  stroke: any;
  dataLabels: any;
  fill: ApexFill;
  tooltip: ApexTooltip;
};


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  implements OnInit{

 @ViewChild("chart") chart: ChartComponent;
  public chartOptions: Partial;


  constructor() {

    
}

  ngOnInit(){
    this.chartOptions = {
      series: [
        {
          name: "Eduforbetterment Blog",
          type: "column",
          data: [550, 510, 418, 680, 229, 350, 350, 352, 650, 320, 257, 290]
        },
        {
          name: "Facebook Engagement",
          type: "line",
          data: [23, 42, 35, 27, 43, 22, 17, 31, 22, 22, 12, 16]
        },
        {
          name: "Reddit Engagement",
          type: "line",
          data: [20, 30, 30, 29, 52, 19, 25, 29, 25, 30, 15, 15]
        }
      ],
      chart: {
        height: 350,
        type: "line"
      },
      stroke: {
        width: [0, 4]
      },
      title: {
        text: "Traffic Sources"
      },
      dataLabels: {
        enabled: true,
        enabledOnSeries: [1,2]
      },
      labels: [
        "01 July 2020",
        "02 July 2020",
        "03 July 2020",
        "04 July 2020",
        "05 July 2020",
        "06 July 2020",
        "07 July 2020",
        "08 July 2020",
        "09 July 2020",
        "10 July 2020",
        "11 July 2020",
        "12 July 2020"
      ],
      xaxis: {
        type: "datetime"
      },
      yaxis: [
        {
          title: {
            text: "My Blog"
          }
        },
        {
          opposite: true,
          title: {
            text: "Social Media"
          }
        }
      ]
    };
    
  }

 
}


<h1 style="text-align:center">Mixed Chart (Line & Column)</h1>
<div id="chart">
<apx-chart
    [series]="chartOptions.series"
    [chart]="chartOptions.chart"
    [yaxis]="chartOptions.yaxis"
    [xaxis]="chartOptions.xaxis"
    [labels]="chartOptions.labels"
    [stroke]="chartOptions.stroke"
    [title]="chartOptions.title"
    [dataLabels]="chartOptions.dataLabels"
    [fill]="chartOptions.fill"
    ="chartOptions.tooltip"
  ></apx-chart>
</div>




Below is the full embeded code for the Mix Chart using ApexChart you can easily used in your application.
Example

Spread the love
  •  
  •  
  •  
  •  
  • 4
  • 2
  •  
  •