Spline com eixos invertidos

Já vimos a configuração usada para desenhar este gráfico no capítulo Highcharts Configuration Syntax . Vamos agora considerar o exemplo a seguir para entender melhor um Spline com eixos invertidos.

Configurações

Configure o tipo de gráfico para ser baseado em splines. chart.type decide o tipo de série do gráfico. Aqui, o valor padrão é "linha". Configure os eixos a serem invertidos. Quando o eixo x verdadeiro é vertical e o eixo y é horizontal - se uma série de barras estiver presente no gráfico, a mesma será invertida. Aqui, o valor padrão é falso.

var chart = {
   type: 'spline',
   inverted: true
};

Exemplo

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]]
      }]
   };
}

Resultado

Verifique o resultado.