⚡ Angular Highcharts Gauges

• Angular app using the Highcharts API to visualise data.
• Displays a gauge, configurable from the app.component.ts file using values from Highcharts documentation.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

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

📚 General info

• Latest versions of all dependencies used, including highcharts. No errors
• Uses the Highcharts solid gauge module
• Random number function used to create data for gauge

📷 Screenshots

📶 Technologies

• Angular framework v16
• Highcharts v11

💾 Setup

• npm i to install dependencies
• ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
• ng build to create a build file

💻 Code Examples

• extract from app.component.ts - function to create a solid gauge

  private createSolidGauge1(): void {
    const chart = Highcharts.chart("solid-gauge", {
      chart: {
        type: "solidgauge",
      },
      title: {
        text: "Random Number Solid Gauge",
      },
      credits: {
        enabled: true,
      },
      pane: {
        startAngle: -90,
        endAngle: 90,
        center: ["50%", "85%"],
        size: "160%",
        background: {
          innerRadius: "60%",
          outerRadius: "100%",
          shape: "arc",
        },
      },
      yAxis: {
        min: 0,
        max: 600,
        stops: [
          [0.3, "green"],
          [0.5, "yellow"],
          [0.7, "orange"],
          [0.9, "red"],
        ],
        minorTickInterval: null,
        tickAmount: 2,
        labels: {
          y: 16,
        },
      },
      plotOptions: {
        solidgauge: {
          dataLabels: {
            y: -25,
            borderWidth: 0,
            useHTML: true,
          },
        },
      },
      tooltip: {
        enabled: false,
      },
      series: [
        {
          name: null,
          data: [this.getRandomNumber(0, 600)],
          dataLabels: {
            format:
              '<div style="text-align: center"><span style="font-size: 3rem">{y}</span></div>',
          },
        },
      ],
    } as any);

    setInterval(() => {
      chart.series[0].points[0].update(this.getRandomNumber(0, 600));
    }, 1000);
  }

🆒 Features

• Highcharts gauges have other types of gauges and lots of options that can be configured.

📋 Status & To-Do List

• Status: Working
• To-Do: Nothing

👏 Inspiration

• Highcharts Solid Gauge Documentation

📁 License

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

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com