Category: XY

← All tutorials

XY

• Adaptively changing tooltip orientation based on column valueDemo

  This demo shows how we can use an adapter to change the orientation of a ColumnSeries tooltip based on the column value.

  XY
• Adding axis ranges to a legendDemo

  Axis ranges are data items, so they can be added directly to a Legend data. This demo shows how we can also enhance that capability to replicate axis range appearance in legend markers with custom template setup function.

  XY
• Additional axis tooltip to display totals

  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.

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

  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.

  XY
• Aligning axis range labels

  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.

  XY
• Auto-zooming a chart with a value axis on both X and Y

  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.

  XY
• Automatically grouping date axis months into years using axis rangesDemo

  This demo shows how we can automatically group month labels of a DateAxis into years using axis ranges.

  XY
• Changing XYCursor's behavior based on SHIFT keyDemo

  This demo shows how we can dynamically alternate the XYCursor's behavior between zooming and panning based on whether SHIFT key pressed or not.

  XY
• Column labels as categories

  This tutorial will explain how individual column labels (bullets) can be used as Category axis labels.

  XY
• Combining tooltip values from multiple series

  This demo shows how we can combine values from multiple series into a single tooltip, using adapters.

  XY
• Custom period selector on XYChartDemo

  This demo shows how we can add external buttons to create a custom pre-defined period selector on a regular XYChart.

  XY
• Customizing scrollbar gripsDemo

  This demo shows how we can completely modify the appearance of scrollbar's grips.

  XY
• Drill-down column chartDemo

  This demo shows how we can show aggregated daily data as a column series, then drill-down into hourly data for the day on a click.

  XY
• Dual date axis with both month and year labels

  This demo shows how we can add two date axes to an XY chart to show both monthly and yearly grid/labels.

  XY
• Dynamically switching data set for an XYChartDemo

  This demo shows how we can dynamically set data on a series and related category axis.

  XY
• Find the first and the last data item of the zoomed XYChart

  This demo shows how we can use axis' getSeriesItem() method to find the first and last data items when an XY chart is zoomed.

  XY
• Grouping legend items

  This short tutorial will introduce two approaches that can be used to group legend items by inserting a label between its items.

  XY
• Histogram chart

  This demo shows how we can pre-process the raw point data to display a histogram of point distribution.

  XY
• Labels on negative columnsDemo

  This demo shows how we can use adapters to change vertical alignment of a bullet, by dynamically modifying its centerY setting, based on its value.

  XY
• Left-aligning vertical axis labels

  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.

  XY
• Line series with a borderDemo

  This demo shows how to add an outline to line series using two methods: an additional (thicker) line series and a shadow.

  XY
• Location of items on date axis and date-based series

  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.

  XY
• Set the minimum upper scale of a ValueAxisDemo

  This demo shows how we can use events to automatically adjust ValueAxis maximum scale across data to set minimum value of its upper scale regardless of the actual value scales.

  XY
• Show a range of dates in a tooltip of a DateAxis when grouping data

  This demo shows how we can show a data range of a grouped data items in a DateAxis tooltip.

  XY
• Showing X-axis tooltip on top of the chartDemo

  This demo shows how we can add an additional date axis to show axis tooltip on top of the chart instead of axis itself.

  XY
• Simulating axis gaps (break)

  This demo shows how we can leverage stacked axes to simulate an axis break.

  XY
• Solving overlapping bullets

  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.

  XY
• Start/end labels on a scrollbar

  This demo shows how we can insert Label elements into a scrollbar to add start and end labels.

  XY
• Start/end labels on scrollbar grips

  This demo shows how we can add labels on top of scrollbar grips, that show dates corresponding to their current positions.

  XY
• Syncing axis zooms across multiple charts

  This demo shows how we can sync zoom of an X-axes across multiple charts.

  XY
• Syncing cursors across multiple horizontally-arranged chartsDemo

  This demo shows how we can use XYCursor's cursormoved event to position cursors on other charts simulating the same position.

  XY
• Syncing zero grid line across multiple axesDemo

  This demo shows how we can use Value axis' private setting events to sync zero-line across multiple axes.

  XY
• Toggling all series but one using legendDemo

  This demo shows how we can change legend behavior to toggle off all series, but the one that was clicked on.

  XY
• Totals on clustered column stacks

  This demo shows how we can dynamically calculate totals of columns in a multi-stack scenario in a bullet function.

  XY
• Totals on column stacks

  This tutorial will explain how we can place an automatically-calculated total on a stack of columns.

  XY
• Using axis ranges to highlight weekends

  Axis ranges is a good way to highlight specific places or stretches along an axis. This tutorial will show how we can create code to automatically create axis ranges to highlight weekends on a DateAxis.

  XY
• Using axis ranges to place labels at arbitrary values or dates

  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.

  XY
• Using bullets to apply styling to grid under seriesDemo

  This demo shows how we can add a vertical Line element to a series bullet to show different styling of a grid under a LineSeries.

  XY
• Using series color for legend labelsDemo

  This demo shows how we can make labels of a legend on an XY chart take the color of their corresponding series.

  XY