How do I have differently styled labels on the same chart in LightningChart JS

Question

I have a pie chart and want to have differently colored labels on each slice so that the text is more readable. Here is a slightly modified code, which creates a simple pie chart with labels inside, taken from interactive demos here:

const lcjs = require('@arction/lcjs')

const {
    lightningChart,
    PieChartTypes,
    UIElementBuilders,
    LegendBoxBuilders,
    UIDraggingModes,
    SliceLabelFormatters,
    UIOrigins,
    emptyFill,
    emptyLine,
    Themes
} = lcjs

const donut = lightningChart().Pie({
    theme: Themes.darkGold, 
    type: PieChartTypes.LabelsInsideSlices
})
    .setTitle('Inter Hotels - hotel visitors in June 2016')
    .setPadding({ top: 40 })
    .setAnimationsEnabled(true)
    .setMultipleSliceExplosion(false)

const data = {
    country: ['US', 'Canada', 'Greece', 'UK', 'Finland', 'Denmark'],
    values: [15000, 20030, 8237, 16790, 9842, 4300]
}
const processedData = []

for (let i = 0; i < data.values.length; i++) {
    processedData.push({ name: `${data.country[i]}`, value: data.values[i] })
}

processedData.map((item) => donut.addSlice(item.name, item.value))
donut.setLabelFormatter(SliceLabelFormatters.NamePlusValue)
donut.addLegendBox(LegendBoxBuilders.HorizontalLegendBox)
    .setAutoDispose({
        type: 'max-width',
        maxWidth: 0.80,
    })
    .add(donut)

Is there any way to modify fill color of each slice label individually, similarly to how setLabelFormatter works?

If no, what are my options for doing so? I thought about creating custom UI text box element with addUIElement(UIElementBuilders.TextBox), though I don't know how I would position them on the slice, because I could not find any means of acquiring the slice position or any kinds of measurements (moreover, i cannot attach it to the PieSlice directly).

score 0 · Accepted Answer · answered Jan 04 '23 at 14:35

Well, the answer is (probably) no. LightningChart JS API does not provide any methods for modifying chart label styles individually for this particular type of chart. I resolved it by hiding chart labels and adding custom text boxes on top of the chart. This also requires implementing custom positioning methods on resize and slice value change.

How do I have differently styled labels on the same chart in LightningChart JS

1 Answers1