tutorial It is possible to load the amCharts library only when needed. This tutorial will explain how. The import() expression is the official way to lazy load any ES6 module, including amCharts. However, import() can only import a single module, so you have to combine it with Promise.all to load multiple modules. Here is how to […]
tutorial 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. The basics All text labels in amCharts 4 are represented by an object of type Label. To make a label follow […]
tutorial 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. Accessing tooltip Before we can start, let’s see how we can access the tooltip, that is Tooltip […]
tutorial 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. The problem Let’s use a chart with a nice gradient as a background. Now, when we try to print it, the background […]
tutorial 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. What is a Filter? SVG filters An SVG filter (represented by <filter> tag) […]
tutorial This tutorial will show how you can create your own custom loading indicator over chart. The task Supposedly we have a complex chart, with loads of data, which needs to be loaded from server, parsed, digested and visualized. We don’t want the empty space of a chart just sit there, so we’d like to display […]
tutorial 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 […]
tutorial 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. Prerequisites This tutorial shows how you can […]
tutorial 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. What is a filter? A filter is a method to quickly apply some visual enhancement or modification to an element. For example, you want your Line series to […]
tutorial 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. Base chart Let’s start with a pretty basic chart with multiple line […]