Today, we will be creating a Pyramid Chart using Lightning Chart JS and Node JS. A pyramid chart gets this name because the values are represented in semi-triangular sections until they form a pyramid. This pyramid chart offers a fairly easy-to-understand representation of data and is mostly used to represent hierarchies, datasets, or topics.

These pyramid charts are usually vertical, although there are variants where the orientation can be modified depending on the user’s interpretation requirements. So, pyramid charts typically show categories and assign the largest sections to those with the highest values.

A pyramid chart is a very effective way to demonstrate quantities and hierarchies. JavaScript pyramid charts are easy to understand and simple to use for data analysis. Obviously, it is not as complex as a line or bar chart, but it works very well as an introductory chart to a data analysis project.

In this project we will be creating a pyramid chart using LightningChart JS involves designing an interactive and visually appealing pyramid diagram template. The goal is to create a pyramid graph to easily visualize data.

The chart was implemented using the triangle diagram concept, with a base representing the largest value and the apex representing the smallest. The chart will be fully customizable and responsive. Overall, this project can be a powerful web and mobile application tool for data visualization.

1. Download the template provided to follow the tutorial.

2. After downloading the template, you’ll see a file tree like this:

3. Open a new terminal and run the npm install command

Inside this file, we will have all the logic needed to create our chart, configure animations, and format the data.

1. Declare the constant lcjs that will refer to our @arction/lcjs/xydata libraries.

2. Extract required classes from lcjs

3. Creating a pyramid chart object

Factory for PyramidChart. This chart visualizes proportions and percentages between categories.

PyramidChartOptions.type: This parameter specifies the visual format of the object pyramid chart from a collection of different options.

• LabelsOnSides: for creating a Pyramid Chart type where the Slice Labels are positioned on either the left or right sides of the Chart. The side can be set using setLabelSide Labels are connected to their Slices with lines, which can be styled using a unique API for this Pyramid Chart type.

• LabelsInsideSlices: Pyramid Chart type, where Slice Labels inside the Slices.

• PyramidChartOptions.theme: Specify chart color theme.

• PyramidChartOptions.disableAnimations: Convenience flag to disable all animations from the chart.

• Theme: A collection of default implementations can be accessed by Themes. The color theme of components must be specified when it is created and can’t be changed afterward (without destroying and recreating the component). All properties can be consulted in the theme’s documentation.

• SliceGap: Set the gap between the Slice/start of the label connector and the end of the label connector/Label. Example: Gap = 500

Slice gap example of the pyramid chart object

• setLabelSide: Set the side where label should display.
• NeckWidth: Pyramid Neck Width ranges from 0 to 100. Example: NeckWidth = 8

Triangle chart neck width

1. Main properties

Each slice will need the name and value properties. We can add all the slices we need and store them in an array.

2. Pyramid Chart Slices

addSlices: This method is used for adding multiple slices in the pyramid chart. This method needs a slice array object.

3. Text Labels

The setLabelFormatter function which generates text of Labels per Slice.

• Name: Slice Label formatter for ${name}.

• NamePlusRelativeValue: Slice Label formatter for ${name}: ${(relativeValue * 100).toFixed(1)}%.

• NamePlusValue: Slice Label formatter for ${name}: ${Math.round(animatedValue)}.

4. Legend Boxes

The addLegendBox property is a collection of available LegendBox builders. To build LegendBoxes you must pass one of these to the method addLegendBox(). This method can be accessed through Charts, Dashboard, Etc. The legend boxes can be created as horizontal or vertical boxes.

5. Auto dispose mode

Interface for describing the auto dispose mode of a UI element. This can be used to set a condition where the UI element is automatically disposed removing it from view. Use with [[UIElement.setAutoDisposeMode]].

6. Toggled visibility on the pyramid diagram

When it’s true, the clicked slice reference will hide the slice object in the pyramid plot: toggleVisibilityOnClick = true

This was a pretty simple exercise for creating a pyramid chart with LightningChart JS. However, it’s highly useful if this is your first time working with Lightning Chart JS or data visualization. If we had to summarize the construction process of this chart, it would be:

1. Import components.
2. Declare a pyramid diagram object.
3. Create a data object.
4. Add the slides to the chart.

It’s nice to know that we can focus on developing the chart, without having to worry about creating visual effects and styles for it. If you decide to carry out this example, remember that you can download the template. 

Currently, there are other articles that I recommend you to continue developing easy charts, for example, the JS Pie chart which is another great exercise to practice with LC JS.

Remember that you must have NODE JS installed and an IDE that can help you run it easily. Visual Studio Code will be able to help you without problems. Now, if you want to practice with real values, you can create a JSON file.

Remember that you only need two values: name and value. If you have an API, it can query an SQL table and return them in that JSON format. You can use JSON.Parse to convert a class to this type of object and voila! You could have a dynamic pyramid. 

If you have more questions or comments, you can contact us at any time. Bye!