Gráfico de área con valores perdidos

A continuación se muestra un ejemplo de un gráfico de áreas con valores perdidos.

Ya hemos visto las configuraciones utilizadas para dibujar un gráfico en el capítulo Sintaxis de configuración de Highcharts . Ahora, veamos un ejemplo de un gráfico de áreas con valores perdidos. Hemos agregado el atributo spacingBottom en el gráfico.

gráficos

Configurar el spacingBottom del gráfico como 30. Significa el espacio entre el borde inferior del gráfico y el contenido (área del gráfico, título y etiquetas del eje, título, subtítulo o leyenda en la posición superior).

var chart = {
   type: 'area',
   spacingBottom: 30
};

Ejemplo

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: 'area',
         spacingBottom: 30
      },
      title: {
         text: 'Fruit consumption *'
      },
      subtitle : {
         text: '* Jane\'s banana consumption is unknown',
         floating: true,
         align: 'right',
         verticalAlign: 'bottom',
         y: 15
      },
      legend : {
         layout: 'vertical',
         align: 'left',
         verticalAlign: 'top',
         x: 150,
         y: 100,
         floating: true,
         borderWidth: 1,
         backgroundColor: (
            Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
      },
      xAxis:{
         categories: ['Apples', 'Pears', 'Oranges', 'Bananas', 'Grapes', 'Plums', 'Strawberries', 'Raspberries']
      },
      yAxis : {
         title: {
            text: 'Y-Axis'
         },
         labels: {
            formatter: function () {
               return this.value;
            }
         }
      },
      tooltip : {
         formatter: function () {
            return '<b>' + this.series.name + '</b><br/>' +
               this.x + ': ' + this.y;
         }
      },
      plotOptions : {
         area: {
            fillOpacity: 0.5 
         }
      },
      credits:{
         enabled: false
      },
      series: [
         {
            name: 'John',
            data: [0, 1, 4, 4, 5, 2, 3, 7]
         }, 
         {
            name: 'Jane',
            data: [1, 0, 3, null, 3, 1, 2, 1]
         }
      ]
   };
}

Resultado

Verifica el resultado.