- 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
Spline with inverted Axes
We have already seen the configuration used to draw this chart in Highcharts Configuration Syntax chapter. Let us now consider the following example to further understand a Spline with inverted Axes.
Configurations
Configure the chart type to be spline based. chart.type decides the series type for the chart. Here, the default value is "line". Configure the axes to be inverted. When true x axis is vertical and y axis is horizontal - if a bar series is present in the chart, the same will be inverted. Here, the default value is false.
var chart = { type: 'spline', inverted: true };
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: 'spline', inverted: true }, title: { text: 'Atmosphere Temperature by Altitude' }, subtitle: { text: 'According to the Standard Atmosphere Model' }, xAxis:{ reversed: false, title: { enabled: true, text: 'Altitude' }, labels: { formatter: function () { return this.value + 'km'; } }, maxPadding: 0.05, showLastLabel: true }, yAxis: { title:{ text: 'Temperature' }, labels: { formatter: function () { return this.value + '\xB0'; } }, lineWidth: 2 }, legand:{ enabled: false }, tooltip: { headerFormat: '<b>{series.name}</b><br/>', pointFormat: '{point.x} km: {point.y}\xB0C' }, plotOptions: { spline: { marker: { enable: false } } }, series : [{ name: 'Temperature', data: [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1], [50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]] }] }; }
Result
Verify the result.
angular_highcharts_line_charts.htm
Advertisements