Single-Series Spline-Area Chart

Select a theme:

                     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.