Skip to main content
Version: 8.3.2

Pyramid Chart

Apart from high performance data visualization features, LightningChart JS also includes commonly needed standard features, such as Pyramid charts:

Pyramid chartPyramid chart

// Creation of Pyramid chart
const pyramidChart = lc.Pyramid()

Adding data​

const data = [
    {
        name: '2015 - 2016',
        value: 3,
    },
    {
        name: '2016 - 2017',
        value: 5,
    },
    {
        name: '2017 - 2018',
        value: 10,
    },
    {
        name: '2018 - 2019',
        value: 17,
    },
]
pyramidChart.addSlices(data)

Slice mode​

By default, Pyramid chart displays values by giving each slice a height relative to its value. This can be reversed, to give slice a width relative to its value. This looks a bit different:

Pyramid chart variable widthPyramid chart variable width

Additional Pyramid chart configurations​

Some details about Pyramid chart visual look are also available, see below methods for example:

  • PyramidChart.setSliceGap
  • PyramidChart.setNeckWidth
  • PyramidChart.setLabelSide

Label formatting​

pyramidChart.setLabelFormatter(SliceLabelFormatters.Name)
pyramidChart.setLabelFormatter(SliceLabelFormatters.NamePlusRelativeValue)
pyramidChart.setLabelFormatter(SliceLabelFormatters.NamePlusValue)
pyramidChart.setLabelFormatter((slice, relativeValue) => `${slice.getName()}: ${slice.getValue().toFixed(1)}`)

Pyramid chart types​

There are two different Pyramid chart types available. The available APIs differ slightly between them.

Labels on sides (default)​

const pyramidChart = lc.Pyramid({ type: PyramidChartTypes.LabelsOnSides })

Labels inside slices​

const pyramidChart = lc.Pyramid({ type: PyramidChartTypes.LabelsInsideSlices })

Pyramid chartPyramid chart

Slice sorting​

pyramidChart.setSliceSorter(SliceSorters.None)
pyramidChart.setSliceSorter(SliceSorters.SortByName)
pyramidChart.setSliceSorter(SliceSorters.SortByValueAscending)
pyramidChart.setSliceSorter(SliceSorters.SortByValueDescending)

Label colors and font​

pyramidChart
    .setLabelFillStyle(new SolidFill({ color: ColorRGBA(0, 0, 0) }))
    .setLabelFont((font) => font.setWeight('bold'))

For more details about style API, please see Styles, colors and fonts.

Color slices by value​

pyramidChart.setLUT(
    new LUT({
        interpolate: true,
        steps: [
            { value: 0, color: ColorRGBA(255, 0, 0) },
            { value: 100, color: ColorRGBA(0, 255, 0) },
        ],
    }),
)

Slice colors​

Slice colors are set with 1 method that applies a fill style to every slice. Slices can be assigned different fill styles by returning different value based on slice index.

const sliceFillStyles = [
    new SolidFill({ color: ColorRGBA(255, 0, 0) }),
    new SolidFill({ color: ColorRGBA(0, 255, 0) }),
    new SolidFill({ color: ColorRGBA(0, 0, 255) }),
]
pyramidChart.setSliceFillStyle((index) => sliceFillStyles[index % sliceFillStyles.length])

Slice user interactions​

User interactions on each slice can be tracked individually:

const slice = pyramidChart.addSlice("name", 10)
slice.addEventListener('click', (event) => {
    console.log('user clicked slice')
})

Chart title​

pyramidChart
    .setTitle('Voltage')
    .setTitleFont(font => font.setSize(10).setFamily('Segoe UI'))
    .setTitleFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))

For more details about style API, please see Styles, colors and fonts.

Background style​

PyramidChart has 2 different levels of backgrounds:

  • Chart background (entire chart area)
  • Engine background (additional background shared by entire engine)
    • Understanding difference between chart/engine background is mainly useful if you are using the legacy Dashboard feature - in this case, engine background is shared across the whole dashboard.
pyramidChart
    .setBackgroundFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
pyramidChart.engine.setBackgroundFillStyle(new SolidFill({ color: ColorRGBA(0, 0, 255) }))

For more details about style API, please see Styles, colors and fonts.

Space around chart​

pyramidChart.setPadding({ left: 10, right: 10, top: 10, bottom: 10 })

Disable animations​

const pyramidChart = lc.PyramidChart({ animationsEnabled: false })

Cursors​

Please see common Cursors section.

Legend​

Please see common Legend section.

Positioning charts​

Please see common Positioning charts section.

Color themes​

Please see common Color themes section.