What Is It?

Basically, Timeline charts can be described as “Curved XY Charts”.

Under the hood, it’s still an XYChart with its axes and series, except it can follow one of the few predefined shapes—Serpentine or Spiral—or a completely custom path, defined by X/Y points.

Documentation & Demos

• Timeline charts docs
• Timeline demos

Download & Install

amCharts 5 library is available as a standalone script, via CDN, or as NPM package.

Refer to Downloads page for further details.

Licensing

Timeline charts do not need a separate license as they are part of the amCharts: Charts package.

If you’re using a free version of amCharts, or if you have a license for amCharts 5: Charts, you’re all set.

The post Introducing Timeline Curve Charts appeared first on amCharts.

As a result, most amCharts services, including our website (amcharts.com) and CDN service (cdn.amcharts.com), were unavailable for several hours.

We took all possible measures to restore these services as quickly as possible.

There is no evidence that any servers were breached or that any data was leaked or damaged.

We are actively reviewing the incident and working on ways to minimize the likelihood of similar occurrences in the future.

In the meantime, our small team is immensely grateful to our users for their patience.

While all services are now back online, we urge our users to remain vigilant. Based on similar incidents affecting other businesses, there may be follow-up attacks, including further denial-of-service attempts and false claims about data leaks.

If such incidents occur, we will do everything in our power to mitigate them and investigate any claims.

We strongly recommend deploying amCharts libraries on your own web servers instead of relying on our public CDN. (downloads page)

As a good measure, we also encourage to log into your amcharts.com account, and changing password to something unique, in order to not be vulnerable for cross-referencing with reused credentials on other websites that had their user data bases leaked.

If you have questions, or have other concerns, please feel free to reach out to us at contact@amcharts.com.

The post Statement Regarding Jan 30, 2025 Service Outage Due To DDoS Attack appeared first on amCharts.

The Background

During rally, presidential candidate Donald Trump has looked away towards this chart displayed on a big screen, titled (in all caps as we come to expect) “ILLEGAL IMMIGRATION INTO THE U.S.”:

At the same time a shot, aimed at Trump’s head was fired, and missed, because he was looking away at the chart.

As he later claimed himself, the chart saved his life.

The Task

We just can’t resist giving prominent data-viz items an amCharts makeover.

Behold, a live version of the life-saving chart:

[codepen_embed height=”800″ default_tab=”result” slug_hash=”LYKpRWx” pen_title=”Column with Rotated Labels” user=”amcharts”]See the Pen
Column with Rotated Labels by amCharts team (@amcharts)
on CodePen.[/codepen_embed]

Editable Version

And should you feel creative, here’s a version of the same chart that you can manipulate the data on, by dragging the columns. Enjoy! 😉

[codepen_embed height=”800″ default_tab=”result” slug_hash=”OJeyMbE” pen_title=”Column with Rotated Labels” user=”amcharts”]See the Pen
Column with Rotated Labels by amCharts team (@amcharts)
on CodePen.[/codepen_embed]

The post Implementing “The Chart That Saved Trump’s Life” appeared first on amCharts.

Stock Chart Drawing Mode

Drawing mode – which supports over 20 annotation tools – can be turned on either via Stock Toolbar, or via API.

Available Tools

Stock Chart currently brings more than 20 tools that can be used to annotate and analyze stock charts:

• Arrows & Icons
• Average
• Callout
• Doodle
• Ellipse
• Fibonacci
• Fibonacci Timezone
• Horizontal Line
• Horizontal Ray
• Label
• Line
• Measure
• Parallel Channel
• Polyline
• Polyfill
• Quadrant Line
• Rectangle
• Regression
• Trend Line
• Triangle
• Vertical Line

Tool Selection & Drawing

A tool can be selected from the dropdown list.

The context-sensitive control next to it will automatically update to show only relevant related controls like line color and style for lines, or font family and size for labels, etc.

Selecting & Moving Drawings

Using Select mode, each of the drawings can be selected and moved by dragging in.

Moreso, multiple drawings can be selected by holding down CTRL key when clicking on them.

Modifying & Deleting Drawings

Selected drawings can be edited by choosing different values from related controls, like colors and line styles.

The styles will be applied to all selected drawings. Pressing DEL key, will delete them.

Analytical Annotations

Tools offered by he Stock Chart go beyond simple annotations. They also offer powerful analytical tools like variations of Fibonacci analysis, Average, Regression, and Trend lines, Parallel Channel and Measure tools, etc.

Events and API

Everything that can be controlled via Stock Toolbar, can also be triggered via the chart’s API:

• Selecting tools as well as setting properties like colors, line styles, fonts, etc.
• Deleting drawings
• Toggling select, drawing, and erasing modes.
• Serializing and restoring drawings.

Stock Chart also provides a robust event structure which allows triggering custom handlers when drawings are added, selected, moved, or removed.

Related Info

• Stock Chart product page
• Stock Chart documentation
• Drawing Control documentation

The post Revamped Stock Chart Drawings appeared first on amCharts.

In the body of this post, we will go through the new licenses, the reasons for the change, and how the changes will (not) affect current license holders.

TL;DR

• The new changes will be rolled out during the day of Sunday, March 31, 2024.
• Any licenses or services purchased before that day, will be unaffected by the change.
• All licenses are now per-seat, meaning that you will need to acquire as many licenses as you will have actual developers working with amCharts product(s) at the same time.
• Licenses are now available as annual subscriptions that require renewal every 12 months as well as perpetual licenses that do not expire and do not require renewal.
• There are four types of licenses:
  • Basic – for public websites where users do not have to log in.
  • SaaS – for SaaS websites where users have to log in.
  • OEM – for developing redistributable web, mobile, and desktop applications.
  • Extended OEM – for developing software tools, using across multiple affiliates, and creating “white label” relicensed applications.
• No more limits on websites/projects. You purchase only developer seats. It doesn’t matter how many projects (covered by a target license) they are working on. The stuff you create can be used indefinitely even if license subscription runs out.
• No changes in product lineup. Three products are still available: Charts, Maps, Stock Chart.
• Maps is now a standalone product and does not require a license for Charts.
• Support subscriptions (amPlus) are now per-seat, too. A number of seats subscription purchased will determine how many people can contact amCharts support.
• Current support subscriptions remain unlimited-seats until their next renewal cycle, whenever that may be.
• Current support subscriptions can be renewed using the old unlimited-seats model until midnight July 1st, 2024. After that, all renewals will be switched to the new per-seat model.

Why we are doing it

Having been around for more than 15 years now, we’ve accumulated a vast amount customers of all sizes: ranging from a one-man operation, to Fortune 500 behemoth corporations.

Based on the feedback collected over more than a decade, we’ve came to the conclusion that our one-size-fits-all approach to licensing, while very convenient and straightforward, does not fit the bill (so to speak) anymore.

With that in mind, we’ve set out to design a new licensing approach, which would employ flexible pricing based on the following criteria:

• Size of the team working on the project
• Duration of the project

The new model should drastically reduce licensing costs for time-limited projects or projects implemented by compact development teams.

Pricing

Full pricing will be announced on March 31st, 2024.

That said, 1 seat pricing in vast majority of cases will be lower for perpetual licenses, than they are now, and significantly lower for license subscriptions.

What’s changing

Introducing license subscriptions (in addition to perpetual licenses)

Up until now all amCharts licenses were perpetual: pay once – use forever. That still remains.

We’re also introducing annual license subscriptions: pay a subscription fee – use for 12 months.

As a client, you can control whether you want the subscription to auto-renew for another 12 months automatically, or you will do it manually.

NOTE: Projects created while subscription was active, can remain in use indefinitely. You need an active subscription only when developing using amCharts product(s).

Licenses are now per-seat

Now, when purchasing the license you have ability to choose how many actual developers will be working with amCharts product(s).

For example, if you are developing an SaaS website with a team of 3 developers working on it, you will need 3 x SaaS license for amCharts.

amCharts will provide tools to manage your subscription: add or remove developer seats, cancel or resume subscription, as well as change billing details.

No-more website/project limit

Licenses no longer have a limit on a number of projects/websites they can be used for.

Example: You have 5 public websites you need chart on, and 2 developers developing those websites. You can acquire 2 developers seats for a Basic license for amCharts: Charts.

No changes in product lineup

Three principal products remain:

• amCharts: Charts – all chart types like Percent, XY, Radar, etc. (everything excluding Stock Chart and Maps)
• amCharts: Maps
• amCharts: Stock Chart

OK, a small change regarding amCharts: Maps

amCharts: Maps is now a standalone product (not an add-on to amCharts: Charts) requiring only its own license to operate.

If all you need is to display geographical maps (MapChart), you need only one product – amCharts: Maps.

How current licenses are affected

Any license purchase made before the switch during March 31st, 2024 is not affected. Meaning:

• The end-user license agreement that was in effect during the purchase will remain so indefinitely.
• No per-seat limit will be imposed on those licenses.
• The licenses still remain perpetual and will not expire.

Technical support subscriptions

Technical support subscriptions – amPlus – will also take on a per-seat approach.

The number of seats purchased will determine how many distinct people from your organization will be able to contact amCharts support service.

amCharts will provide online tools to easily manage the list of email address covered by your support subscription.

Some license purchases will include complimentary support subscriptions, as per below table:

Current active subscriptions will accommodate unlimited seats condition until at least their next renewal date.

At this time we plan on keeping renewals with the old conditions until July 2024. Any renewals to old subscription before July 2024 will retain the unlimited-seats model.

Subscriptions expiring after midnight of July 1st, 2024 will need to be switched to the new per-sear support subscriptions.

When is this happening?

We’re implementing changes on Sunday, March 31st, 2024. There are a lot of moving parts to consider, so changes will appear gradually.

We strongly advise to hold off from purchases on March 31st.

If you still need to purchase an old-style license, do it on March 30 or earlier. Or wait for April 1st.

Frequently asked questions

What happens if I need to add developer seats mid-project?

You will be able to do so using subscription management tools.

For active subscriptions, adding new seats will create a new charge, pro-rated based on the time remaining to the next renewal.

And what if I need to remove seats from subscription?

You can do so, too. However, we won’t be able to refund you the amount for the remaining subscription period.

The new seat count will take effect with the next billing cycle.

How can I specify users who will be able to access license information as well as contact support?

amCharts will provide online tools where you will be able to edit a list of email addresses that can see license information when logged into amcharts.com, as well as a list of address that can contact amCharts support under your support subscription.

The post New License Pricing and Structure (In Effect From April 2024) appeared first on amCharts.

In this post, we’ll take a look into ways we can embed map setups created using Online Map Editor by amCharts.

For a crash course on what Map Editor is and what it can do, please read our previous post: “Introducing Online Map Editor“.

Standalone HTML File

Map Editor can save your whole configured map as a completely self-sufficient HTML file.

To do so, open Download tool, and click the “HTML + JavaScript” button.

Save the file.

You can open it directly in a browser, email it, or display on your website in an <iframe>, e.g.:

<iframe src="/path/to/WorldMap.html" style="width: 100%; height: 500px;"></iframe>

The HTML file will contain all the necessary markup, as well as JavaScript files needed to run the map, loaded from amCharts CDN.

Embedding Using Third Party Services

You can use “Open in CodePen” or “Open in jsFiddle” buttons to open your map in those respective services, with their HTML, CSS, and JavaScript sections pre-filled.

You can preview the output, and even edit the code there.

Both of those services allow saving pages (pens or fiddles) then embedding them directly into your websites using easily generated code, which might be an easier alternative to using standalone HTML file.

Here’s a sample map, saved in CodePen:

[codepen_embed height=”600″ default_tab=”result” slug_hash=”KKEMXKB” user=”amcharts”]See the Pen
My World map by amCharts by amCharts team (@amcharts)
on CodePen.[/codepen_embed]

Adding to WordPress Posts and Pages

If you are using amCharts WordPress plugin, you can use CodePen or jsFiddle to easily grab the code to paste into WordPress.

To port a map setup from a CodePen to a new WordPress chart:

1. Copy <script> file URLs from CodePen’s “HTML” tab into WP’ “Resourcers” box.
2. Copy the rest of “HTML” tab content into WP’s “HTML” box. You might want to add dimension styles to the the map <div> element.
3. Copy contents of “JavaScript” tab into WP’s “JavaScript” box.

Getting the Code

You can also use CodePen/jsFiddle option to easily grab HTML and JavaScript that comprises map.

To view map, you will need 3 things:

1) Viewer script:

<script src="https://cdn.amcharts.com/lib/editor/map/5/viewer.js"></script>

2) A <div> element to be used as map’s container. We can define our own CSS to size and otherwise style it:

<div id="chartdiv" style="width: 100%; height: 600px;"></div>

3) JavaScript code invoking the map viewer:

am5viewer.create("chartdiv", {
  // Map config
  // ...
});

Please note that am5viewer.create() function takes an id of its target container as the first parameter (in the above example "chartdiv").

Combining With Other amCharts Charts On The Same Page

Normally, viewer.js contains everything we need to run the maps, including amCharts 5 library and related files.

If we need to embed a map into a page that is already using amCharts 5 to create other charts, we can use a “lite” version of the viewer include: viewer.lite.js to make sure amCharts 5 is not loaded twice.

In this case we just need to ensure that all the amCharts 5 files needed to run our map are loaded:

<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/map.js"></script>
<script src="https://cdn.amcharts.com/lib/5/plugins/json.js"></script>
<script src="https://cdn.amcharts.com/lib/5/plugins/exporting.js"></script>
<script src="https://cdn.amcharts.com/lib/5/geodata/worldLow.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<script src="https://cdn.amcharts.com/lib/editor/map/5/viewer.lite.js"></script>

The post Embedding Interactive Maps Created with Map Editor appeared first on amCharts.

Let’s take a look at how we can create animations in the Online Map Editor by amCharts.

If you’ve never used this tool before, we suggest reading introductory post “Introducing Online Map Editor” before proceeding.

How Animations Work

Animations in Map Editor work by assigning a point (marker) to a line which acts as a trajectory for point’s movement.

Creating a Line (Path or Trajectory)

Before we can create animation, we need to create a path for the animated marker to move along.

Think of it as laying a railway.

Adding a Point (Actor)

Now, let’s add a marker which we want to animate.

Attaching a Point To a Line

Now, let’s put our little actor plane on the line we created before.

To do that, we need to select the point, and select our line from the dropdown in point’s edit window.

If we don’t want to animate the point, we can just select its position along the line, and call it a day.

Initiating the Animation

To initiate the animation, we need to set the “Animation duration” control to a non-zero value.

The value means how long (in milliseconds) it should take the point to go from the first point of the line to the last one.

Besides duration – which essentially controls speed of movement – we also have two additional optional animation settings:

• Auto-rotate (on by default): if enabled, the points image will flip when it reaches the end of the of the line and continues to animate back towards the start of the line.
• Animate back (on by defaulft): if enabled, the point will continue moving between ends of the line in a loop, whereas if it is disable, it will always start from the start and move towards the end.

Hiding the Line (Path)

If we don’t want the actual line or its points to show, we can hide the line by applying zero opacity to its color.

To hide points, we’ll need to set color opacity to both its fill and outline.

If we also added labels to the line points, we can either delete theme one by one, or set color opacity to zero.

Live Example

Here’s a complete working map with animations we have created in the above steps.

[codepen_embed height=”600″ default_tab=”result” slug_hash=”KKEMXKB” user=”amcharts”]See the Pen
My World map by amCharts by amCharts team (@amcharts)
on CodePen.[/codepen_embed]

The post Creating Animations in Map Editor appeared first on amCharts.

Video Intro

What Can It Do?

We can use this tool to:

• Create world and regional/country maps
• Add lines, text labels, markers
• Animate markers
• Create data-bound heat maps and bubbles
• Create stylish pixelated maps
• Export as static image or embeddable code
• Save edits to local browser memory to load and continue editing later

Choosing a Map and a Projection

The tool starts with a World map in a Mercator projection pre-selected for us.

Besides the world map, the Map Editor has maps for most of the countries, as well as regional maps such as Continents, Europe, etc.

To choose a map, simply go to Settings:

For a world map, some projections might look better than others.

Switching a projection is done via Settings menu as well.

Please note, switching to a map for United States, will automatically switch projection to “Albers USA”.

Choosing Between Dark and Light Themes

While any color on the map can be edited manually, the Map Editor comes with two pre-set themes: Dark and Light.

Switch between them via Settings menu:

Switching a theme will reset all edits we have made so far, so it’s best to choose the theme right from the start, then stick with it.

Configuring the Appearance of the Map Polygons

We can change default coloring and outlines for map polygons (countries or states) by selecting the Polygons tool.

We can modify colors, as well as some other parameters for each polygon individually, too.

For that we can either click the polygon and select corresponding parameters from the window that opens, or use Fill tool.

Creating Heat-Maps and Bubbles

The Editor can also generate value-bound heat maps where each polygon is colored based on its value.

It can also use the same data to generate value-sized bubbles for each polygon.

Before we can use this feature, we need to provide data for each country or state via Data tool.

We can can enter values by hand, use random values, or – in case of world map – use some pre-set sample data sets.

Once the data is ready, we can use it to generate heat maps and bubbles.

To generate heat maps, let’s use Polygons tool.

In it we can change the color of the polygon with lowest value, and the color for the one with the highest value.

Additionally, we can set a “neutral color” for those polygons that do not have value in data.

Check “Apply heat rules” box, to apply the heat map coloring to the map.

To create bubbles, let’s use Bubbles tool.

We can choose the shape of a bubble, minimum and maximum size, color, and border.

Click “Generate” button when ready.

Once generated, each bubble can be clicked upon (or selected from the Map items list) and edited individually.

Creating Pixel Maps

Probably the most visually-stunning feature of the Map Editor is its ability to generate “pixel maps”.

When used, it replaces polygons with tightly packed shapes – pixels.

Let’s use it Pixels tool to generate one.

As usually, we will be able to choose some options like pixel shape and size, gaps between pixels, outline color and opacity.

Click “Generate” button when ready.

Adding Lines

To add lines, let’s select Lines tool.

Once there, we’ll be able to select multiple settings how the lines look, e.g. color, transparency, dashes as well as choose an icon to act as an anchor point for line elbows.

Optionally, we can also enter a label text to display next to the icons of the line.

When Lines tool is active, clicking anywhere on the map will start adding line-connected points.

We can change any setting while doing so and the it will be applied to subsequently added points/line segments.

If we ever want to come back to editing the line, we can select it from the Map items list.

Each line point is also editable by clicking directly on it.

We can also move points in line by simply dragging them.

Adding Markers

To start adding markers, let’s select Points tool.

Similarly to adding lines, once Points tool is active, clicking on a map will add a marker using currently selected parameters: point type, size, rotation, color, etc. as well as the label attached to it.

To edit current marker, simply click on it in the map or in the “Points” list.

To relocate a marker, simply drag it.

Normally, the markers are “pinned” to the map, so that when the map is moved or zoomed, the markers will move with it.

We can unpin them, so to create static icons.

Adding labels

To add labels, predictably use Labels tool.

Once Labels tool is active, clicking on a map will start adding labels on it using currently selected settings like label color, size, etc.

To edit a label, simply click on it in the map or in the Map items list.

For labels attached to a map point, we can also change alignment in relation to the marker itself.

Using a Resizer Tool

Most of the elements on the map are resizable.

Select Resize then start clicking on elements. Selected element will show a familiar resize bracket, which can be used to change the size of the element or rotate it quickly.

Downloading and Embedding

Once we’re done editing the map, we can download it as a static image, or as interactive code.

The Download tool offers a few options.

PNG and JPG downloads will produce a static image of the map.

HTML + JavaScript option will create an HTML file with full code to reproduce a fully interactive map, which you can embed via <iframe> or grab the code and paste into your own web app or CMS.

CodePen and jsFiddle will open map in those specific services, allowing you to dynamically tinker with the code and data.

Saving and restoring

Let’s open a Save map data tool.

It offers a couple of options for storing our current edits:

• Saving it to browser’s memory
  Once we click on “Save map data” button, all current edits will be saved in browser’s “local storage” and loaded automatically when we come back to the editor the next time.
• Exporting raw data
  Clicking “Export data” will produce raw data for the edits and place it in the text box below. We can copy it and save whenever we want to store it, e.g. in a text file. When we want to restore the edits, we can paste the exported data in the same text box, then click “Import data”.

We can also completely reset the map to defaults using “Reset map” button at the bottom of the same window.

Advanced Usage

Make sure you go over to the following posts showcasing advanced usage of the Map Editor:

• Creating Animations in Map Editor
• Embedding Interactive Maps Created with Map Editor

The post Introducing Online Map Editor appeared first on amCharts.

Stock Chart by amCharts comes bundled with a lot of tools to annotate and analyze stock data – indicators and drawing tools.

Users can annotate the data displayed using wide array of tools from basic ones like lines and shapes and labels to complex like Fibonacci Retracement Levels and Regression lines.

They also have an ever-growing list of technical analytical tools, called indicators. They can be simple ones like Moving Average, or a complex but really useful ones like Volume Profile.

The issue is that those annotations are usually discarded when the page displaying the chart is reloaded, which brings us to a functionality that allows it to be retained.

Related tutorials

• Indicators
• Annotations

Saving to browser’s “local storage”

A browser’s local storage is a client-side storage mechanism that allows web applications to store and retrieve data locally on a user’s device. It provides a way for websites to store small amounts of data, such as user preferences or session information, persistently on the user’s browser. This data remains available even after the user closes the browser, enabling a more seamless and personalized user experience across visits to the same website.

amCharts Stock Chart provides built in ways to save all currently added indicators and drawings to local storage for those to be retained across page reloads and even sessions.

There are a couple of ways to do that.

If the chart has a Settings Control added to its toolbar, it contains a checkbox, which allows automatic saving and restoring of all annotations.

For more options, a Data Save Control can be added to the chart which, in addition to automatic save/restore – allows saving, restoring, and clearing annotation data manually.

Related documentation

• Settings Control
• Data Save Control

Serializing annotations

Developers can offer more ways for their users to retain annotation data.

Stock Chart comes with an API to serialize all drawings and indicators into a JSON string, as well as parse and restore all those annotations.

As an example, serialized data can be transferred to server backend for storage into a data base.

Similarly, it can be loaded dynamically, and passed into chart’s API for parsing and restore of the annotations.

Related documentation

• Serializing drawings and indicators

The post Saving and Restoring of Stock Chart’s Annotations appeared first on amCharts.

The Volume Profile indicator or Volume-by-price is a tool used in technical analysis to illustrate the distribution of trading volume across different price levels during a specified period.

Instead of focusing solely on price movements, the Volume Profile displays horizontal bars along the side of the price chart, with each bar representing the volume traded at a specific price level. Traders use this information to identify key support and resistance levels, as well as areas of high or low trading activity.

Peaks in the Volume Profile can indicate significant price levels, while valleys may suggest areas with lighter trading interest. By incorporating volume data, the Volume Profile helps traders gain insights into market sentiment and potential price reversals, contributing to more informed trading decisions.

amCharts implementation

Starting with version 5.7.0 amCharts 5: Stock Chart has a Volume Profile Indicator built-in.

To add it, simply select it from the Indicators control.

Configuring

amCharts’ implementation of Volume Profile allows configuring it in a number of ways:

1. Users can set separate colors for volume down and up periods.
2. Configure the area of the value – the pricing area where most of trading volume occurred.
3. Width of the volume chart.
4. And most importantly select the way price ranges are calculated: either in fixed number of steps or specific increments, e.g. number of cents.

Legend

As with other amCharts indicators, Volume Profile comes with full legend support, which shows price range volume information on hover.

API

Volume Profile indicator can also be added via Stock Chart’s API:

var volumeProfile = stockChart.indicators.push(am5stock.VolumeProfile.new(root, {
  stockChart: stockChart,
  stockSeries: valueSeries,
  volumeSeries: volumeSeries,
  legend: valueLegend
}));

Demo

[codepen_embed height=”800″ default_tab=”result” slug_hash=”RwvXLXL” user=”amcharts”]See the Pen
Stock Chart with Volume Profile Indicator by amCharts team (@amcharts)
on CodePen.[/codepen_embed]

Related documentation

• Indicators
• Indicator control
• Stock Chart

The post Volume Profile Indicator appeared first on amCharts.