⚡ 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

📄 Table of contents

• ⚡ Angular HighCharts Dashboard
  • 📄 Table of contents
  • 📚 General info - Highcharts/Angular Chart Types
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info - Highcharts/Angular Chart Types

• Pie Chart
• Stacked Area
• Angular Material Table

📷 Screenshots

📶 Technologies

• Angular v16 JavaScript framework
• Angular Material v16
• Angular Flex Layout v14. Flex-layout is deprecated
• Highcharts v11
• highcharts-angular v3 official minimal Highcharts wrapper for Angular

💾 Setup

• 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.

💻 Code Examples

• 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
      }]
    };
}

🆒 Features

• Colourful chart types

📋 Status & To-Do List

• Status: Working but does not display properly on mobile screen
• To-Do: Replace flex-layout

👏 Inspiration

• code-academia: Angular 8 Admin Dashboard Panel from scratch using Angular Material, highcharts and flex-layout
• Github repo: Angular Material Dashboard using Angular Material, highcharts and flexbox

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: [email protected]