Tag: axes

← All tutorials

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

• 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

• Column labels as categories

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

  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

• 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

• Histogram chart

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

  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

• 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

• Retaining Y-axis zoom after data updateDemo

  Normally, the XY chart will retain previous zoom level on a chart's main axis (usually X-axis) across data updates. However, the Y scale will be updated to fit the new values.

  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

• 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

• 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