Dual date axis with both month and year labels
Type
tutorial This demo shows how we can add two date axes to an XY chart to show both monthly and yearly grid/labels.
Left-aligning vertical axis labels
Type
tutorial Normally, the labels of the vertical left-side axis are right aligned. This demo will show how we can easily make them left-aligned instead. Code To make labels left-aligned, it’s enough to just override their horizontal center to their left: Demo
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
Simulating axis gaps
Type
tutorial This demo shows how we can leverage stacked axes to simulate axis breaks.
Position X-axis on zero-value
Type
tutorial Normally, the X-axis will be shown at the bottom of the plot container, regardless of the Y-axis scale. This tutorial shows how we can make the X-axis dynamically position itself so that it sticks to the position of the zero value. Code The idea is to watch for various events that could affect position of […]
Aligning a legend with plot container
Type
tutorial This demo shows how we can use axis’ events to monitor its width, and automatically adjust position of the legend, so it is aligned perfectly with the plot area. Code Demo
Auto-zooming a chart with a value axis on both X and Y
Type
tutorial If the chart has a ValueAxis as both of its axes, it would not auto-zoom vertically when panned/zoomed. It’s by design. This demo shows how to implement this functionality.
Axis zoom end event
Type
tutorial This demo shows how we can use value change events of the start and end axis settings, as well as use debouncing techniques on the handlers to detect when the zoom animation has finished. Code Demo
Axis bullets on top of the chart
Type
tutorial This demo shows how axis bullets can be moved to chart’s plotContainer to appear them on top of the chart.
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 […]