Docs

Overview – Labels & Index Labels in Chart

Labels are used to indicate what a certain position on the axis means.

Index Labels can be used to display additional information about a dataPoint. Its orientation can be either horizontal or vertical.
Below image shows labels and index labels in a column chart.

Labels

Labels appears next to the dataPoint on axis Line. On Axis Y it is the Y value, and on X axis is either user defined “label” or x value at that point.
labels can be customized by using the following properties.

You can try out various properties to customize labels in the below example.

Try it Yourself by Editing the Code below.

Formatting Labels

When values of x or y are numbers of higher order or when they represent currency, etc formatting them with separators and adding appropriate symbols (comma, dot, $, etc) helps in increasing the readability. Read More About Formatting Date & Time & formatting numbers .

Try it Yourself by Editing the Code below.

Tip

You can hide numeric / dateTime labels on axis by setting valueFormatString to ” ” (space). This only hides the auto generated numeric/dateTime labels but will continue to show label(string) values that are set inside dataPoints.

Index Labels

Index Labels are Text Snippets containing additional description of dataPoint. They are positioned above the actual dataPoint with a predetermined orientation.

You can show Index Label for any dataPoint by setting its indexLabel property. You can also set indexLabel at dataSeries level – which applies to all dataPoints in the series. indexLabel value set at dataPoint will override indexLabel at dataSeries level (if set).

Keywords:

Instead of setting string values for all indexLabels, you can also use keywords like x, y, etc that will automatically show corresponding properties as indexLabel. This will allow you to define indexLabel at the series level once. While setting indexLabel you specify a keyword by enclosing it in flower brackets like {x}, {y}, {color}, etc

In case of stacked, pie and doughnut charts you can also use special keywords like #percent & #total
eg: indexLabel: “#percent”

Range Charts have two indexLabels – one for each y value. This requires the use of a special keyword #index to show index label on either sides of the column/bar/area.
eg: indexLabel: “{x}: {y[#index]}”

For example you can set the following indexLabel at dataSeries:
indexLabel: “${y}”
indexLabel: “x:{x}, y:{y}”

Important keywords to keep in mind are – {x}, {y}, {name}, {label}.
Below are properties which can be used to customize indexLabel.

Finishing it up.

Here is an example that uses above mentioned concepts

Try it Yourself by Editing the Code below.

Tip

You can hide numeric / dateTime labels on axis by setting valueFormatString to ” ” (space). This only hides the auto generated numeric/dateTime labels but will continue to show label(string) values that are set inside dataPoints.

Nice example. A small problem arises, when you want to hide the X indexex only: The horizontally placed Y-labels are cut off (leftmost, rightmost). There should be enough space reserved for them (automatically or via manual option).

While I’m at this, another idea would be to provide option to set font size for smaller screens, so that longer labels won’t spill into the next line when the chart is viewed on mobile devices. This probably would come in handy across all text-type information on the charts, including chart title.

One approach for flexible label formatting would be to allow callbacks to JS methods, passed in as a parameter, similar to the way GD::Graph works in PERL, what that does is allow people to write their own more complex formatting routines in any way they want, rather than the developer trying to accommodate lots of different unique requests, one way to handle this is to wrap the parameter to valueFormatString inside a try catch structure, where if the passed in value matches a valid function then it is passed the variable and prints the return value, if it fails then you process the format string normally.

Is there an ability to change vertical position of a label?
I am trying your library because of poor performance of Amcharts, but when I am setting labelFontSize to 10, I get very little distance between label and axis line http://postimg.org/image/h53k0ohkp/

I have a dataserie including more than 1000 datapoint {x: new Date (2014,1,1,12,3,0,0), y: 321, label:”2014″}. The label for the xaxis in this case gonna be only year (2014). I wonder how I can show the complete data (2014/1/1) in the tooltip?

Do you have a solution for long x-axis labels ??
(the ‘labelWrap’ and ‘labelAutoFit’ doesn’t seem enough)
the solution I am looking for is adding ‘…’ and a tool tip if the string is too big to fit (= css ellipsis).

I’m using the Candle Stick chart type to show minute by minute candle sticks for a day. However instead of using prices for the OHLC values on the I’m using the % change from the day’s opening price. To show the actual price info I’m using the toolTipContent for each dataPoint, but I’d also like to show the price on the Y axis for each displayed label.

For example, say the Y axis is showing labels for 0.0%, 0.5%, 1.0% etc, I’d like to show the corresponding price next to each of these, e.g. “0.0% ($100.00)”, “0.5% ($100.50)”, “1.0% ($101.00)”.

I’m graphing with time as the y axis, and I’m aware that this does not support time units in the y axis, but I was hoping to graph time in seconds, and then reformat it into a string and use those strings as the labels on the y axis. Is there any way to customize the y axis?

Is there a way to set a minimum display height for the column. Say for example if the value on Y-axis is too low it will not be showed on the graph, instead of that I want to display a default height column with the actual height as the label.

In case you want to apply custom formatting for axis label, you can use labelFormatter for which label is sent as a parameter. In case you want to format indexLabel, you can use indexLabelFormatter which gets dataPoint as a parameter and you can access label via dataPoint. In case this doesn’t answer your question, please create a jsfiddle so that we can understand your requirement better.

I receive data in JSON format from an http api and would want to pass that to the dataPoints variable but the candlestick chart is not displaying anything. But if I export the content of my json object and hardcode it it works, though I notice that there are double quotes arround some of my data what can I do to solve this problem this is a sample of my data from the http api
[{“x”:”new Date(2014, 11, 13)”,”y”:[148.83,148.83,148.83,148.83]},
{“x”:”new Date(2014, 11, 14)”,”y”:[148.83,148.83,148.83,148.83]}]
what can I do. Please help me out it urgent.

Positioning indexLabel anywhere in chart is not possible as of now but you can use stripLine labels with stripline color as transparent to show your text in the extreme right of the chart. Here is an example.