Tag: events
- Activate/deactivate a pie slice on legend click instead of toggling
Normally, when you click an item in PieChart's legend, relative slice is hidden or revealed. This quick tutorial will show you how to make the slice activate/deactivate (pull out/in) instead.
- Adding "Home" Button to Map Chart
Map Chart can be zoomed and panned. There is, however, no built-in "go home" button. This tutorial will show how to add one which resets map's zoom and position to initial state.
- Allow just single series to be displayed at a timeDemo
This demo shows how we can use Legend's hit event to toggle other series off when one series is toggled on, making sure that there's only one series displayed at any given time.
- Auto-adjusting chart height based on a number of data items
This tutorial will explain how you can easily make your chart grow or contract based on an actual number of data.
- Auto-collapse other ForceDirectedTree nodes when node is explodedDemo
By default when node with children is clicked it is "exploded" - children are shown. This demo shows how we can catch such events to automatically collapse all other open nodes when that happens.
- Auto-hide value axes
Normally, all initialized Value Axes are shown, even if they do not have any visible Series attached to them. This also means that when Series is toggled off, the related Value Axis will remain. This tutorial will show how we can toggle axes off together with Series.
- Automatic labels over map polygons
During the course of this article we're going to learn how to automatically place labels over map polygons, as well as make them positioned just the right way.
- Automatically resize label to fit donut inner radiusDemo
The inner space of a donut chart is a place that can store some information. However, donut itself being sized relatively, might render that information not fitting. This demo shows how it's possible to resize the label inside donut to always fit the inner radius.
- Building drill-down maps
In this tutorial we'll look at techniques for building various map-based drill-down scenarios.
- Clickable chart thumbnailsDemo
This demo shows how we can use a custom function to defer chart instantiation and replace them with a thumbnail, which once clicked would be automatically replaced with a real chart.
- Context-sensitive tooltip that follows mouse cursorDemo
This demo shows how we can use cursorpositionchanged event to reposition the related tooltip to the exact cursor's position.
- Custom external legendDemo
This demo shows how we can use some custom code executed on chart load to build completely custom but interactive HTML-based legend for our chart.
- Custom order of legend itemsDemo
This demo shows how we can use events to apply custom order to legend items.
- Custom static multi-value tooltip
Its easy to consolidate a lot of data into a single tooltip that is displayed over Series using Cursor. We've covered it in this tutorial. But what if we don't want a huge square following our cursor, and would rather display that info in a fixed place in the corner? Read on, as we show you how.
- Custom-ordered legend itemsDemo
This demo shows how we can use events to dynamically re-arrange Legend items per our completely custom criteria.
- Display tooltip on PieChart slice clickDemo
Normally, tooltips on PieChart slices are shown when they are hovered by a cursor. This demo will show how we can disable this default behavior and only show tooltip when slice is tapped or clicked.
- Donut with radial gradientDemo
Normally, Pie Chart supports radial gradients only. This demo shows a clever trick with events that modify linear gradient rotation, enabling use of this type of fill on slices.
- Drill-down Sankey Diagram
This tutorial will walk you through building a multi-level drill-down Sankey Diagram.
- Fixed ValueAxis scaleDemo
This demo shows how we can use ValueAxis event "ready" to fix its scale (min and max values) on load so it does not change when chart is zoomed or scrolled.
- Force the first and last labels on axisDemo
These two demos show how you can use events, axis ranges, and some setting combination to automatically force showing first and last labels on ValueAxisand DateAxis, even if they fall on non-equal increments, and maintain them across zooms.
- Handling axis zoom events via API
Any axis in amCharts 4 can be zoomed. And sometimes we need to know when that happens, as well as the range of the new zoom. This tutorial will walk through all the necessary information to make that happen.
- Hide map images until zoomed in
Showing a lot of markers on the map may render it cluttered beyond usability. This tutorial will show how you can easily specify custom zoom levels for each individual image to be shown at.
- Hide or relocate label bullets for small columnsDemo
This demo shows how label bullets can automatically be hidden or relocated for small columns.
- Highlight all polygons in Map Series on hover
This tutorial will show how you can highlight all of the polygons in the same series, when just one of those is hovered.
- Highlight clicked ForceDirectedTree nodeDemo
This demo shows how we can use events and states to apply different look for the last clicked ForceDirectedNode.
- Highlighting column on axis label clickDemo
This demo shows how we can add hit events to CategoryAxis labels, so that we can highlight respective column by applying active state to it.
- Highlighting column series on legend click
During the course of this tutorial we'll modify the functionality of the legend from toggling series on and off, to rather highlighting it.
- Individual legend item for each column
Normally on an XY Chart, Legend creates a single item for each Series. This brief tutorial will show how you can create custom legend which will show an item for each individual column in a single Column series.
- Manipulating chart data
Each chart type in amCharts family has a specific requirement for structure its data should come in. Mostly it comes in a form of an array of objects. However sometimes you don't have control over format of source data. This tutorial will explore how we can pre-process data to reshape it into an amCharts-suitable form.
- Map polygon hover via API
In most map setups, a polygon (country) will change color and show a tooltip with its name when hovered. This tutorial will show how you can "simulate" hover via API, without user actually interacting with the map.
- One pulled slice per Pie chart
Normally, when you click/tap a slice on a Pie chart, it would pull out a little. You can have multiple slices pulled out that way. This tutorial will show how you can set up Pie chart in order to allow only one slice to be pulled at any given time.
- Pre-zooming Map to a Country
You can pre-zoom the map to certain coordinates and level. If you don't want to do that, you can make the chart pre-zoom to a particular country. This tutorial will explain how.
- Pre-zooming Map to a list of countries
In this tutorial we explained how you can pre-zoom your map to a specific country. This tutorial builds on it to produce an example that pre-zooms the map to several countries.
- Re-arranging elements of the chart legendDemo
This demo shows how we can use legend item label's parentset event to move it before the marker.
- Removing chart background on print
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.
- Retrieving information of a clicked Map Object
In this tutorial we've seen how we can zoom in on a clicked country. We're going to build on that to retrieve information about clicked object.
- Retrieving latitude/longitude of map click
This tutorial will show how we can retrieve latitude / longitude coordinates of a click on map.
- Show column tooltip on category hoverDemo
This demo shows how we have use "over" and "out" events on axis labels as well as chart cursor's triggerMove() method to trigger tooltips on columns of the hovered category label.
- Show series bullets/labels on legend hoverDemo
This demo shows how we can add events to Legend items that would toggle on respective series' bullets and bullet labels on hover.
- Syncing width of the vertical axes across multiple chartsDemo
This demo shows how width of the vertical axes can be synchronized across multiple separate charts.
- Toggle series on multiple charts using same LegendDemo
This demos shows how we can sync up toggling of matching series across multiple charts using single legend.
- Toggling multiple series with a single legend item
This tutorial will show how you can toggle several Series at once, with a single Legend item.
- Zoom to month by clicking on a DateAxis labelDemo
This demo shows how we can implement hit event on DateAxis labels to automatically zoom to the clicked period.
- Zooming to map area on click
This tutorial will show how you can set up your map to automatically zoom to an area (i.e. country) when user clicks on or taps it.