Footer in Angular Chart component
27 Apr 20246 minutes to read
By using annotation
, you can place any html elements to chart in a desired view.
To create footer and watermark for chart, follow the given steps:
Step 1:
Initialize the custom elements by using the annotation
property.
By using the content
option of the annotation object, you can specify the id of the element that needs
to be displayed in the chart.
Use the content
option of the annotation object to create watermark text for chart. The specified content syncfusion needs to be displayed in chart in the specified coordinate unit.
# watermark for chart
<e-annotations>
<e-annotation content='<div id="chart_cloud" style="font-size:450%; opacity: 0.3;" >syncfusion</div>'
x='Wed' y= 20 coordinateUnits= 'Point' horizontalAlignment='Center'>
</e-annotation>
</e-annotations>
Use the x
and y
option of the annotation object to create footer for chart.
<e-annotations>
# footer for chart
<e-annotation content='<div id="chart" > <a href="https://www.syncfusion.com" target="_blank">www.syncfusion.com</a></div>'
x=400 y=440 coordinateUnits='Pixel' horizontalAlignment='Center'>
</e-annotation>
</e-annotations>
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule, ChartAllModule, AccumulationChartAllModule } from '@syncfusion/ej2-angular-charts'
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts'
import { PieSeriesService, AccumulationTooltipService, AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts'
import {
LineSeriesService, DateTimeService, DataLabelService, StackingColumnSeriesService, CategoryService,
StepAreaSeriesService, SplineSeriesService, ScrollBarService, ChartAnnotationService, LegendService, TooltipService, StripLineService,
SelectionService, ScatterSeriesService, ZoomService, ColumnSeriesService, AreaSeriesService, RangeAreaSeriesService
} from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
@Component({
imports: [
ChartModule, ChartAllModule, AccumulationChartAllModule, AccumulationChartModule
],
providers: [LineSeriesService, DateTimeService, ColumnSeriesService, DataLabelService, ZoomService, StackingColumnSeriesService, CategoryService,
StepAreaSeriesService, SplineSeriesService, ChartAnnotationService, LegendService, TooltipService, StripLineService,
PieSeriesService, AccumulationTooltipService, ScrollBarService, AccumulationDataLabelService, SelectionService, ScatterSeriesService,
AreaSeriesService, RangeAreaSeriesService ],
standalone: true,
selector: 'app-container',
template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title'>
<e-annotations>
<e-annotation content='<div id="chart_cloud" style="font-size:450%; opacity: 0.3;" >syncfusion</div>'
x='Wed' y= 20 coordinateUnits= 'Point' horizontalAlignment='Center'>
</e-annotation>
<e-annotation content='<div id="chart" > <a href="https://www.syncfusion.com" target="_blank">www.syncfusion.com</a></div>'
x=400 y=440 coordinateUnits='Pixel' horizontalAlignment='Center'>
</e-annotation>
</e-annotations>
<e-series-collection>
<e-series [dataSource]='chartData' type='Spline' xName='x' yName='y' name='Max Temp' width=2 [marker]='marker'></e-series>
</e-series-collection>
</ejs-chart>`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public chartData?: Object[];
public title?: string;
public marker?: Object;
public primaryYAxis?: Object;
ngOnInit(): void {
this.chartData =[
{ x: 'Sun', y: 15 }, { x: 'Mon', y: 5 },{ x: 'Tue', y: 32 },
{ x: 'Wed', y: 15 },{ x: 'Thu', y: 29 }, { x: 'Fri', y: 24 },
{ x: 'Sat', y: 18 },
];
this.primaryXAxis = {
valueType: 'Category',
interval: 1, majorGridLines: { width: 0 },
labelIntersectAction: 'Rotate90'
};
this.primaryYAxis = {
minimum: 0,
maximum: 40,
interval: 10,
};
this.marker = { visible: true};
this.title = 'NC Weather Report - 2016';
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));