Category: All charts
- Manipulating mouse cursor styleFeatured
This tutorial will explain how you can set mouse cursor style for various actions on an element, like hover or press.
All charts - Placing labels anywhere on the chartFeatured
This tutorial shows how you can place arbitrary labels anywhere on the chart.
All charts - About "Chart was not disposed" warning
Are you getting a "Chart was not disposed" warning in your browser console? You're doing something wrong. Read on for an explanation.
All charts, Integrations - Adding chart titles and bottom text
This short tutorial shows how you can add arbitrary text labels to the top or bottom of the chart, that will automatically adjust the size of the chart itself.
All charts - Adding extra info in exported PDF
amCharts 4 comes pre-loaded with extensive chart export functionality. Besides ability to export chart to various image and data formats, it can also export to PDF documents. This tutorial will show, how you can easily tap into this process to include extra information, like text, tables, and even images, into exported PDF.
All charts - Adding watermarks to charts
This tutorial will show how your can brand your charts using different kinds of watermarking techniques.
All charts - Automating report generation using Puppeteer
If you need to automate the generation of chart images or PDF, utilities with a self contained browser are your best options. There are few options out there as headless browsers.
All charts, Integrations - Automating report generation using Selenium WebdriverAll charts, Integrations
- Changing appearance of focused items
amCharts 4 comes with extensive accessibility functionality, of which part is ability to highlight focused items with a high-contrast outline. This tutorial will show how you can modify the appearance of this outline.
All charts - Chart element class names and CSS
amCharts 4 allows automatically adding element-specific class attributes to its SVG elements for easy targeting via CSS selectors. This tutorial explains how to enable and use them.
All charts - 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 - 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 - 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 themes
amCharts 4 comes with a plethora of pre-made themes you can use for your charts. You can combine them by applying several themes to a single chart. But what, if you don't find what you're happy with? This tutorial will show how you can create your own theme.
All charts - Creating Translations
amCharts 4 relies on locale files for localization of the charts. Locales are responsible for both translations of prompts and setting date/number formats. This tutorial will explain how you can make changes to existing translations, and create the new ones.
All charts - Custom Loading Indicator
This tutorial will show how you can create your own custom loading indicator over chart.
All charts - Dotted and dashed lines
Every line in amCharts - including outlines of other shapes - can be made dotted or dashed. This short tutorial will show how it works.
All charts - Export menu in external container
By default, the chart places its export menu in one of its corners. This tutorial will show how you can easily move it out of the chart and into any container on your page.
All charts - 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 - 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 - Generating multi-content PDF export
This extensive tutorial will show how you can use pdfmake library, which is bundled with amCharts, to generate full page, multi-content report PDF documents.
All charts - 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 - Lazy loading amCharts modules
It is possible to load the amCharts library only when needed. This tutorial will explain how.
All charts, Integrations - 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 - Modifying chart for export
Version 4.6.8 brought a new feature to chart exporting functionality: ability to modify chart appearance any way we want before export. For example we'd like to watermark exported charts with an attribution message. Or we want to add any additional titles or info. This tutorial will show how we can do it.
All charts - Plugin: Annotation
This tutorial will show how you can use Annotation plugin (available since 4.5.5) to, well annotate the charts using some basic UI and tools.
All charts, Plugins - Removing chart background on print
Your on-screen designs might call for a chart background. However, when printed, those will wasted a lot of ink. This tutorial will explain how to disable chart's background when using Export's Print option.
All charts - Replacing default export icon
This tutorial will show how you can easily replace the default ... in export menu's top level item with a custom image.
All charts - Reversing the order of Legend items
This short tutorial will show how you can easily reverse the Legend items.
All charts - 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 - 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 - Tackling label background
In amCharts 4, labels - be it bullets, axis values, or just about any other text - are not limited to just font size and color. This tutorial will show how you can set background color and shape for them as well.
All charts - 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 - Transferring demos from amcharts.com, CodePen or jsFiddle into WordPress
If you are using amCharts WordPress plugin, you might be wondering how to transfer ready-made demos from amcharts.com website, or ones that you find scattered around on CodePen or jsFiddle services. This tutorial will provide a short instructions on how to do so.
All charts, Integrations - 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 - 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 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 amCharts WordPress pluginAll charts, Integrations
- Using curved labels
In amCharts 4 any SVG label can follow any curve. This tutorial will explain how it works and how you can spice up the look of your charts in various situations, using curved labels.
All charts - Using filters
amCharts 4 comes with a set of ready-made visual filters that you can apply to virtually any element. This tutorial will explain how you can use them.
All charts - Using Material iconsDemo
This demo shows how you can use html property of any label in amCharts 4 to display Material icons.
All charts - Using PDF export fonts
Exporting a chart with related textual information to PDF will not work properly if you have a non-Latin language. This tutorial will show how to overcome this.
All charts - Using superscript and subscript in labels
This short tutorial will show how you can make parts of any label super- or sub-script using amCharts 4's in-line text formatting syntax.
All charts - Using Web Font Loader
If you are using web fonts, you might have noticed an unpleasant moment when content is rendered before the font loads, making it re-render. Since the fonts have different heights and widths, the font being loaded or not may also affect measuring of elements and thus their placement. In some cases, if font is not yet loaded, some elements on the chart might be misaligned. Or, their position/alignment might change later on when the chart layout updates and the fonts are already loaded.
All charts, Integrations - Windows "high contrast" mode
As an aid to vision-impaired users MS Windows operating system offers a "high contrast" mode. While most of the modern browsers have no issues with it, there are some quirks affecting chart visibility in older Internet Explorer and EDGE browsers. This tutorial shows a quick workaround.
All charts