Generate legend markers for each column
Type
tutorial This demo introduces a small plugin which can be used to auto-generate legend items for each separate column/series in the chart.
Search Results for:
Auto-calculate column color based on value
Type
tutorial This demo introduces a small amCharts plugin which can apply column fills based on their value. The plugin uses custom property colorRanges to calculate the color, and optionally variance of the color based on the position of the value withing value range.
GANTT Chart with a legend
Type
tutorial GANTT chart does not support automatically-generated legends. The reason for this is that on most GANTT setups, generating legend for every segment would not make a lot of sense, and it’s fairly difficult to deduct a color for a category, given big number of possible segments and their representations. That being said, you can still […]
OHLC chart with buy/sell indicators using trend lines
Type
tutorial Setting order of graphs via config
Type
tutorial Normally, the chart displays graphs in the same order as they are defined in chart’s graphs array. This very simply plugin, which uses AmCharts.addInitHandler() call, pre-sorts graphs using their proprietary index property. AmCharts.addInitHandler(function(chart) { // Reorder chart graph’s based on their “index” value chart.graphs.sort(function(a, b) { if (a.index == b.index) { return 0; } return a.index < b.index […]
Hooking up chart to data feed services
Type
tutorial We have many articles and examples here on amcharts.com that deal with theoretical concepts of loading remote data to be shown on charts. This tutorial will differ in such way that it will use the real data and the real data feed. If you’d like to review the principles, here are a few articles to […]
Overlapping segments on GANTT chart with rollover effect
Type
tutorial This demo shows how GANTT chart with overlapping semi-transparent segments. It also shows how you can use rollOverGraphitem and rollOutGraphItem events to dynamically apply style properties to the segment.
Auto-truncating long value axis labels with ellipsis and hover balloon
Type
tutorial In some cases value axis title might be too long to fit. This demo shows how you can make the chart automatically truncate the title with ellipsis to fit actual plot area height, but still display full title in hover tooltip. The demo uses AmCharts.addInitHandler() call to add init event to the serial chart. The handler function, […]
Using world map to display only European countries
Type
tutorial This demo shows how we can use world map to display a map of Europe only. We use zoomLevel, zoomLatitude and zoomLongitude in our data provider to pre-zoom the map to specific position and level. “dataProvider”: { “map”: “worldHigh”, “zoomLevel”: 3.5, “zoomLongitude”: 10, “zoomLatitude”: 52, // … } We also set unlistedAreasAlpha to zero, to make all areas […]
Finding out screen coordinates of a chart data point
Type
tutorial This demo shows how you can find out a screen coordinates of each data point, i.e. bullet. To find X coordinate, we are using dateToCoordinate() method on the category axis. If we had a regular non-date-based category axis we would use categoryToCoordinate() instead. For Y coordinate we utilize value axis’ getCoordinate() method. We catch a click on a […]