Data labels from metadata for XyScatterRenderableSeries

Hello,

I need to customize the text for some points on a XyScatterRenderableSeries graph. The problem is that the dataLabelProvider available for XyScatterRenderableSeries is BaseDataLabelProvider, but it doesn’t have a metaDataSelector method and I can’t do it with it. Interestingly, using LineSeriesDataLabelProvider I was able to add text for the points I needed using metadata, but another problem arose. In this case, if there is only one point on the graph, the text will not be drawn.

Here is a small example of how text is drawn for different numbers of points. https://codepen.io/PodaRocheK/pen/jOXYGMJ?editors=0011

Can you advise me on how to display text near points more correctly in the case when I use XyScatterRenderableSeries and often this text should disappear or appear near some points. Thanks a lot!

Version

3.2.446

JavaScript MetaData DataLabelProvider

Yevhenii Krasovskyi asked 1 year ago

You must login to post comments

Answers (1)

Hi Yevhenii

The XyScatterRenderableSeries.dataLabelProvider property is defined as type BaseDataLabelProvider like this:

XyScatterRenderableSeries.dataLabelProvider
get dataLabelProvider(): BaseDataLabelProvider
set dataLabelProvider(provider: BaseDataLabelProvider): void

because we have to use inheritance internally, however this can be any type which inherits from BaseDataLabelProvider, such as:

the default instance for is XyScatterRenderableSeries is DataLabelProvider which has the metadataSelector property.

Code to access it should just work:

const scatterSeries = new XyScatterRenderableSeries(wasmContext, {
        dataSeries: dataSeries,
        stroke: "#ffffff",
        pointMarker: new EllipsePointMarker(wasmContext, {
                width: 15, height: 15, fill: "#ffffff", strokeThickness: 0
        }),
            dataLabels: {
            style: {
                             fontFamily: "Arial",
                             fontSize: 16
                        },
                    color: "#EEE"
        }
     });
     scatterSeries.dataLabelProvider.metaDataSelector = (metadata) => {
       console.log(metadata);
       return metadata?.label ?? "NULL";
     };

Have you tried it?

Best regards,
Andrew