Bar Chart in Angular using Highchart

In the last article, we discuss how to create stacked area chart. Using world region population example In this article the same example we use for the bar chart to draw data of the world population.
Bar Chart or Bar Graph: Bar graph(chart) is a chart that represents the categories data with a rectangular bars with height or length proportional to the value they represent.
Let’s draw the chart for the population chart categories that have regions and data series we pass the data over the years for each region.
For drawing the chart First, we need to install High chart node modules in our application.


npm install highcharts --save
npm install highcharts-angular --save

After installing module lets add a module in our app.module.ts file.

....
import { HighchartsChartModule } from 'highcharts-angular';
...
@NgModule({
imports:      [ ..., HighchartsChartModule],
....
})



After adding a module in the app.module file we can use it in our component to draw the chart. Let’s create app.component.ts file and add import highchat module using “import * as Highcharts from ‘highcharts’;” then assign options and values to the chart in this chart we need to chart type as “bar” and adding In xAxis we pass the categories as each region. and seres data we pass the years over value of the population also display legend so you can easily identify theWich cloum for which years.


import { Component, VERSION ,OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';

declare var require: any;
const More = require('highcharts/highcharts-more');
More(Highcharts);

const Exporting = require('highcharts/modules/exporting');
Exporting(Highcharts);

const ExportData = require('highcharts/modules/export-data');
ExportData(Highcharts);

const Accessibility = require('highcharts/modules/accessibility');
Accessibility(Highcharts);

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  implements OnInit{


 public options: any = {
    chart: {
       type: 'bar'
    },
    accessibility: {
        description: '',
    },
    title: {
       text: 'Historic World Population by Region'
    },
    subtitle: {
        text: 'Sources: Dummy data'
    },
    xAxis: {
        categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
        tickmarkPlacement: 'on',
        title: {
            enabled: false
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Population (millions)',
            align: 'high'
        },
        labels: {
            overflow: 'justify'
        }
    },
    tooltip: {
        valueSuffix: ' millions'
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true
            }
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: -40,
        y: 80,
        floating: true,
        borderWidth: 1,
        backgroundColor:
            Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
        shadow: true
    },
    series: [{
        name: 'Year 1800',
        data: [107, 31, 635, 203, 2]
    }, {
        name: 'Year 1900',
        data: [133, 156, 947, 408, 6]
    }, {
        name: 'Year 2000',
        data: [814, 841, 3714, 727, 31]
    }, {
        name: 'Year 2016',
        data: [1216, 1001, 4436, 738, 40]
    }, {
        name: 'Year 2020',
        data: [1416, 1101, 4486, 750, 45]
    }]
  }

  constructor() { }

  ngOnInit(){
    Highcharts.chart('container', this.options);
  }
}


<h1 style="text-align:center">HighChart For Bar Chart</h1>
<div id="container"></div>




Below is the full embeded code for the bar chart using Highchart you can easily used in your application.

Spread the love
  •  
  •  
  •  
  •  
  •  
  • 2
  •  
  •