โก Angular HighCharts Dashboard
- Angular app to show a dashboard with a selecion of chart types from Highcharts
- Much of code from code-academia but to latest Angular version
- Note: to open web links in a new window use: ctrl+click on link
๐ General info - Highcharts/Angular Chart Types
- Install dependencies using
npm i
- Run
npm start
for a dev server. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
- Run
npm run build
to build the project. The build artifacts will be stored in the docs
directory.
- extract from initialisation of pie chart page, showing chart options
ngOnInit() {
this.chartOptions = {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'BROWSERS: MARKET SHARE'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
accessibility: {
point: {
valueSuffix: '%'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'Brands',
colorByPoint: true,
data: this.data
}]
};
}
- Status: Working but does not display properly on mobile screen
- To-Do: Replace flex-layout
- This project is licensed under the terms of the MIT license.