Bullet following cursor

Type tutorial

This demo shows how we can show a bullet on the hovered data item without creating bullets for each data item. This results in a better performance.

Gauge chart with custom ClockHand

Type tutorial

This demo shows how we can customize a gauge chart’s hand by pushing any element into its children set. It uses a Triangle to replace the tip and an SVG Image to replace the pin.

A custom “heat legend” using a gradient

Type tutorial

This demo adds a Container element with a gradient-filled rectangle and some labels to create a custom “heat legend” using multi-color steps. The code Related docs The demo

Using axis ranges to place labels at arbitrary values or dates

Type tutorial

Axes of various types follow their own logic when they choose where to place its grid and labels. However, sometimes you need to place those labels at precisely value X, or on date Y. That’s where axis ranges might come in handy, which is the focus of this tutorial. Prerequisites Just to refresh your memory […]

Show different tooltip on click of a bullet

Type tutorial

This demo shows how to create double-tooltips for series bullets. When hovered, bullet will display some content. When bullet is clicked it will display a permanent sticky tooltip with different information until clicked again.

Adding watermarks to charts

Type tutorial

This short tutorial will explain how we can add various types of information as a watermark on charts. In plot area of an XY chart An XY chart has a special container called a plot area, accessible via chart.plotContainer. We can create any type of element, as well as push it into plot container’s children. […]

Pre-hiding pie chart slices

Type tutorial

This short tutorial will show how to pre-hide individual slices of a pie chart, in this case ones that have zero value. Hiding a slice To a hide a slice on a pie series (or any other percent series for that matter), we need to call the hide() method of its data item. For example, […]