Replacing axis labels with arbitrary text

Type tutorial

Although you can format value axis labels like duration, add unit to the left or right of the value, you might need something more – for example, to replace numeric values of value axis with some strings or add some text to category axis labels. ValueAxis has labelFunction property for that. If you set some function […]

Disabling cursor / scrollbar in Stock Chart

Type tutorial

To hide the chart cursor in JavaScript Stock Chart just simply set enabled to false in ChartCursorSettings: chart.chartCursorSettings.enabled = false; To hide the scrollbar in JavaScript Stock Chart just simply set enabled to false in ChartScrollbarSettings: chart.chartScrollbarSettings.enabled = false;  

Multi-segmented line graph

Type tutorial

Some time ago, in order to have multi-segmented line chart (the one where line color or fill color changes at some point) you had to add several different graphs and this wasn’t very straight forward task. However since v3 we added lineColorField, fillColorsField and dashLengthField properties to AmGraph and now you can do it very […]

Multiple value axes on XY chart

Type tutorial

All our charts which have valueAxis can have multiple instances of this axis. This means you can have any number of value axes on XY chart and even radar chart can have several value axes. You just need to create additional ValueAxis (use position=”right” if you want to place it on the right), then assign some […]

Filling area between two lines

Type tutorial

It’s quite often scenario when we need to show some allowed value fluctuation on the chart. Different names are used for this kind of chart – difference chart, band graph, range graph etc. Here is a demo of such chart made with amCharts. To make fill between two lines you will need two graphs and so […]

Two or more charts on one page

Type tutorial

You can have any number of charts on one page. To do this, you have to set unique id for each div which should contain chart: <div id=”chart1div” style=”width:500px;height:300px;”></div> <div id=”chart2div” style=”width:500px;height:300px;”></div> Note, first div has id “chart1div” and the id of the second is “chart2div”. When writing chart to container, you should use these […]

Disabling or enabling value axis recalculation to percents

Type tutorial

When there’s a single DataSet selected, the chart shows real values on the value axis. Now, when you select at least one another DataSet for comparison, the chart goes into “percent” mode redrawing all the graphs and value axes to show percent change from datapoint to datapoint rather than real values. It’s a standard practice […]

Handling mouse events on line graph

Type tutorial

For a better understanding of events model, check this tutorial. There are several issues that you need to look out for when employing user interaction events on line graphs. We’ll detail them here: Events fire only on bullets, not line itself No bullets – no events. But what if I don’t want to display bullets? […]

Images above or behind the chart/map

Type tutorial

You can display image or any other HTML element both above and behind the chart or map. Take a look at this rusty stock chart example. As you see, the chart is transparent and background is visible. Setting background for a page or div using background-image style is the most easy way of having something […]

Force-show balloon over specific point

Type tutorial

There might be a situation, when you need to show balloon over some data point without a mouse, but based on user interaction outside the chart. Pie/Funnel chart For pie chart, this is quite straight forward, it has rollOverSlice(index) method. So if you know the number of a slice, you simply call this method. In […]