Highcharts angulares: rango de columnas

A continuación se muestra un ejemplo de un gráfico de columnas que utiliza rangos.

Ya hemos visto la configuración utilizada para dibujar un gráfico en el capítulo Sintaxis de configuración de Highcharts .

A continuación se muestra un ejemplo de un gráfico de columnas que utiliza rangos.

Configuraciones

Veamos ahora configuraciones adicionales.

gráfico

Configure el tipo de gráfico para que esté basado en 'rango de columnas'. chart.type decide el tipo de serie para el gráfico. El valor predeterminado es "línea".

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

Ejemplo

app.component.ts

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
import addMore from "highcharts/highcharts-more";
addMore(Highcharts)
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   highcharts = Highcharts;
   chartOptions = {   
      chart : {
         type: 'columnrange',
         inverted:true
      },
      title : {
         text: 'Temperature variation by month'   
      },
      subtitle : {
         text: 'Observed in Vik i Sogn, Norway, 2009'   
      },
      xAxis : {
         categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']      
      },
      yAxis : {     
         title: {
            text: 'Temperature ( \xB0C )'         
         }      
      },
      tooltip: {
         headerFormat: '<span style = "font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style = "color:{series.color};padding:0">{series.name}: </td>' +
            '<td style = "padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
         shared: true,
         useHTML: true
      },
      plotOptions : {
         columnrange: {
            dataLabels: {
               enabled: true,
               formatter: function () {
                  return this.y + '\xB0C';
               }
            }
         }
      },
      credits : {
         enabled: false
      },
      series : [{
         name: 'Temperatures',
         data: [
            [-9.7, 9.4],
            [-8.7, 6.5],
            [-3.5, 9.4],
            [-1.4, 19.9],
            [0.0, 22.6],
            [2.9, 29.5],
            [9.2, 30.7],
            [7.3, 26.5],
            [4.4, 18.0],
            [-3.1, 11.4],
            [-5.2, 10.4],
            [-13.5, 9.8]
         ]
      }]
   };
}

Resultado

Verifica el resultado.