Tag: axes
- Additional axis tooltip to display totalsDemo
This demo shows how we can use additional axis and adapters to display total value in additional tooltip on top of the chart.
- Alternated axis fills
This short tutorial will show how you can make your XY chart more readable by introducing a fill between each second set of grid lines.
- 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.
- Axis labels at arbitrary values on GaugeChartDemo
Normally, an axis on a GaugeChart will place labels at convenient intervals - so they are not too crammed and not too sparse. It will depend on actual chart size. However, in some case you might want to place labels at exact values, no matter what. This demo will show how you can disable axis labels altogether and place axis range labels at precisely the values you need them to appear at.
- Axis ranges in XYChartScrollbarDemo
Do you know that XYChartScrollbar is not some mystical new class, but rather a full fledged XYChart. This means that we can do with it anything we can do with a regular chart, including adding axis ranges. This demo does exactly that.
- Chart with multiple CategoryAxisDemo
This simple demo shows an XYChart where each series uses own CategoryAxis with completely different categories.
- Clustering groups of non-clustered columnsDemo
This demo shows how we can separate non-clustered columns into separate non-overlapping groups, using their "data item locations".
- Column labels as categories
This tutorial will explain how individual column labels (bullets) can be used as Category axis labels.
- Column values on top of the chartDemo
This demo shows how we can use bullets and adapters to put actual values of series columns on top of the chart.
- Combining different axis types
amCharts allows any number of any type combined in the same XY Chart.
- Consolidating values from multiple axes into a single tooltipDemo
If you have multiple axes and a chart cursor, each axis will get a tooltip when you hover plot area. This demo shows you you can use adapters to consolidate values from multiple axis' tooltips into one.
- Controlling fill direction of a Line series
Normally, a Line series with fill enabled, will fill any space between itself and a horizontal "zero line". This tutorial will explore, how we can tame it to our specific needs.
- Custom ValueAxis grid using ranges
ValueAxis is a clever kid. It will try to space out its grid/labels in a way that they come in non-crowded "pretty" increments, e.g. in 10 incremental steps. But what if we want to show custom step increments, like every 25? This tutorial will explain how to do that.
- Draggable series axis rangesDemo
This demo shows how we can create a "series axis range" and make it draggable, dynamically adjusting threshold lines and respective series fills.
- Fixed Scale of Value Axis
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.
- 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.
- Freeze horizontal axisDemo
This demo shows how horizontal axis can be placed into a different container so it remains static and visible when oversized chart is getting scrolled.
- Grid over Series
Chart grid belongs in the back - behind all other chart elements. However sometimes, you might want to take them the front seat. This short tutorial will show you how.
- Grouping axis labels using ranges
This tutorial will show how you can use axis ranges to organize its labels into a groups.
- 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.
- Handling repeating categories on Category Axis
Sometimes you will end up with an XY chart that has non-unique categories in its data. This tutorial will explain how to deal with such situation.
- Hiding non-integer labels on Value Axis
The granularity of Value axis labels depends on available space and some settings. Sometimes, when there's enough space, and the range of values is not great, the axis will throw in intermediate non-integer values as labels. This tutorial will show how to hide those non-integer labels.
- 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.
- Labels at the bottom of the GaugeChart axisDemo
This demo will show how you can place the labels below both ends of the GaugeChart's axis.
- Making CurveChart labels follow axis angle
CurveChart (or a TimeLine) is a new exciting chart product, allowing twisting and bending the charts into any custom shape. This tutorial will show how you can make labels of a curved axis follow its angle.
- Modifying big number prefixes
amCharts' number formatter has a way of formatting numbers in a variety of ways, including converting to prefix/suffix-based shorter equivalents. This tutorial will explain how you can tweak it according to your needs.
- Multiple cursor tooltips on scatter chart
Normally, XYCursor, if added to a chart will try to show a tooltip for each series for the hovered date or category. This does not work for charts that have both X and Y axes as ValueAxis. This tutorial will show how we can fix that.
- Override CategoryAxis tooltip content with an adapterDemo
This basic demo shows how you can use an adapter on CategoryAxis tooltip label to modify it's content using chart data.
- Plotting series from calculated values
In XYChart we are used to plot series from the values that appear in data. This tutorial will show how we can plot from other auto-calculated values such as percent or change.
- Plugin: Range Selector
This tutorial will show how you can use Range Selector plugin (available since version 4.9.25) to create HTML-based controls for alternative zooming methods of Axes.
- Pre-zooming an axis
This tutorial will explain how you can set up your charts to initialize pre-zoomed.
- Selectively offsetting axis labels
Normally, a chart will try to hide axis labels so they do not overlap. However, you might need them all displayed. One option is to rotate labels. Other option is discussed in this tutorial.
- Show only first and last labels on Gauge Chart
This quick tutorial will explain how you can limit your Gauge chart axis to showing only its first and last labels.
- Show stack total in CategoryAxisDemo
This demo shows how we can create a separate Series with label bullets to show stack total right to a CategoryAxis label.
- Simulating individual order of columns within categoriesDemo
This demo will show how you can simulate an order of columns from different ColumnSeries within each category.
- Stacked Axes
This tutorial will introduce you to a powerful concept of "axis stacking".
- Stacked axes with CategoryAxis between themDemo
This demo shows how we can place a CategoryAxis between two stacked ValueAxis.
- 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.
- Titles on top of vertical (value) axis
Adding titles to axes is easy - just use axis' title property. It will add a vertical or horizontal title next to axis depending on its position. However, you might want to place axis label directly on top of the vertical axis. This tutorial will show how.
- Togglable event markers using axis rangesDemo
This demo shows how you can use chart's API to toggle axis ranges on and off .
- Using "fill rules" on a Date Axis
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.
- Using Axis Ranges on Radar Chart
This quick tutorial will show how you can use Axis Ranges on a Radar chart.
- Using axis ranges to highlight weekends
Axis ranges is a good way to highlight specific places or stretches along an axis. This tutorial will show how we can create code to automatically create axis ranges to highlight weekends on a DateAxis.
- Using axis ranges to place labels at arbitrary values or dates
Axes of various types follow their own logic when they choose where to place its grid and labels. However, sometimes you need to place those labels at precisely value X, or on date Y. That's where axis ranges might come in handy, which is the focus of this tutorial.
- Wrapping, truncating, and auto-rotating axis labels
This tutorial will explain how you can deal with very long axis labels, by wrapping and/or truncating them.
- 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 axis via API / external scrollbar
The XYChart can be zoomed using built-in scrollbar controls or with a chart cursor. This tutorial will show how you can zoom the chart programatically using its API.