Tag: 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

• 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

• 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

• 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

• 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 different tooltip on click of a bullet

  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.

• 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

• 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 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