LightningChart JS is the highest performance JavaScript charting library focused on real-time data visualization. is the highest performing charting library on the web with outstanding performance - monitor dozens of data sources simultaneously using high data rates. GPU acceleration and WebGL rendering ensures that your device's graphics processor is used efficiently, resulting in high refresh rates and smooth animations. For applications in trade, engineering, aerospace, medicine and other fields.
LightningChart JS | Download Trial (qun:740060302) 
https://www.evget.com/product/4189/download JavaScript Instrument Chart
In this article, we will use LightningChart JS to create a JavaScript gauge chart. The implementation of this project will be similar to other articles, such as donut or pie charts. I suggest you check these out and extend your commands to create simple JS charting applications.
Features of instrumentation diagrams
Gauge charts are also known as dial or speedometer charts, this type of chart is easy to understand and implement. Some of its features are:
- Gauge charts focus on individual values and their progress relative to the total value measured by a particular variable.
- Gauge diagrams are easy to understand because their range and target markers provide additional context for what is being measured. That is, visualize the minimum, current and maximum values.
- Gauge diagrams can use color, gradients, and shading to aid user understanding and experience.
- Gauge diagrams are straightforward, with information simplified and focus on individual measurements.
Since you're probably already familiar with this type of diagram, let's start with the project.
Project Overview
Here you can interact with the gauge graph. In this tutorial, you'll find all the necessary properties to help you customize its appearance.
Download the JavaScript Gauge Project to follow this tutorial
local settings
1. Download the starter template that will get us started with this example.
2. After downloading the template, you will see a file list like this:
3. Open a new terminal and run the npm install command:
As in NodeJS projects, you need to run the npm install command. That's all for our initial setup.
CHART.ts
In this file, we will have all the logic needed to create the chart, configure animations and format the data.
1. Reference the constant lcjs of the @arction/lcjs library.
const lcjs = require('@arction/lcjs')
2. Extract the required classes from lcjs
const { lightningChart, GaugeChartTypes, Themes } = lcjs
3. Create a chart object
const gauge = lightningChart()
.Gauge({
theme: Themes.duskInLapland,
type: GaugeChartTypes.Solid,
})
.setTitle('Annual sales goal')
.setThickness(200)
.setDataLabelFormatter(new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }))
.setAngleInterval(225, -45)
Review some parameters:
- Gauge: This is the class that allows us to create the type of chart we need.
- setTitle: Determines the text that will be displayed as the title at the top of the dashboard.
- Theme: Here you can specify theme colors. By default, LightningChart JS has a set of implementations accessible through Themes.
- setDataLabelFormatter: This property defines a new number formatter for data labels.
- setThickness: Defines the thickness of the gauge map.
- setAngleInterval: It defines the interval of the gauge in degrees.
4. Create a Gauge Slice
const slice = gauge
.getDefaultSlice()
.setInterval(0, 400000)
.setValue(329000)
.setName('2023 sales')
Using getDefaultSlice, we will call the slice of the gauge graph. setInterval will determine the interval used in the chart. setValue determines the value of the measure slice. setName defines the name of the chart, you can use this property to display it in the legend box, for example.
5. Legend box
const legend = gauge
.addLegendBox()
// Dispose example UI elements automatically if they take too much space. This is to avoid bad UI on mobile / etc. devices.
.setAutoDispose({
type: 'max-width',
maxWidth: 0.3,
})
In this step we will add an inner legend box to the chart:
setAutoDispose: This is a responsive function. If the example UI elements take up too much space, it automatically disposes of them, which helps avoid poor user experience on small-screen devices.
legendBoxBuilder: A collection of available LegendBox builders. To build LegendBoxes, you must pass one of them to the method: addLegendBox(). This method can be accessed through charts, dashboards, etc.
6. Add legend box
legend.add(gauge)
It adds a legend box to the gauge chart.
As with other similar projects, you have to open a new terminal (for example, in Visual Studio) and run the npm start command. You will then get the URL path to your localhost and be able to visualize your graph in the browser.
So, as you've seen in this article, we've created simple diagrams for developing with JavaScript at a beginner's level. However, each diagram may vary in complexity depending on the needs of the client or project.
This is the end of this introduction on how to use LightningChart JS to create JavaScript gauge charts. If you have any questions and need to know more details, please comment or chat with me privately. Welcome to join the official community to communicate with each other~