Gráfico de barras con valores negativos

A continuación se muestra un ejemplo de un gráfico de barras con valores negativos.

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 barras básico con valores negativos.

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: 'bar'
      },
      title: {
         text: 'Bar chart with negative values'
      },
      xAxis:{
         categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']        
      },     
      series: [
         {
            name: 'John',
            data: [5, 3, 4, 7, 2]
         }, 
         {
            name: 'Jane',
            data: [2, -2, -3, 2, 1]
         }, 
         {
            name: 'Joe',
            data: [3, 4, 4, -2, 5]
         }
      ]
   };
}

Resultado

Verifica el resultado.