anychart.onDocumentReady(function () {
// create data set on our data
var dataSet = anychart.data.set([
['Jan', 225],
['Feb', 200],
['Mar', 205],
['Apr', 190],
['May', 180],
['Jun', 185],
['Jul', 195],
['Aug', 230],
['Sep', 227],
['Oct', 232],
['Nov', 228],
['Dec', 235]
]);
// map data for the first series, take x from the zero column and value from the first column of data set
var seriesData = dataSet.mapAs({'x': 0, 'value': 1});
// create area chart
var chart = anychart.area();
// adding dollar symbols to yAxis labels
chart.yAxis().labels().format('{%Value} hrs');
// turn on chart animation
chart.animation(true);
// axes and scale settings
chart.yScale()
.minimum(150)
.maximum(300);
chart.yAxis().title('Sunhours');
chart.xAxis().labels().padding([5, 5, 0, 5]);
// chart grids
chart.yGrid(true)
.xGrid(true);
// turn on the crosshair
var crosshair = chart.crosshair();
crosshair.enabled(true)
.yStroke(null)
.xStroke('#fff')
.zIndex(99);
crosshair.yLabel(false);
crosshair.xLabel(false);
// set chart title text settings
chart.title()
.enabled(true)
.useHtml(true)
.text('AVERAGE MONTHLY HOURS OF SUNSHINE OVER THE YEAR<br/>' +
'<span style="color:#212121; font-size: 13px;">the monthly total of sunhours over the year in Sydney, Australia.</span>')
.padding([0, 0, 20, 0]);
// create first series with mapped data
var series = chart.splineArea(seriesData);
series.name('Sunhours');
series.color('Gold 0.5');
series.markers()
.enabled(true)
.type('circle')
.size(4)
.stroke('1.5 #fff')
.zIndex(100);
// set chart tooltip and interactivity settings
chart.tooltip()
.positionMode('chart')
.anchor('right-top')
.position('right-top')
.offsetX(50)
.offsetY(50);
chart.interactivity().hoverMode('by-x');
// set container id for the chart
chart.container('container');
// initiate chart drawing
chart.draw();
});
Area Charts are usually used to represent the data that can be arranged in rows and columns, mostly for some
changes in time like temperatures or some prices. They use a two-dimensional coordinate system, as Line
Charts and some else. Area Charts look a bit similar to Line Charts, but there is an area between the series
and x-axis colored.
Spline Area Charts differ from simple Area (or Line Area) Charts the same way Spline Charts differ from Line
Charts. Using the guidelines, acute and sharp angles smooth and disappear, so instead of accurate line we
get a soft spline. It might look more attractive. However, the points stay where they are.
In this chart, we can see how the share prices of ACME Company had been changing during September 2015. The
categories on x-axis are days and y-axis holds the values in dollars. There is a crosshair enabled in white
color, and each time we hover a category anywhere above x-axis inside the chart, we’ll get the corresponding
point highlighted. Tooltips are enabled and bend to the left top corner of the chart, so in this example
tooltip doesn’t follow the cursor.
The selecting feature is enabled as well. To select a point, click it once; to select some number of points,
hold the Shift or Ctrl key on the keyboard and click those points you need to select.