Single-Series Area Chart with Logarithmic Y-Axis

Select a theme:

                     anychart.onDocumentReady(function () {
    // create area chart
    var chart = anychart.area();

    // turn on chart animation
    chart.animation(true);

    // set chart title text settings
    chart.title()
            .enabled(true)
            .useHtml(true)
            .text('WebSite Metrics 2014<br/>' +
                    '<span style="color:#212121; font-size: 13px;">(unique visitors)</span>');

    // axis title
    chart.yAxis().title('Number of Visitors');

    // create a logarithmic scale
    var logScale = anychart.scales.log();
    logScale.minimum(1) // set scale minimum value
            .maximumGap(0.2); // increase scale maximum gap
    logScale.ticks().count(6); // set fixed major ticks count
    logScale.minorTicks().mode('logarithmic'); // set minor ticks to use logarithmic mode

    // set scale for the chart
    // it force to use passed scale in all scale dependent entries such axes, grids, crosshairs etc
    chart.yScale(logScale);

    // create area series on passed data
    var series = chart.area([
        ['Jan', 112],
        ['Feb', 163],
        ['Mar', 229],
        ['Apr', 990],
        ['May', 4104],
        ['Jun', 3250],
        ['Jul', 5720],
        ['Aug', 43],
        ['Sep', 61],
        ['Oct', 34],
        ['Nov', 45],
        ['Dec', 122]
    ]);

    // set series data labels settings
    series.labels()
            .enabled(true)
            .fontColor('#212121')
            .position('center-top')
            .anchor('center-bottom');

    // turn on series markers
    series.markers(true);

    // set series name
    series.name('Number of Visitors');

    // set up tooltips and interactivity settings
    series.tooltip()
            .position('center-top')
            .positionMode('point')
            .anchor('left-top')
            .offsetX(5)
            .offsetY(5);

    chart.interactivity().hoverMode('by-x');

    // set container for the chart
    chart.container('container');
    // initiate chart drawing
    chart.draw();
});

Area Charts are similar to the Line Charts: they are intended to represent the data that can be arranged in a table on a worksheet, they use standard two-dimensional coordinate system and both are mostly used to show continuous changes. By having an area between the zero line and the series line colored, Area Charts emphasize the magnitude of change over a period of time and draw attention to a total value across a trend.

This Area chart has only one series, which shows the number of unique site visitors during a year. Categories on the X axis are months; Y axis holds the values. One important thing about the vertical scale: the values spread along the vertical axis look special, that’s because the Y scale type is changed from the default (ordinal) to logarithmic. Logarithmic scale helps when there is a large range of values in the data, it reduces the difference and makes the chart easier to read.

All data points are marked and all area labels are enabled, so you can see each point’s value even without hovering any of them. But tooltips are enabled as well; when you hover anywhere above a category, the tooltip of the point that belongs to this category is shown. Tooltips show the category and the number of visits, this is a default tooltips formatting: series name and point value, formatting can be changed in a number of ways.