Tag: xy
- "Sticky" chart cursor
Normal XYCursor is hidden automatically when plot area is no longer hovered. This tutorial shows how you can easily make it "sticky", that is make it stay in its last known location.
- A simple Histogram chartDemo
This demo shows how we can take an array of plain values, and build a Histogram chart - a distribution of values as a column series.
- Allow just single series to be displayed at a timeDemo
This demo shows how we can use Legend's hit event to toggle other series off when one series is toggled on, making sure that there's only one series displayed at any given time.
- Animated bulletsDemo
In this demo you'll see how we can use chart's built-in animation capabilities to add animation effects to bullets.
- Auto-hide value axes
Normally, all initialized Value Axes are shown, even if they do not have any visible Series attached to them. This also means that when Series is toggled off, the related Value Axis will remain. This tutorial will show how we can toggle axes off together with Series.
- Axis ranges in XYChartScrollbarDemo
Do you know that XYChartScrollbar is not some mystical new class, but rather a full fledged XYChart. This means that we can do with it anything we can do with a regular chart, including adding axis ranges. This demo does exactly that.
- Building a Waterfall chart
Waterfall chart is a special kind of chart consisting of floating columns that relate each other via their open and close values.
- Chart with multiple CategoryAxisDemo
This simple demo shows an XYChart where each series uses own CategoryAxis with completely different categories.
- Clustering groups of non-clustered columnsDemo
This demo shows how we can separate non-clustered columns into separate non-overlapping groups, using their "data item locations".
- Configuring the zoom out button
When XYChart is zoomed in, a small round button appears in the corner to indicate that only partial data is show, and to provide means to zoom back out. This tutorial will show how you can configure, or outright disable this control.
- Creating a Bullet Chart
This short tutorial will show how to easily create a bullet chart.
- Creating sparklines and microcharts
This tutorial will show how you can create the min charts, or simply sparklines.
- Creating Timeline Charts
This tutorial will explain how you can use regular Line Series to create functional timelines, complete with bullets and annotations.
- Curved Column Series
This quick tutorial will serve as an introduction to the special type of series - CurvedColumnSeries.
- Custom multiple-element bulletsDemo
This demo shows how we can use virtually any element (in this case Triangle and Line) as a bullet.
- Disabling scrollbar grips
This short tutorial will show how you can disable grip buttons on chart Scrollbar.
- Disabling XY series initial animations
By default, when "animated" theme is enabled, all XY series will show initial animation, growing from zero to their absolute values. This tutorial will show how you can disable that effect, without interfering with the rest of the animations.
- Gaussian curve with XYChartDemo
This demo shows how we can calculate a gaussian curve data to draw using LineSeries out of source data.
- Grid over Series
Chart grid belongs in the back - behind all other chart elements. However sometimes, you might want to take them the front seat. This short tutorial will show you how.
- Highlighting regions of a scatter chartDemo
This demo shows how we can add an extra series to highlight multiple regions of a scatter chart (XYChart).
- Multi-color XY heatmap
Normally, heatmaps that use "heat rules" are restricted to two colors as well as gradient in-between. In tutorial we'll see how we can use adapters to apply any number of colors to heat map based on source value.
- Ordering zIndex of series lines and bullets
This tutorial will show how you can control layout and ordering of LineSeries lines and their bullets.
- Positioning XY Cursor via API
Sometimes you might need to programatically position your chart cursor. This tutorial will show how.
- Risk Heatmap with custom shaped columnsDemo
This demo shows how we can apply custom shape (using SVG path) to XYChart columns.
- Scrollbar-only XY Chart
If you would like to use chart as a zoom control for your UI, you might want to display just chart's scrollbar with a series preview in it, without showing the actual chart. This tutorial will show how.
- Setting position of the chart scrollbars
Normally, scrollbars on an XY chart are placed on the top and right side. This tutorial will show how you can change their default position.
- Show stack total in CategoryAxisDemo
This demo shows how we can create a separate Series with label bullets to show stack total right to a CategoryAxis label.
- Stacked Axes
This tutorial will introduce you to a powerful concept of "axis stacking".
- Stacked axes with CategoryAxis between themDemo
This demo shows how we can place a CategoryAxis between two stacked ValueAxis.
- Taming Candlestick Series
Candlesticks are a good way to depict data dynamics using variety of metrics. Instead of single value - used on most series - candlesticks use four: open, high, low, and close. This tutorial will explain how to set up and configure Candlestick series.
- Titles on top of vertical (value) axis
Adding titles to axes is easy - just use axis' title property. It will add a vertical or horizontal title next to axis depending on its position. However, you might want to place axis label directly on top of the vertical axis. This tutorial will show how.
- Using adapters to apply corner radii based on valueDemo
Below are two demos that use adapters to modify radii of the ColumnSeries columns based on their value.
- Using Error Bullets
Error bullets are special kind of bullets that help illustrate error margin for the particular series value. This tutorial will explain how you can add those to amCharts 4 series.
- Using label bullets on a horizontal bar chart
This tutorial will show how you can use LabelBullet to decorate your horizontal bar chart with data labels.
- Using states on LineSeries
This tutorial will show how we can use states to manipulate appearance of the LineSeries in a variety of situations.