Putting labels on a path, bending circular labels, and more in amCharts 4.1.2

Posted in
amCharts Blog
Posted on
Tagged
,

Just released amCharts 4.1.2 includes a few new awesome features in addition to fixes and improvements.

Labels on a path

Now you can put a label right on the series path and it will bend as the graph curvature bends. This is done using the new path and locationOnPath properties of the Label. Here’s a simple example:

See the Pen Label on a path by amCharts team (@amcharts) on CodePen.

You can take it to the next level and animate the label to move along the graph’s path:

See the Pen Funky text on a path by amCharts team (@amcharts) on CodePen.

Bent circular labels

You can now use a boolean bent property on the AxisLabelCircular to bend the label along the shape of a circular chart:

See the Pen Bent circular labels by amCharts team (@amcharts) on CodePen.

Other additions, changes and fixes

Here’s what else is new in amCharts 4.1.1 and 4.1.2:

Added

  • New Sprite property strokeDashoffset added. Can be used in conjunction with strokeDasharray.
  • Label has two new properties: path and locationOnPath. If set, will layout the SVG text along a curvature of the SVG path. HTML and multi-line text is not supported.
  • AxisLabelCircular new property bent added. If set to true, the label will be bent to follow the curvature of the circle. Distance from the circle can be adjusted using radius and label.paddingBottom. For PieSeries the alignLabels need to to be set to false for this feature to work.
  • keepSelection added to ValueAxis (will work on DateAxis too). With this set to true, axis will keep the relative selection when data changes (is updated). This is useful for “pre-zooming” a date axis: just set it’s start property (e.g. axis.start = 0.8).

Changed

  • If ValueAxis has strictMinMax = true set but min and max are not set, axis will fix the min and max and real high/low values.

Fixed

  • JSON: Having property values with both percent and minus signs in them, was resulting in error.
  • “Z” code in DateFormatter was not taking UTC setting into account.
  • Exporting SVG with Unicode characters in Edge/IE was resulting in invalid SVG.
  • Fixed JavaScript error which used happen when disposing chart/changing data in some cases.
  • Gantt chart sometimes was not displaying first/last data item.
  • Newly added MapLine elements were not respecting nonScalingStroke = true until zoom level changed.
  • Series’ tooltip was not always visible with DateAxis.
  • cursorTooltipDisabled = true was not working properly in some cases.
  • Sometimes duplicate MapLineObjects used to appear on map lines.
  • Some fixes made so that vertically and horizontally stacked axes on XYChart are now possible. Check new example in examples/vertically-stacked-axes.

Get the latest amCharts

As always, you can get the latest version of amCharts by following one of the methods outlined on our Download page.