Highcharts Logarithmic Charts
The following example demonstrates a logarithmic chart.
We have already learned about Highcharts configuration syntax in previous chapters. Now, let's see how to configure it.
Configuration
Set yAxis.type to 'logarithmic'. It defines the type of the x-axis. Possible values are "linear", "logarithmic", "datetime", or "category". The default value is linear.
yAxis
var yAxis = {
type: 'logarithmic',
minorTickInterval: 0.1
};
Example
Filename: highcharts_line_logarithmic.htm
<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts Tutorial | tutorialpro.org</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
var title = {
text: 'Logarithmic Example (tutorialpro.org)'
};
var xAxis = {
tickInterval: 1
};
var yAxis = {
type: 'logarithmic',
minorTickInterval: 0.1
};
var tooltip = {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: 'x = {point.x}, y = {point.y}'
};
var plotOptions = {
spline: {
marker: {
enabled: true
}
}
};
var series= [{
name: 'data',
data: [1, 2, 4, 8, 16, 32, 64, 128, 256, 512],
pointStart: 1
}
];
var json = {};
json.title = title;
json.tooltip = tooltip;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.series = series;
json.plotOptions = plotOptions;
$('#container').highcharts(json);
});
</script>
</body>
</html>
The above example will output: