- Angular Highcharts Tutorial
- Angular Highcharts - Home
- Angular Highcharts - Overview
- Environment Setup
- Configuration Syntax
- Angular Highcharts - Line Charts
- Angular Highcharts - Area Charts
- Angular Highcharts - Bar Charts
- Angular Highcharts - Column Charts
- Angular Highcharts - Pie Charts
- Angular Highcharts - Scatter Chart
- Angular Highcharts - Dynamic Charts
- Angular Highcharts - Combinations
- Angular Highcharts - 3D Charts
- Angular Highcharts - Map Charts
- Angular Highcharts Resources
- Angular Highcharts - Quick Guide
- Angular Highcharts - Resources
- Angular Highcharts - Discussion
Area Chart using Spline
We have already seen the configurations used to draw a chart in Highcharts Configuration Syntax chapter. Now, let us see an example of a Area Chart using spline. We will also understand additional configuration. We have changed the type attribute in chart.
chart
Configure the chart type to be 'areaspline' based. chart.type decides the series type for the chart. Here, the default value is "line".
var chart = { type: 'areaspline' };
Example
app.component.ts
import { Component } from '@angular/core'; import * as Highcharts from 'highcharts'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { highcharts = Highcharts; chartOptions = { chart: { type: 'areaspline' }, title: { text: 'Average fruit consumption during one week' }, subtitle : { style: { position: 'absolute', right: '0px', bottom: '10px' } }, legend : { layout: 'vertical', align: 'left', verticalAlign: 'top', x: -150, y: 100, floating: true, borderWidth: 1, backgroundColor: ( Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF' }, xAxis:{ categories: ['Monday','Tuesday','Wednesday','Thursday', 'Friday','Saturday','Sunday'] }, yAxis : { title: { text: 'Number of units' } }, tooltip : { shared: true, valueSuffix: ' units' }, plotOptions : { area: { fillOpacity: 0.5 } }, credits:{ enabled: false }, series: [ { name: 'John', data: [3, 4, 3, 5, 4, 10, 12] }, { name: 'Jane', data: [1, 3, 4, 3, 3, 5, 4] } ] }; }
Result
Verify the result.
angular_highcharts_area_charts.htm
Advertisements