Automating report generation using Puppeteer

Type tutorial

DEPRECATION NOTICE Information provided in this article is deprecated and no longer valid, because of the deal-breaking issues with the Puppeteer. Please refer to “Automating report generation using Selenium Webdriver” for a working solution. If you need to automate the generation of chart images or PDF, utilities with a self contained browser are your best […]

Wrapping, truncating, and auto-rotating axis labels

Type tutorial

This tutorial will explain how you can deal with very long axis labels, by wrapping and/or truncating them. Prerequisites If you haven’t done that already, we suggest you take a look at the “Positioning Axis Elements” article, which explains the principles about configuring Axis elements, including the concept of “axis renderer”. Moving forward we will […]

Manipulating mouse cursor style

Type tutorial

This tutorial will explain how you can set mouse cursor style for various actions on an element, like hover or press. Cursor style properties Each element in amCharts 4 has two properties which you can use to set how mouse cursor will change when interacting with the element: Property Type Comment cursorDownStyle MouseCursorStyle Applied when […]

Adding chart titles and bottom text

Type tutorial

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. Adding chart titles For chart titles, every chart instance has a titles property which holds a list template of Label objects. To create new title object, we just […]

Resetting Map Position/Zoom

Type tutorial

All Map Charts, unless disabled, can be panned and zoomed. This tutorial will explain how to reset map’s position and zoom to its original state via custom button or API. Resetting via API Easy way Map chart provides a dedicated goHome(duration) method. I wish it had a youredrunk parameter, but it only accepts a duration in milliseconds […]

Disabling zoom and pan on a Map Chart

Type tutorial

Normally, you can pan and zoom the Map Chart wit mouse and touch. This tutorial will explain how you can disable one or both of these actions. Disabling pan Panning (drag) events on a Map Chart are attached to a special container that holds all the series of the map. It’s accessible via chart’s seriesContainer property. […]

Chart Legend in an External Container

Type tutorial

This tutorial will show you how you can easily move your chart legend outside main container into a totally separate one. NOTE We’re going to be using Pie chart as an example in this tutorial. However, this applies to any other chart type that uses Legend. Base chart Let’s start with a basic Pie chart […]

Showing placeholder for empty Pie chart

Type tutorial

In dynamic dashboards, sometimes there are situations where you have a no-data chart. In this case it would be nice to show some kind of placeholder, instead of an empty space. This tutorial explains how to create such placeholder for a Pie chart. Prerequisites This tutorial makes use of series’ “property fields”, so we suggest […]

Preventing Vue.js from loading external libraries

Type tutorial

amCharts 4 comes with some external libraries that are not needed for core operation, but might be dynamically loaded for some niche operation, like exporting a chart to PDF. Normally Vue.js would bundle those files into your app, inflating its size. As a quick workaround you can tap into the Vue CLI generated webpack config […]

Tracking Cursor’s position via API

Type tutorial

This tutorial will explain how you can track Cursor’s position within plot area, as well as map it to real values. Prerequisites If you haven’t done so already, we strongly suggest you take a look at the “Chart Cursor” article, which walks through every step and aspect of using this chart helper. We will also […]