Deux axes, ligne et colonne

Voici un exemple de graphique avec deux axes, une ligne et une colonne.

Nous avons déjà vu la configuration utilisée pour dessiner un graphique dans le chapitre Syntaxe de configuration Highcharts .

Un exemple de graphique combiné comportant deux axes, une ligne et une colonne est donné ci-dessous.

Exemple

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 : {
         zoomType: 'xy'
      },
      title : {
         text: 'Source: WorldClimate.com'   
      },   
      subtitle : {
         text: 'Average Monthly Temperature and Rainfall in Tokyo'
      },
      xAxis : {
         categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
         crosshair: true
      },
      yAxis : [
         { // Primary yAxis
            labels: {
               format: '{value}\xB0C',
                  style: {
                     color: Highcharts.getOptions().colors[1]
                  }
            },
            title: {
               text: 'Temperature',
               style: {
                  color: Highcharts.getOptions().colors[1]
               }
            }
         }, 
         { // Secondary yAxis
            title: {
               text: 'Rainfall',
               style: {
                  color: Highcharts.getOptions().colors[0]
               }
            },
            labels: {
               format: '{value} mm',
               style: {
                  color: Highcharts.getOptions().colors[0]
               }
            },
            opposite: true
         }
      ],
      tooltip: {
         shared: true
      },
      legend: {
         layout: 'vertical',
         align: 'left',
         x: 60,
         verticalAlign: 'top',
         y: 100,
         floating: true,
               
         backgroundColor: (
            Highcharts.theme && Highcharts.theme.legendBackgroundColor)
            || '#FFFFFF'
      },
      series : [
         {
            name: 'Rainfall',
            type: 'column',
            yAxis: 1,
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5,
                    216.4, 194.1, 95.6, 54.4],
            tooltip: {
               valueSuffix: ' mm'
            }
         }, 
         {
            name: 'Temperature',
            type: 'spline',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
            tooltip: {
               valueSuffix: '\xB0C'
            }
         }
      ]
   };
}

Résultat

Vérifiez le résultat.