Category: XY
- Tracking Cursor's position via APIFeatured
This tutorial will explain how you can track Cursor's position within plot area, as well as map it to real values.
XY - "3D" line series
This tutorial will show how you can easily create a "3D stack" effect on regular LineSeries.
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.
XY - 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.
XY - Adaptive column corner rounding for positive and negative values
This tutorial will show how we can use adapters to selectively apply rounding to columns of the ColumnSeries based on their value.
XY - Adding worksheets to Excel exportDemo
This demo will show how you can add additional worksheets to the data being exported to XLSX format.
Pie, Radar, XY - Additional axis tooltip to display totalsDemo
This demo shows how we can use additional axis and adapters to display total value in additional tooltip on top of the chart.
XY - 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.
XY - Alternated axis fills
This short tutorial will show how you can make your XY chart more readable by introducing a fill between each second set of grid lines.
Radar, XY - Animated bulletsDemo
In this demo you'll see how we can use chart's built-in animation capabilities to add animation effects to bullets.
XY - Auto-adjusting chart height based on a number of data items
This tutorial will explain how you can easily make your chart grow or contract based on an actual number of data.
XY - 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.
XY - 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.
XY - 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.
XY - Chart Legend in an External Container
This tutorial will show you how you can easily move your chart legend outside main container into a totally separate one.
Pie, Radar, XY - Chart with multiple CategoryAxisDemo
This simple demo shows an XYChart where each series uses own CategoryAxis with completely different categories.
XY - Clickable chart thumbnailsDemo
This demo shows how we can use a custom function to defer chart instantiation and replace them with a thumbnail, which once clicked would be automatically replaced with a real chart.
All charts, XY - Clickable links in tooltips
Tooltips are used in a number of places to provide contextual information on a hovered/tapped object, like a Slice of a Pie Chart, or a country on a map. By default, tooltips are completely static with no way to interact with them. This tutorial will explain how you can make them interactive, adding clickable links to them.
All charts, Maps, Pie, XY - 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".
XY - Column labels as categories
This tutorial will explain how individual column labels (bullets) can be used as Category axis labels.
XY - Column values on top of the chartDemo
This demo shows how we can use bullets and adapters to put actual values of series columns on top of the chart.
XY - Combining different axis types
amCharts allows any number of any type combined in the same XY Chart.
XY - Combining local data from multiple series for exportDemo
In amCharts 4 each series can have its own data (set via own data property). Such data will not be exported using exporting functionality. This demo shows how we can use export's data adapter to combine local data from multiple series in export.
All charts, XY - 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.
XY - Consolidating values from multiple axes into a single tooltipDemo
If you have multiple axes and a chart cursor, each axis will get a tooltip when you hover plot area. This demo shows you you can use adapters to consolidate values from multiple axis' tooltips into one.
XY - Context-sensitive tooltip that follows mouse cursorDemo
This demo shows how we can use cursorpositionchanged event to reposition the related tooltip to the exact cursor's position.
XY - Controlling fill direction of a Line series
Normally, a Line series with fill enabled, will fill any space between itself and a horizontal "zero line". This tutorial will explore, how we can tame it to our specific needs.
XY - Creating a Bullet Chart
This short tutorial will show how to easily create a bullet chart.
XY - Creating custom filters
amCharts 4 comes with a few basic rudimentary filters like "drop shadow", "desaturate", and a few others. However, you can do much much more with SVG filters. This tutorial will explain how you can create your own custom amCharts 4-compatible filter classes.
All charts, Pie, XY - Creating sparklines and microcharts
This tutorial will show how you can create the min charts, or simply sparklines.
XY - Creating Timeline Charts
This tutorial will explain how you can use regular Line Series to create functional timelines, complete with bullets and annotations.
XY - Creating trend lines
Sometimes, on charts, the general appearance of the series does not make data tendencies very prominent. In those situations, you might want to add trend lines that explain the general dynamics. This tutorial explains, how you can use generic Line series as trend lines.
XY - Curved Column Series
This quick tutorial will serve as an introduction to the special type of series - CurvedColumnSeries.
XY - Custom external legendDemo
This demo shows how we can use some custom code executed on chart load to build completely custom but interactive HTML-based legend for our chart.
Pie, XY - Custom multiple-element bulletsDemo
This demo shows how we can use virtually any element (in this case Triangle and Line) as a bullet.
XY - Custom order of legend itemsDemo
This demo shows how we can use events to apply custom order to legend items.
XY - Custom static multi-value tooltip
Its easy to consolidate a lot of data into a single tooltip that is displayed over Series using Cursor. We've covered it in this tutorial. But what if we don't want a huge square following our cursor, and would rather display that info in a fixed place in the corner? Read on, as we show you how.
XY - Custom ValueAxis grid using ranges
ValueAxis is a clever kid. It will try to space out its grid/labels in a way that they come in non-crowded "pretty" increments, e.g. in 10 incremental steps. But what if we want to show custom step increments, like every 25? This tutorial will explain how to do that.
XY - Custom zoom in/out buttonsDemo
This demo shows how we can use chart's API to zoom it using external controls.
XY - Custom-ordered legend itemsDemo
This demo shows how we can use events to dynamically re-arrange Legend items per our completely custom criteria.
XY - Customizing chart scrollbar
Chart scrollbars come pre-configured with certain looks, in part influenced by used themes. This tutorial show how we can customize the looks of scrollbars.
TimeLine, XY - Different column fill colors for positive and negative values
This tutorial will explain how you can use adapters to fill columns to different colors, based on their value.
XY - Disabling scrollbar grips
This short tutorial will show how you can disable grip buttons on chart Scrollbar.
XY - Disabling toggling of items in Legend
Normally a Legend will allow toggling of its items. This will also toggle related items, like chart's Series. This tutorial will show how to disable this default functionality.
Pie, Radar, XY - 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.
XY - Display custom description in legend item tooltipDemo
This demo shows how we can add additional data to chart's Series which then would be used to populate roll-over tooltip on its legend item.
XY - Do not show tooltip for zero-value columnsDemo
This demo shows how we can use adapters to selectively disable cursor tooltips on columns with zero-value.
XY - Draggable series axis rangesDemo
This demo shows how we can create a "series axis range" and make it draggable, dynamically adjusting threshold lines and respective series fills.
XY - Dynamically adding and removing Series
This tutorial will show how you can dynamically add and remove series to the chart.
Radar, XY - Exporting data for visible series only
Normally, using amCharts 4 data exporting functionality, the chart dumps all available source data. This short tutorial will show code which assures that only currently visible series data is exported.
All charts, XY - Fixed Scale of Value Axis
Value axes in amCharts 4 will automatically adjust their scales to fit currently shown Series' values as best as possible. This means that scale may, and probably will, change when you zoom/pan the chart, or toggle some series. This tutorial will show how you can easily "lock" the scale in place.
XY - Fixed ValueAxis scaleDemo
This demo shows how we can use ValueAxis event "ready" to fix its scale (min and max values) on load so it does not change when chart is zoomed or scrolled.
XY - Force the first and last labels on axisDemo
These two demos show how you can use events, axis ranges, and some setting combination to automatically force showing first and last labels on ValueAxisand DateAxis, even if they fall on non-equal increments, and maintain them across zooms.
XY - Formatting date/time and numbers using "Intl" object
The Intl object is the namespace for the ECMAScript Internationalization API, which provides language sensitive string comparison, number formatting, and date and time formatting. This tutorial will show how you can use Intl options and locales for date/time and number formatting in place of string-based amCharts format definitions.
All charts, XY - Freeze horizontal axisDemo
This demo shows how horizontal axis can be placed into a different container so it remains static and visible when oversized chart is getting scrolled.
XY - Gantt chart with columns that span multiple categoriesDemo
This demo shows how we can use multiple series to simulate multi-category bars on a Gantt chart.
XY - Gaussian curve with XYChartDemo
This demo shows how we can calculate a gaussian curve data to draw using LineSeries out of source data.
XY - Generating static charts
Some dashboards require charts in them to be fully interactive. Some don't. Sometimes we wish to churn out charts to the screen as as quick as possible, and with as little memory footprint as possible. This tutorial will walk through the process of generating static SVG for charts using a single chart template.
All charts, XY - 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.
XY - Grouping axis labels using ranges
This tutorial will show how you can use axis ranges to organize its labels into a groups.
TimeLine, XY - Handling axis zoom events via API
Any axis in amCharts 4 can be zoomed. And sometimes we need to know when that happens, as well as the range of the new zoom. This tutorial will walk through all the necessary information to make that happen.
XY - Handling repeating categories on Category Axis
Sometimes you will end up with an XY chart that has non-unique categories in its data. This tutorial will explain how to deal with such situation.
XY - Hide or relocate label bullets for small columnsDemo
This demo shows how label bullets can automatically be hidden or relocated for small columns.
XY - Hiding non-integer labels on Value Axis
The granularity of Value axis labels depends on available space and some settings. Sometimes, when there's enough space, and the range of values is not great, the axis will throw in intermediate non-integer values as labels. This tutorial will show how to hide those non-integer labels.
XY - Highlighting column on axis label clickDemo
This demo shows how we can add hit events to CategoryAxis labels, so that we can highlight respective column by applying active state to it.
XY - Highlighting column series on legend click
During the course of this tutorial we'll modify the functionality of the legend from toggling series on and off, to rather highlighting it.
XY - 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).
XY - Individual legend item for each column
Normally on an XY Chart, Legend creates a single item for each Series. This brief tutorial will show how you can create custom legend which will show an item for each individual column in a single Column series.
XY - Individual thresholds for columns
This tutorial will show how you can use additional series to apply individual thresholds to columns in a ColumnSeries.
XY - Legend markers as checkboxesDemo
By default legend displays its markers as squares or mini versions of series. This demo shows how we can replace them with checkboxes.
Funnel, Pie, Radar, Sunburst, TimeLine, XY - Make AM/PM prompts lowercase or change them
amCharts' number formatter supports various version of the AM/PM indicators (AM/PM; A.M./P.M.; A/P) in date/time formats, however they are all in upper case. This short tutorial will show how you can make them lowercase, or change them altogether.
XY - Managing width and spacing of Column Series
By default ColumnSeries will size its columns so they are both as wide as possible, while maintaining some spacing between individual columns in clusters and between categories/cells. This tutorial will explain how we can manipulate width and spacing of the columns.
XY - Manipulating chart data
Each chart type in amCharts family has a specific requirement for structure its data should come in. Mostly it comes in a form of an array of objects. However sometimes you don't have control over format of source data. This tutorial will explore how we can pre-process data to reshape it into an amCharts-suitable form.
All charts, Maps, XY - Modifying big number prefixes
amCharts' number formatter has a way of formatting numbers in a variety of ways, including converting to prefix/suffix-based shorter equivalents. This tutorial will explain how you can tweak it according to your needs.
All charts, XY - 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.
XY - Multi-series shared tooltip with colored bulletsDemo
This demo shows how we can use an adapter for series' tooltipText property, in-line text formatting, and cursor's maxTooltipDistance to build a single universal tooltip that displays values from all series, complete with colored bullets.
XY - Multiple cursor tooltips on scatter chart
Normally, XYCursor, if added to a chart will try to show a tooltip for each series for the hovered date or category. This does not work for charts that have both X and Y axes as ValueAxis. This tutorial will show how we can fix that.
XY - Non-standard legend alignment
You can use position to place chart Legend on top, bottom, left, or right. In all those cases, Legend will center across the edge it is placed on. This tutorial will show some other alignment options.
Funnel, Pie, Radar, XY - Ordering zIndex of series lines and bullets
This tutorial will show how you can control layout and ordering of LineSeries lines and their bullets.
XY - Overlaid column series
This tutorial will show how you can leverage a number of settings on Series and Axes to create offset/overlaid columns effect.
XY - Override CategoryAxis tooltip content with an adapterDemo
This basic demo shows how you can use an adapter on CategoryAxis tooltip label to modify it's content using chart data.
XY - Overriding series' tooltip fill color
Normally, a Tooltip that is displayed when you hover or touch a series' item - slice, column, etc. - is colored the same way as the related object. This quick tutorial will show you how to override that color.
Maps, Pie, Radar, Treemap, XY - Pagination of date-based dataDemo
This demo shows how we can chunk up a multi-month data into "pages", as well as create pagination controls to iterate between them.
XY - Plotting series from calculated values
In XYChart we are used to plot series from the values that appear in data. This tutorial will show how we can plot from other auto-calculated values such as percent or change.
TimeLine, XY - Plugin: Bullets
"Bullets" is a collection of configurable shapes (stars, pins, flags, etc.) that you can use as chart bullets, map markers, and anywhere else.
Maps, Plugins, Radar, XY - Plugin: Overlap Buster (experimental)
This tutorial will show how you can use OverlapBuster plugin (available since version 4.6.2) to make overlapping items such as bullets, map markers, or just about any other element "explode" to sides when hovered, for easy access to them
Maps, Plugins, Radar, TimeLine, XY - Plugin: Range Selector
This tutorial will show how you can use Range Selector plugin (available since version 4.9.25) to create HTML-based controls for alternative zooming methods of Axes.
Plugins, XY - Plugin: Regression trend lines
This tutorial will explain how you can use Regression plugin (available since version 4.2.2) to display automatically-calculated regression trend lines.
Plugins, XY - Positioning XY Cursor via API
Sometimes you might need to programatically position your chart cursor. This tutorial will show how.
Radar, XY - Pre-zooming an axis
This tutorial will explain how you can set up your charts to initialize pre-zoomed.
Radar, XY - Re-arranging elements of the chart legendDemo
This demo shows how we can use legend item label's parentset event to move it before the marker.
Pie, XY - Risk Heatmap with custom shaped columnsDemo
This demo shows how we can apply custom shape (using SVG path) to XYChart columns.
XY - Round tooltips
Normally, tooltips in charts take square shape to match the content within. This quick tutorial will show how to configure Tooltip object to resemble a round fixed-radius shape.
All charts, XY - 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.
XY - Selectively offsetting axis labels
Normally, a chart will try to hide axis labels so they do not overlap. However, you might need them all displayed. One option is to rotate labels. Other option is discussed in this tutorial.
XY - Selectively placing legend items in different containersDemo
This demo shows how we can selectively place chart legend's items into separate containers.
XY - Setting minimal width of Scrollbar thumb
This tutorial will explain how you can set minimal width/height of the chart Scrollbar's "thumb" - draggable middle section.
XY - 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.
XY - Show column tooltip on category hoverDemo
This demo shows how we have use "over" and "out" events on axis labels as well as chart cursor's triggerMove() method to trigger tooltips on columns of the hovered category label.
XY - Show last value at the end of LineSeriesDemo
This demo shows how we can make LineSeries show its last value using two approaches: as a label next to bullet, and as an axis range with a label.
XY - Show series bullets on category/date hoverDemo
This demo shows how we can use bullet "states" to display them only when their respective category or date is hovered with a chart cursor.
XY - Show series bullets/labels on legend hoverDemo
This demo shows how we can add events to Legend items that would toggle on respective series' bullets and bullet labels on hover.
XY - 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.
XY - Simulating individual order of columns within categoriesDemo
This demo will show how you can simulate an order of columns from different ColumnSeries within each category.
XY - Stacked Axes
This tutorial will introduce you to a powerful concept of "axis stacking".
XY - Stacked axes with CategoryAxis between themDemo
This demo shows how we can place a CategoryAxis between two stacked ValueAxis.
XY - Stacked column series with rounded corners
This quick tutorial shows how you can inventively use adapters to apply custom formatting options to stacks of columns.
XY - Styling or removing tooltip shadow
Most of the elements on charts can display a tooltip when hovered. By default, a tooltip will cast a slight shadow behind it. This tutorial will explain on how to style it, or get rid of it altogether.
All charts, XY - SVG bullets with custom path and colorsDemo
This demo shows how we can use custom bullets with path set and "property fields" to bind each individual color to data.
XY - Syncing chart data with table/grid
This tutorial will look at ways on how we can grab chart data and display it in an HTML table. We will then build on it to enhance for display in a Grid component. Finally, we'll make chart data sync up with editable grid.
XY - Syncing width of the vertical axes across multiple chartsDemo
This demo shows how width of the vertical axes can be synchronized across multiple separate charts.
XY - 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.
XY - Taming the Step Line Series
Normal Line series on an XY chart usually connect data items with a straight line. Step line series are similar, except they connect the data items with a step. This tutorial will show how you can tweak the steps to suit your needs better.
XY - 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.
XY - Togglable event markers using axis rangesDemo
This demo shows how you can use chart's API to toggle axis ranges on and off .
XY - Toggle series on multiple charts using same LegendDemo
This demos shows how we can sync up toggling of matching series across multiple charts using single legend.
TimeLine, XY - Toggling multiple series with a single legend item
This tutorial will show how you can toggle several Series at once, with a single Legend item.
XY - Toggling series via API
Need to toggle series on and off via code? This short tutorial will show how.
Radar, XY - Toggling stack typeDemo
This demo shows how we can toggle stack types from absolute to 100% dynamically via external controls using chart API.
XY - Tooltips with rich HTML content
Tooltips in amCharts 4 can display formatted information thanks to the style formatting and data binding syntax provided by built-in text formatter. However, sometimes we might go even further: use endless formatting possibilities provided by HTML and CSS. This tutorial will explain how.
All charts, XY - Totals on column stacks
Building column stacks is easy: just set stackable = true on each column series. This tutorial will show how we can display automatic total value of the whole stack on top of it.
XY - Trigger a replay of the chart initial animationsDemo
Most of the elements on a chart - e.g. series or chart itself - have appear() method. Calling it will re-play whatever animation was played when the chart was first loaded, for example series morphing into place. This demo showcases this functionality.
All charts, XY - Truncating legend labels
Sometimes chart legend can get out of control size-wise, especially if you have long labels. This tutorial will show how you can get it back in check by capping the length of its labels.
Pie, Radar, Sunburst, XY - Use amCharts 4 to visualize Google Analytics dataIntegrations, XY
- Using "fill rules" on a Date Axis
This tutorial will show how to highlight weekends on a Date Axis. It will explain how you can use custom function to force your own custom logic in determining what ranges of dates should be highlighted and how.
XY - Using "patterns" theme
amCharts 4 comes with a "patterns" theme (since version 4.7.5). It's a bit different from other themes as it modifies the output of some elements quite radically. This tutorial takes a closer look at what this theme does, and how it can be modified for various purposes.
All charts, Pie, XY - Using "sticky" tooltips
Any element on a chart can have tooltipText set to display in form of a tooltip when hovered or touched. This tutorial will show how you can turn those tooltips into "sticky", so they are always shown, without requiring to hover/touch the element.
All charts, Treemap, XY - Using adapters for value-sensitive bullet adjustments
If your chart uses bullets - either as shapes or text labels - you might find yourself in situations where you might need to adjust certain aspect of bullet based on specific value or value change. It might be alignment of a label, or a color of dot.
XY - 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.
XY - Using adapters to modify legend item appearance
Normally the Legend will either display identical markers for all items, or make them look like their related series. This tutorial shows how you can use adapters to further customize each individual item in Legend.
All charts, 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.
TimeLine, 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 Circle Bullets
As you may already know from "Bullets" tutorial, a bullet in amCharts 4 can be anything. This tutorial explores how we can can quickly add and configure certain bullet type - Circle bullet.
XY - Using custom functions for data item grouping
In amCharts 4, DateAxis allows dynamic data item grouping. This tutorial will show how you can take this even further and use custom function to apply custom logic when calculating aggregate values for the groups.
XY - 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.
XY - 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.
XY - Using percent values in series
In our everyday charting we mainly use absolute values. However, sometimes we might need to show how specific value relates to other elements. In this case relative percent value is much more representative than absolute one. This tutorial will explain ways we can use such relative values.
XY - Using states on LineSeries
This tutorial will show how we can use states to manipulate appearance of the LineSeries in a variety of situations.
TimeLine, XY - Wrapping, truncating, and auto-rotating axis labels
This tutorial will explain how you can deal with very long axis labels, by wrapping and/or truncating them.
Radar, XY - Zoom to month by clicking on a DateAxis labelDemo
This demo shows how we can implement hit event on DateAxis labels to automatically zoom to the clicked period.
XY - Zooming axis via API / external scrollbar
The XYChart can be zoomed using built-in scrollbar controls or with a chart cursor. This tutorial will show how you can zoom the chart programatically using its API.
XY