Truncating legend labels

Type tutorial

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. The problem Long labels will bloat up legend size. This is especially prominent where chart size is not very big: Even […]

Combining different axis types

Type tutorial

amCharts allows any number of any type combined in the same XY Chart. Below demo demonstrates how you can combine utterly incompatible scales – numeric and date/time – with separate Value and Number axes.

Using “fill rules” on a Date Axis

Type tutorial

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. Base chart Let’s take a simple Date-based chart. Enabling axis fills We do have nice clean grid. […]

Different column fill colors for positive and negative values

Type tutorial

This tutorial will explain how you can use adapters to fill columns to different colors, based on their value. The task Let’s say we have a column chart that has both positive and negative values. Right now, all of the columns are filled with a single color. What we want to do, is to color […]

Styling or removing tooltip shadow

Type 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 […]

Fixed Scale of Value Axis

Type tutorial

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. Adaptive scale Here’s how […]

Setting minimal width of Scrollbar thumb

Type tutorial

This tutorial will explain how you can set minimal width/height of the chart Scrollbar’s “thumb” – draggable middle section. The problem OK, so you added a scrollbar (or a couple of) to your chart. This is great because it allows your users to zoom the chart as well as pan the selection. The thumb – […]

Creating custom filters

Type 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) […]

Using Error Bullets

Type tutorial

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. Adding error bullet REQUIRED READING If you’re not familiar how bullets are used in amCharts 4, we suggest you run by “Bullets” article first. To […]

Auto-adjusting chart height based on a number of data items

Type tutorial

This tutorial will explain how you can easily make your chart grow or contract based on an actual number of data. The problem Let’s take a simple bar chart: It looks OK. However, it height is fixed, so if we had more bars, it might start looking a bit awkward: Or, if there are too […]