In this article, we saw how to draw 3d Stacked Column Interactive charts in angular using HighChart. In the last article, we saw a 3D Column Column chart in HighChart. In this article, we can create a stacked column rotate(Interactive) chart. In this article, we have taken an example of the consumption of the fruit by category men and women.
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 “column” and adding series data we need to pass the categories fruits data and pass the stack name in json format to draw the data. In last article we show for 3D chart option enable we need to import “highcharts-3d” in our component. How to import “highcharts-3d” modules display in below code.
import highcharts3D from 'highcharts/highcharts-3d';
highcharts3D(Highcharts);
We need 3 parameters(alpha,beta,depth) to chnage the chart interactive chart.
Below is the full code for component and the html files.
Below is the full embeded code for the 3D Stacked Column Interactive chart using Highchart you can easily used in your application.
1 2