Cursor with “corner” crosshair lines
Type
tutorial This demo shows how we can use adapters to make lines of the XY cursor go only to the target data item. Code Demo
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
Automating report generation using Selenium Webdriver
Type
tutorial If you need to automate the generation of chart images or PDF, Selenium Webdriver might be the best option. It can handle different browsers even though this example only shows it using Firefox. Setting up Exporting a chart from an external link You can export charts that exist on a current page. Add a file […]
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
Histogram chart
Type
tutorial This demo shows how we can pre-process the raw point data to display a histogram of point distribution. Code We are going to use custom code to turn the following raw point data into a categorized data that can be used in an XY chart. The following code will: Here’s how data looks like after […]
Simulating axis gaps (break)
Type
tutorial This demo shows how we can leverage stacked axes to simulate an axis break.
Constraining tooltip to plot container bounds
Type
tutorial This demo shows how we can use an adapter to limit series’ tooltip to the actual bounds of the chart’s plot container.
Complex bullets with hover effect
Type
tutorial This demo shows how we can create bullets out of several elements, as well as attach hover effects that trigger with both direct hovering by a pointer and with an XYCursor.
Treemap with node images and labels
Type
tutorial This demo implements a Treemap chart with images and labels in its nodes.
Force-directed tree with adaptively positioned labels
Type
tutorial This demo uses an adapter do dynamically apply positioning and style of the Force-directed tree labels based on whether they fit into parent node or not.