angularhighchartsangular-highcharts

Highcharts not rotating to vertical in angular

I want to draw a vertical "bar chart" using HighCharts in angular, I have done many google searches, there I find that add this code in chart options then it will be done,

chart: {
      type: 'column'
    }

or

chart: {
          type: 'bar'
        }

but I tried many times, it didn't work, is there any solution for it? here is my Highchart Code,

main-dashboard.ts file

import * as HighCharts from 'highcharts';
import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-main-dashboard',
  templateUrl: './main-dashboard.component.html',
  styleUrls: ['./main-dashboard.component.css']
})
export class MainDashboardComponent implements OnInit {
  highcharts = HighCharts;
  chartOptions: HighCharts.Options = {
    chart: {
      type: 'column'
    },
    title: {
      text: 'Column chart with negative values'
    },
    xAxis: {
      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
    },
    plotOptions: {
      series: {
        stacking: 'normal'
      },
      column: {
        pointPadding: 0,
        borderWidth: 0,
        groupPadding: 0,
        shadow: false
    }
    },
    series: [{
      type: 'bar',
      name: 'John',
      data: [5, 3, 0, 7, 2]
    }, {
      name: 'Jane',
      type: 'bar',
      data: [2, -2, -3, 0, 1]
    }, {
      type: 'bar',
      name: 'Joe',
      data: [0, 4, 4, -2, 5]
    }]
  };
constructor() { }

ngOnInit(): void {
}

}

main-dashboard.component.html file

<highcharts-chart
   [Highcharts] = "highcharts" 
   [options] = "chartOptions" 
   style = "width: 100%; height: 400px; display: block;">
</highcharts-chart>

its result is a horizontal bar chart, enter image description here but I want like this vertical bar chart, just to be vertical enter image description here

is there any solution for it, pls help, I need it for my project. Thanks.

Solution

  • Solved, just by changing the type of series:

    series: [{
      type: 'column',
      name: 'John',
      data: [5, 3, 0, 7, 2]
    }, {
      name: 'Jane',
      type: 'column',
      data: [2, -2, -3, 0, 1]
    }, {
      type: 'column',
      name: 'Joe',
      data: [0, 4, 4, -2, 5]
    }]