Aggregating multiple data items into a single tooltip of the data items with same X/Y

Type tutorial

This demo shows how we can use an adapter on a series tooltip to automatically aggregate information from multiple data items width same x/y coordinates on a bubble chart. Code First, we’ll make all bubbles visible, by setting their fillOpacity to something less than 1, so they’re semi-transparent and are visible, even when they are […]

Syncing axis zooms across multiple charts

Type tutorial

This demo shows how we can sync zoom of an X-axes across multiple charts. Code The function that performs syncing: Using events to monitor changes to start and end settings on each axis: Demo

Solving overlapping bullets

Type tutorial

This short tutorial shows a couple of ways to solve the situations where multiple series can have label bullets shown, and thus may overlap with each other. Repositioning with an adapter We can use an adapter, to dynamically check for overlap with other bullets, and change bullet’s centerY setting, so it is either moved down […]

Grouping legend items

Type tutorial

This short tutorial will introduce two approaches that can be used to group legend items by inserting a label between its items. Approach #1 The easiest approach is to create a legend like we would do on any chart, set its data, then insert Label elements at predefined places in legend’s children list. The downside […]

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 […]

Location of items on date axis and date-based series

Type tutorial

This combined tutorial examines at possible positioning of axis elements like grid, labels, and ticks as well as series data items in an XY chart scenario with a date axis and date-based data. Intro Location of axis elements (grid, labels, ticks) is determined by location and multiLocation settings. For a simplified explanation about those, visit […]

Aligning axis range labels

Type tutorial

Labels of an axis range are shown on the axis itself by default. This demo shows how we can put them on the opposite side of the plot area, or within it. Labels on opposite side To achieve the required result, we’ll need these steps: The code: The demo: Labels inside plot area We can […]

Additional axis tooltip to display totals

Type tutorial

This demo shows how we can add an additional date axis on top of the chart to show a tooltip with sum of values of all series. The tooltip uses an adapter to dynamically calculate its content.