Skip to main content
Version: 5.2.0

Pie Chart

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

Pie chartPie chart

// Creation of Pie chart
const pieChart = lc.Pie()

Adding data​

const data = [
    {
        name: 'Planning',
        value: 40,
    },
    {
        name: 'Development',
        value: 120,
    },
    {
        name: 'Testing',
        value: 60,
    },
    {
        name: 'Review',
        value: 24,
    },
    {
        name: 'Bug Fixing',
        value: 90,
    },
]
const slices = data.map((item) => pieChart.addSlice(item.name, item.value))

Label formatting​

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

Pie chart types​

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

Labels on sides (default)​

const pieChart = lc.Pie({ type: PieChartTypes.LabelsOnSides })

Labels inside slices​

const pieChart = lc.Pie({ type: PieChartTypes.LabelsInsideSlices })

Pie chartPie chart

Slice sorting​

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

Label colors and font​

pieChart
    .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​

pieChart.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) }),
]
pieChart.setSliceFillStyle((index) => sliceFillStyles[index % sliceFillStyles.length])

Slice user interactions​

User interactions on each slice can be tracked individually:

const slice = pieChart.addSlice("name", 10)
slice.onMouseClick((_, event) => {
    console.log('user clicked slice')
})

Chart title​

pieChart
    .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​

PieChart 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.
pieChart
    .setBackgroundFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
pieChart.engine.setBackgroundFillStyle(new SolidFill({ color: ColorRGBA(0, 0, 255) }))

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

Space around chart​

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

Disable animations​

const pieChart = lc.PieChart({ 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.