<!doctype html>
<html>
<head>
<script src="//cdn.anychart.com/js/7.4.0/anychart.min.js"></script>
<style>
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
anychart.onDocumentReady(function() {
//create area chart
chart = anychart.area();
//set container for the chart
chart.container('container');
//set chart title text settings
chart.title().text('Area Chart with Logarithmic Y-Axis and Data Labels');
//create logarithmic scale
var logScale = anychart.scales.log();
logScale.minimum(1); //set scale minimum value
logScale.ticks().count(6); //set fixed major ticks count
logScale.minorTicks().mode('logariphmic'); //set minor ticks to use logarithmic distribution
logScale.maximumGap(0.2); //increase scale maximum gap
//set scale for the chart
//it force to use passed scale in all scale dependent entries such axes, grids, crosshairs etc
chart.yScale(logScale);
//set yAxis elements position settings
var yAxis = chart.yAxis();
yAxis.title().margin().bottom(20);
yAxis.labels().padding().right(15);
//create area series on passed data
var series = chart.area([
['P1', '112.61 '],
['P2', '163.21 '],
['P3', '229.98 '],
['P4', '2790.54'],
['P5', '4104.19'],
['P6', '3250.67'],
['P7', '5720.43'],
['P8', '43.76'],
['P9', '61.34'],
['P10', '34.17'],
['P11', '45.72'],
['P12', '122.56 '],
['P13', '87.12'],
['P14', '54.32'],
['P15', '33.08']
]);
//set series color settings
series.fill('#1D8BD1 0.8');
//set series data labels settings
series.labels()
.enabled(true) //enable data labels settings which is disabled by default
.fontWeight('bold');
//set series data markers settings
series.markers().enabled(true);
series.hoverMarkers().enabled(true);
//initiate chart drawing
chart.draw();
});
</script>
</body>
</html>