This demo uses imperative chart updates. The generated code is a faithful Angular translation: open it in CodeSandbox to run and tweak.
import { Component, AfterViewInit, OnDestroy, ViewChild } from '@angular/core';
import {
ChartComponent,
ApexAxisChartSeries,
ApexNonAxisChartSeries,
ApexChart,
ApexXAxis,
ApexYAxis,
ApexTitleSubtitle,
ApexDataLabels,
ApexStroke,
ApexFill,
ApexLegend,
ApexTooltip,
ApexMarkers,
ApexPlotOptions,
ApexResponsive,
ApexGrid,
ApexAnnotations,
ApexStates,
ApexTheme,
NgApexchartsModule,
} from 'ng-apexcharts';
export type ChartOptions = {
series?: ApexAxisChartSeries | ApexNonAxisChartSeries;
chart?: ApexChart;
xaxis?: ApexXAxis;
yaxis?: ApexYAxis | ApexYAxis[];
title?: ApexTitleSubtitle;
subtitle?: ApexTitleSubtitle;
dataLabels?: ApexDataLabels;
stroke?: ApexStroke;
fill?: ApexFill;
legend?: ApexLegend;
tooltip?: ApexTooltip;
markers?: ApexMarkers;
plotOptions?: ApexPlotOptions;
responsive?: ApexResponsive[];
grid?: ApexGrid;
annotations?: ApexAnnotations;
states?: ApexStates;
theme?: ApexTheme;
colors?: string[];
labels?: any;
};
@Component({
selector: 'app-chart',
standalone: true,
imports: [NgApexchartsModule],
templateUrl: './chart.component.html',
})
export class AppChart implements AfterViewInit, OnDestroy {
@ViewChild('chart') chart!: ChartComponent;
public chartOptions: Partial<ChartOptions> = {
series: [
{
name: 'Robin',
data: [
{ x: '2024-01-08', y: 12 },
{ x: '2024-01-22', y: 14 },
{ x: '2024-02-05', y: 20 },
{ x: '2024-02-19', y: 16 },
{ x: '2024-03-04', y: 20 },
{ x: '2024-03-18', y: 21 },
{ x: '2024-04-01', y: 27 },
{ x: '2024-04-15', y: 24 },
{ x: '2024-04-29', y: 32 },
{ x: '2024-05-13', y: 35 },
{ x: '2024-05-27', y: 34 },
{ x: '2024-06-10', y: 31 },
{ x: '2024-06-24', y: 31 },
{ x: '2024-07-08', y: 32 },
{ x: '2024-07-22', y: 36 },
{ x: '2024-08-05', y: 38 },
{ x: '2024-08-19', y: 34 },
{ x: '2024-09-02', y: 29 },
{ x: '2024-09-16', y: 26 },
{ x: '2024-09-30', y: 32 },
{ x: '2024-10-14', y: 26 },
{ x: '2024-10-28', y: 26 },
{ x: '2024-11-11', y: 24 },
{ x: '2024-11-25', y: 22 },
{ x: '2024-12-09', y: 16 },
{ x: '2024-12-23', y: 13 },
{ x: '2025-01-06', y: 13 },
],
},
{
name: 'Wren',
data: [
{ x: '2024-01-08', y: 12 },
{ x: '2024-01-22', y: 15 },
{ x: '2024-02-05', y: 15 },
{ x: '2024-02-19', y: 20 },
{ x: '2024-03-04', y: 19 },
{ x: '2024-03-18', y: 25 },
{ x: '2024-04-01', y: 26 },
{ x: '2024-04-15', y: 26 },
{ x: '2024-04-29', y: 24 },
{ x: '2024-05-13', y: 30 },
{ x: '2024-05-27', y: 24 },
{ x: '2024-06-10', y: 31 },
{ x: '2024-06-24', y: 30 },
{ x: '2024-07-08', y: 29 },
{ x: '2024-07-22', y: 23 },
{ x: '2024-08-05', y: 28 },
{ x: '2024-08-19', y: 22 },
{ x: '2024-09-02', y: 26 },
{ x: '2024-09-16', y: 20 },
{ x: '2024-09-30', y: 18 },
{ x: '2024-10-14', y: 15 },
{ x: '2024-10-28', y: 16 },
{ x: '2024-11-11', y: 12 },
{ x: '2024-11-25', y: 9 },
{ x: '2024-12-09', y: 8 },
{ x: '2024-12-23', y: 8 },
{ x: '2025-01-06', y: 10 },
],
},
{
name: 'Blackbird',
data: [
{ x: '2024-01-08', y: 8 },
{ x: '2024-01-22', y: 10 },
{ x: '2024-02-05', y: 12 },
{ x: '2024-02-19', y: 16 },
{ x: '2024-03-04', y: 19 },
{ x: '2024-03-18', y: 17 },
{ x: '2024-04-01', y: 22 },
{ x: '2024-04-15', y: 24 },
{ x: '2024-04-29', y: 24 },
{ x: '2024-05-13', y: 22 },
{ x: '2024-05-27', y: 30 },
{ x: '2024-06-10', y: 30 },
{ x: '2024-06-24', y: 24 },
{ x: '2024-07-08', y: 34 },
{ x: '2024-07-22', y: 26 },
{ x: '2024-08-05', y: 35 },
{ x: '2024-08-19', y: 25 },
{ x: '2024-09-02', y: 32 },
{ x: '2024-09-16', y: 23 },
{ x: '2024-09-30', y: 25 },
{ x: '2024-10-14', y: 24 },
{ x: '2024-10-28', y: 20 },
{ x: '2024-11-11', y: 19 },
{ x: '2024-11-25', y: 21 },
{ x: '2024-12-09', y: 18 },
{ x: '2024-12-23', y: 14 },
{ x: '2025-01-06', y: 13 },
],
},
{
name: 'Chaffinch',
data: [
{ x: '2024-01-08', y: 7 },
{ x: '2024-01-22', y: 8 },
{ x: '2024-02-05', y: 13 },
{ x: '2024-02-19', y: 16 },
{ x: '2024-03-04', y: 14 },
{ x: '2024-03-18', y: 16 },
{ x: '2024-04-01', y: 23 },
{ x: '2024-04-15', y: 23 },
{ x: '2024-04-29', y: 25 },
{ x: '2024-05-13', y: 24 },
{ x: '2024-05-27', y: 29 },
{ x: '2024-06-10', y: 29 },
{ x: '2024-06-24', y: 30 },
{ x: '2024-07-08', y: 23 },
{ x: '2024-07-22', y: 30 },
{ x: '2024-08-05', y: 22 },
{ x: '2024-08-19', y: 23 },
{ x: '2024-09-02', y: 19 },
{ x: '2024-09-16', y: 20 },
{ x: '2024-09-30', y: 16 },
{ x: '2024-10-14', y: 16 },
{ x: '2024-10-28', y: 14 },
{ x: '2024-11-11', y: 14 },
{ x: '2024-11-25', y: 11 },
{ x: '2024-12-09', y: 9 },
{ x: '2024-12-23', y: 5 },
{ x: '2025-01-06', y: 5 },
],
},
{
name: 'Blue Tit',
data: [
{ x: '2024-01-08', y: 11 },
{ x: '2024-01-22', y: 8 },
{ x: '2024-02-05', y: 9 },
{ x: '2024-02-19', y: 12 },
{ x: '2024-03-04', y: 12 },
{ x: '2024-03-18', y: 16 },
{ x: '2024-04-01', y: 17 },
{ x: '2024-04-15', y: 21 },
{ x: '2024-04-29', y: 19 },
{ x: '2024-05-13', y: 24 },
{ x: '2024-05-27', y: 28 },
{ x: '2024-06-10', y: 30 },
{ x: '2024-06-24', y: 33 },
{ x: '2024-07-08', y: 35 },
{ x: '2024-07-22', y: 32 },
{ x: '2024-08-05', y: 31 },
{ x: '2024-08-19', y: 31 },
{ x: '2024-09-02', y: 34 },
{ x: '2024-09-16', y: 33 },
{ x: '2024-09-30', y: 32 },
{ x: '2024-10-14', y: 23 },
{ x: '2024-10-28', y: 22 },
{ x: '2024-11-11', y: 23 },
{ x: '2024-11-25', y: 23 },
{ x: '2024-12-09', y: 15 },
{ x: '2024-12-23', y: 14 },
{ x: '2025-01-06', y: 15 },
],
},
{
name: 'Swallow',
data: [
{ x: '2024-01-08', y: 0 },
{ x: '2024-01-22', y: 0 },
{ x: '2024-02-05', y: 0 },
{ x: '2024-02-19', y: 0 },
{ x: '2024-03-04', y: 0 },
{ x: '2024-03-18', y: 5 },
{ x: '2024-04-01', y: 18 },
{ x: '2024-04-15', y: 26 },
{ x: '2024-04-29', y: 41 },
{ x: '2024-05-13', y: 47 },
{ x: '2024-05-27', y: 39 },
{ x: '2024-06-10', y: 35 },
{ x: '2024-06-24', y: 16 },
{ x: '2024-07-08', y: 5 },
{ x: '2024-07-22', y: 0 },
{ x: '2024-08-05', y: 0 },
{ x: '2024-08-19', y: 0 },
{ x: '2024-09-02', y: 0 },
{ x: '2024-09-16', y: 0 },
{ x: '2024-09-30', y: 0 },
{ x: '2024-10-14', y: 0 },
{ x: '2024-10-28', y: 0 },
{ x: '2024-11-11', y: 0 },
{ x: '2024-11-25', y: 0 },
{ x: '2024-12-09', y: 0 },
{ x: '2024-12-23', y: 0 },
{ x: '2025-01-06', y: 0 },
],
},
{
name: 'Swift',
data: [
{ x: '2024-01-08', y: 0 },
{ x: '2024-01-22', y: 0 },
{ x: '2024-02-05', y: 0 },
{ x: '2024-02-19', y: 0 },
{ x: '2024-03-04', y: 0 },
{ x: '2024-03-18', y: 0 },
{ x: '2024-04-01', y: 0 },
{ x: '2024-04-15', y: 6 },
{ x: '2024-04-29', y: 16 },
{ x: '2024-05-13', y: 33 },
{ x: '2024-05-27', y: 33 },
{ x: '2024-06-10', y: 31 },
{ x: '2024-06-24', y: 14 },
{ x: '2024-07-08', y: 4 },
{ x: '2024-07-22', y: 0 },
{ x: '2024-08-05', y: 0 },
{ x: '2024-08-19', y: 0 },
{ x: '2024-09-02', y: 0 },
{ x: '2024-09-16', y: 0 },
{ x: '2024-09-30', y: 0 },
{ x: '2024-10-14', y: 0 },
{ x: '2024-10-28', y: 0 },
{ x: '2024-11-11', y: 0 },
{ x: '2024-11-25', y: 0 },
{ x: '2024-12-09', y: 0 },
{ x: '2024-12-23', y: 0 },
{ x: '2025-01-06', y: 0 },
],
},
{
name: 'Willow Warbler',
data: [
{ x: '2024-01-08', y: 0 },
{ x: '2024-01-22', y: 0 },
{ x: '2024-02-05', y: 0 },
{ x: '2024-02-19', y: 0 },
{ x: '2024-03-04', y: 0 },
{ x: '2024-03-18', y: 3 },
{ x: '2024-04-01', y: 8 },
{ x: '2024-04-15', y: 18 },
{ x: '2024-04-29', y: 23 },
{ x: '2024-05-13', y: 24 },
{ x: '2024-05-27', y: 20 },
{ x: '2024-06-10', y: 16 },
{ x: '2024-06-24', y: 10 },
{ x: '2024-07-08', y: 3 },
{ x: '2024-07-22', y: 0 },
{ x: '2024-08-05', y: 0 },
{ x: '2024-08-19', y: 0 },
{ x: '2024-09-02', y: 0 },
{ x: '2024-09-16', y: 0 },
{ x: '2024-09-30', y: 0 },
{ x: '2024-10-14', y: 0 },
{ x: '2024-10-28', y: 0 },
{ x: '2024-11-11', y: 0 },
{ x: '2024-11-25', y: 0 },
{ x: '2024-12-09', y: 0 },
{ x: '2024-12-23', y: 0 },
{ x: '2025-01-06', y: 0 },
],
},
{
name: 'House Martin',
data: [
{ x: '2024-01-08', y: 0 },
{ x: '2024-01-22', y: 0 },
{ x: '2024-02-05', y: 0 },
{ x: '2024-02-19', y: 0 },
{ x: '2024-03-04', y: 0 },
{ x: '2024-03-18', y: 0 },
{ x: '2024-04-01', y: 0 },
{ x: '2024-04-15', y: 4 },
{ x: '2024-04-29', y: 13 },
{ x: '2024-05-13', y: 18 },
{ x: '2024-05-27', y: 21 },
{ x: '2024-06-10', y: 23 },
{ x: '2024-06-24', y: 14 },
{ x: '2024-07-08', y: 4 },
{ x: '2024-07-22', y: 0 },
{ x: '2024-08-05', y: 0 },
{ x: '2024-08-19', y: 0 },
{ x: '2024-09-02', y: 0 },
{ x: '2024-09-16', y: 0 },
{ x: '2024-09-30', y: 0 },
{ x: '2024-10-14', y: 0 },
{ x: '2024-10-28', y: 0 },
{ x: '2024-11-11', y: 0 },
{ x: '2024-11-25', y: 0 },
{ x: '2024-12-09', y: 0 },
{ x: '2024-12-23', y: 0 },
{ x: '2025-01-06', y: 0 },
],
},
{
name: 'Cuckoo',
data: [
{ x: '2024-01-08', y: 0 },
{ x: '2024-01-22', y: 0 },
{ x: '2024-02-05', y: 0 },
{ x: '2024-02-19', y: 0 },
{ x: '2024-03-04', y: 0 },
{ x: '2024-03-18', y: 0 },
{ x: '2024-04-01', y: 0 },
{ x: '2024-04-15', y: 3 },
{ x: '2024-04-29', y: 9 },
{ x: '2024-05-13', y: 12 },
{ x: '2024-05-27', y: 8 },
{ x: '2024-06-10', y: 2 },
{ x: '2024-06-24', y: 0 },
{ x: '2024-07-08', y: 0 },
{ x: '2024-07-22', y: 0 },
{ x: '2024-08-05', y: 0 },
{ x: '2024-08-19', y: 0 },
{ x: '2024-09-02', y: 0 },
{ x: '2024-09-16', y: 0 },
{ x: '2024-09-30', y: 0 },
{ x: '2024-10-14', y: 0 },
{ x: '2024-10-28', y: 0 },
{ x: '2024-11-11', y: 0 },
{ x: '2024-11-25', y: 0 },
{ x: '2024-12-09', y: 0 },
{ x: '2024-12-23', y: 0 },
{ x: '2025-01-06', y: 0 },
],
},
{
name: 'Fieldfare',
data: [
{ x: '2024-01-08', y: 38 },
{ x: '2024-01-22', y: 36 },
{ x: '2024-02-05', y: 29 },
{ x: '2024-02-19', y: 19 },
{ x: '2024-03-04', y: 6 },
{ x: '2024-03-18', y: 0 },
{ x: '2024-04-01', y: 0 },
{ x: '2024-04-15', y: 0 },
{ x: '2024-04-29', y: 0 },
{ x: '2024-05-13', y: 0 },
{ x: '2024-05-27', y: 0 },
{ x: '2024-06-10', y: 0 },
{ x: '2024-06-24', y: 0 },
{ x: '2024-07-08', y: 0 },
{ x: '2024-07-22', y: 0 },
{ x: '2024-08-05', y: 0 },
{ x: '2024-08-19', y: 0 },
{ x: '2024-09-02', y: 0 },
{ x: '2024-09-16', y: 0 },
{ x: '2024-09-30', y: 0 },
{ x: '2024-10-14', y: 0 },
{ x: '2024-10-28', y: 0 },
{ x: '2024-11-11', y: 0 },
{ x: '2024-11-25', y: 0 },
{ x: '2024-12-09', y: 0 },
{ x: '2024-12-23', y: 6 },
{ x: '2025-01-06', y: 16 },
],
},
{
name: 'Redwing',
data: [
{ x: '2024-01-08', y: 13 },
{ x: '2024-01-22', y: 29 },
{ x: '2024-02-05', y: 30 },
{ x: '2024-02-19', y: 23 },
{ x: '2024-03-04', y: 14 },
{ x: '2024-03-18', y: 5 },
{ x: '2024-04-01', y: 0 },
{ x: '2024-04-15', y: 0 },
{ x: '2024-04-29', y: 0 },
{ x: '2024-05-13', y: 0 },
{ x: '2024-05-27', y: 0 },
{ x: '2024-06-10', y: 0 },
{ x: '2024-06-24', y: 0 },
{ x: '2024-07-08', y: 0 },
{ x: '2024-07-22', y: 0 },
{ x: '2024-08-05', y: 0 },
{ x: '2024-08-19', y: 0 },
{ x: '2024-09-02', y: 0 },
{ x: '2024-09-16', y: 0 },
{ x: '2024-09-30', y: 0 },
{ x: '2024-10-14', y: 0 },
{ x: '2024-10-28', y: 0 },
{ x: '2024-11-11', y: 0 },
{ x: '2024-11-25', y: 0 },
{ x: '2024-12-09', y: 0 },
{ x: '2024-12-23', y: 0 },
{ x: '2025-01-06', y: 4 },
],
},
{
name: 'Brambling',
data: [
{ x: '2024-01-08', y: 15 },
{ x: '2024-01-22', y: 20 },
{ x: '2024-02-05', y: 15 },
{ x: '2024-02-19', y: 4 },
{ x: '2024-03-04', y: 0 },
{ x: '2024-03-18', y: 0 },
{ x: '2024-04-01', y: 0 },
{ x: '2024-04-15', y: 0 },
{ x: '2024-04-29', y: 0 },
{ x: '2024-05-13', y: 0 },
{ x: '2024-05-27', y: 0 },
{ x: '2024-06-10', y: 0 },
{ x: '2024-06-24', y: 0 },
{ x: '2024-07-08', y: 0 },
{ x: '2024-07-22', y: 0 },
{ x: '2024-08-05', y: 0 },
{ x: '2024-08-19', y: 0 },
{ x: '2024-09-02', y: 0 },
{ x: '2024-09-16', y: 0 },
{ x: '2024-09-30', y: 0 },
{ x: '2024-10-14', y: 0 },
{ x: '2024-10-28', y: 0 },
{ x: '2024-11-11', y: 0 },
{ x: '2024-11-25', y: 0 },
{ x: '2024-12-09', y: 0 },
{ x: '2024-12-23', y: 0 },
{ x: '2025-01-06', y: 4 },
],
},
{
name: 'Wigeon',
data: [
{ x: '2024-01-08', y: 29 },
{ x: '2024-01-22', y: 22 },
{ x: '2024-02-05', y: 14 },
{ x: '2024-02-19', y: 4 },
{ x: '2024-03-04', y: 0 },
{ x: '2024-03-18', y: 0 },
{ x: '2024-04-01', y: 0 },
{ x: '2024-04-15', y: 0 },
{ x: '2024-04-29', y: 0 },
{ x: '2024-05-13', y: 0 },
{ x: '2024-05-27', y: 0 },
{ x: '2024-06-10', y: 0 },
{ x: '2024-06-24', y: 0 },
{ x: '2024-07-08', y: 0 },
{ x: '2024-07-22', y: 0 },
{ x: '2024-08-05', y: 0 },
{ x: '2024-08-19', y: 0 },
{ x: '2024-09-02', y: 0 },
{ x: '2024-09-16', y: 0 },
{ x: '2024-09-30', y: 0 },
{ x: '2024-10-14', y: 0 },
{ x: '2024-10-28', y: 0 },
{ x: '2024-11-11', y: 0 },
{ x: '2024-11-25', y: 0 },
{ x: '2024-12-09', y: 4 },
{ x: '2024-12-23', y: 12 },
{ x: '2025-01-06', y: 24 },
],
},
{
name: 'Wheatear',
data: [
{ x: '2024-01-08', y: 0 },
{ x: '2024-01-22', y: 0 },
{ x: '2024-02-05', y: 0 },
{ x: '2024-02-19', y: 0 },
{ x: '2024-03-04', y: 0 },
{ x: '2024-03-18', y: 5 },
{ x: '2024-04-01', y: 11 },
{ x: '2024-04-15', y: 6 },
{ x: '2024-04-29', y: 0 },
{ x: '2024-05-13', y: 0 },
{ x: '2024-05-27', y: 0 },
{ x: '2024-06-10', y: 0 },
{ x: '2024-06-24', y: 0 },
{ x: '2024-07-08', y: 0 },
{ x: '2024-07-22', y: 0 },
{ x: '2024-08-05', y: 0 },
{ x: '2024-08-19', y: 0 },
{ x: '2024-09-02', y: 0 },
{ x: '2024-09-16', y: 4 },
{ x: '2024-09-30', y: 10 },
{ x: '2024-10-14', y: 5 },
{ x: '2024-10-28', y: 0 },
{ x: '2024-11-11', y: 0 },
{ x: '2024-11-25', y: 0 },
{ x: '2024-12-09', y: 0 },
{ x: '2024-12-23', y: 0 },
{ x: '2025-01-06', y: 0 },
],
},
{
name: 'Sandpiper',
data: [
{ x: '2024-01-08', y: 0 },
{ x: '2024-01-22', y: 0 },
{ x: '2024-02-05', y: 0 },
{ x: '2024-02-19', y: 0 },
{ x: '2024-03-04', y: 0 },
{ x: '2024-03-18', y: 0 },
{ x: '2024-04-01', y: 3 },
{ x: '2024-04-15', y: 9 },
{ x: '2024-04-29', y: 4 },
{ x: '2024-05-13', y: 0 },
{ x: '2024-05-27', y: 0 },
{ x: '2024-06-10', y: 0 },
{ x: '2024-06-24', y: 0 },
{ x: '2024-07-08', y: 0 },
{ x: '2024-07-22', y: 0 },
{ x: '2024-08-05', y: 0 },
{ x: '2024-08-19', y: 0 },
{ x: '2024-09-02', y: 6 },
{ x: '2024-09-16', y: 14 },
{ x: '2024-09-30', y: 8 },
{ x: '2024-10-14', y: 0 },
{ x: '2024-10-28', y: 0 },
{ x: '2024-11-11', y: 0 },
{ x: '2024-11-25', y: 0 },
{ x: '2024-12-09', y: 0 },
{ x: '2024-12-23', y: 0 },
{ x: '2025-01-06', y: 0 },
],
},
],
chart: {
type: 'streamgraph',
height: 480,
},
// A ramp, not a categorical palette. With this many bands a wrapping palette
// gives neighbours the same colour and they merge into one shape; stepping
// through a range keeps every band its own while the whole still reads as one
// surface.
colors: [
'#0B3C49',
'#14595B',
'#1C7A6B',
'#2E9E77',
'#57BE7F',
'#8CD48A',
'#C2E39A',
'#E8E3A2',
'#F2CE86',
'#EBAF6B',
'#DE8F58',
'#CC7050',
'#B4544E',
'#94414E',
'#6E3448',
'#472A3C',
],
plotOptions: {
streamgraph: {
offset: 'wiggle',
order: 'inside-out',
},
},
legend: {
show: false,
},
title: {
text: 'A year of birds at the reserve',
align: 'left',
},
subtitle: {
text: 'Illustrative counts. Residents hold the middle; migrants arrive, swell and go.',
align: 'left',
},
xaxis: {
type: 'datetime',
labels: {
format: 'MMM',
},
},
tooltip: {
x: {
format: 'd MMM yyyy',
},
},
};
ngAfterViewInit() {
(window as any).ApexCharts.setLicense('APEX-eyJleHBpcnlEYXRlIjoiMjEyNi0wNy0wNCIsImlzc3VlRGF0ZSI6IjIwMjYtMDctMjgiLCJwbGFuIjoicHJlbWl1bSIsImRvbWFpbnMiOlsiYXBleGNoYXJ0cy5jb20iLCIxMjcuMC4wLjEiLCJsb2NhbGhvc3QiXSwic2lnIjoieVBmb1VCc0Z3TU9ZdUEyaEZkR0I2Y1FtZ0JITUtXcVdJSjB2NVRESXRZbFR3eDJMUmh6R2x0RUc3VXJ4X0s3b25ZMWRZb2Z2VGItN01ydFYyNDVyOWcifQ==');
}
ngOnDestroy() {
// no cleanup needed
}
}