If you’re not familiar with LightningChart, you might be wondering what’s so special about this chart?

At LightningChart, we do everything as quickly as possible — the Point Series component we just used can prepare an interactive scatter chart with over 10 million data points in seconds!

What’s our secret? Hardware-accelerated graphics and a long commitment to supporting demanding data visualization applications.

How do I attach a custom data point property to a scatter diagram?

When providing data for Lightning Chart JS, we use the JavaScript object format, which allows for any number of key-to-value combinations. In the previous code snippet, we saw creating JavaScript objects with X and Y attributes:

const point = { x: 0, y: 0 }
Copy the code

Adding custom data point attributes is as simple as one might guess: Add them after X and Y:

const point = { x: 0, y: 0, custom: 'abcdefg' }  
Copy the code

These custom properties can then be used with data cursors, data points evaluated from mouse positions, and so on. In this example, we use them with UI text elements.

How do I add interactive UI text elements

Next, we will add labels next to each scatter coordinate. These display custom data point properties and are activated when the user moves the mouse over them.

This code adds a label, places it next to the data point, and sets it to display the text in the custom property of the data.

const label = chart.addUIElement(
   UIElementBuilders.TextBox,
   { x: xAxis, y: yAxis }
)
label
   .setPosition(point)
   .setMargin({ bottom: 10 })
   .setText(point.custom)
Copy the code

We can also do a little trick here that will help us a lot in the future. Let’s add another custom attribute to the data point – a UI text element.

point.label = label
Copy the code

The final step is to follow the user’s mouse movement and activate the nearest data point by coloring it pure white. This code monster looks aggressive, but at least the idea is simple:

When the user moves the mouse over the data point, the color label turns white

chart.onSeriesBackgroundMouseMove((_, event) => {
   const nearestDataPoint = pointSeries.solveNearestFromScreen(chart.engine.clientLocation2Engine(event.clientX, event.clientY))
   if (nearestDataPoint) {
      label.setFillStyle(new SolidFill({ color: ColorRGBA(255, 255, 255) }))
   }
})
Copy the code

The final result

This is the end result as an embedded chart. Click the icon in the upper right corner of the embedded chart to find the full source code at GitHub.