- Highcharts Tutorial
- Highcharts - Home
- Highcharts - Overview
- Highcharts - Environment Setup
- Highcharts - Configuration Syntax
- Highcharts - Line Charts
- Highcharts - Area Charts
- Highcharts - Bar Charts
- Highcharts - Column Charts
- Highcharts - Pie Charts
- Highcharts - Scatter Charts
- Highcharts - Bubble Charts
- Highcharts - Dynamic Charts
- Highcharts - Combinations
- Highcharts - 3D Charts
- Highcharts - Angular Gauges
- Highcharts - Heat Maps
- Highcharts - Tree Maps
- Highcharts Useful Resources
- Highcharts - Quick Guide
- Highcharts - Useful Resources
- Highcharts - Discussion
Highcharts - Logarithmic Axis Chart
Following is an example of a logarithmic chart.
We have already seen the configuration used to draw a chart in Highcharts Configuration Syntax chapter. Now, let us discuss an example of a logarithmic chart.
Configurations
Configure the yAxis.type to be 'logarithmic'. It defines the type of axis. Options are "linear", "logarithmic", "datetime" or "category". Here, the default value is linear.
yAxis
var yAxis = { type: 'logarithmic', minorTickInterval: 0.1 };
Example
highcharts_line_logarithmic.htm
<html> <head> <title>Highcharts Tutorial</title> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <script src = "https://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 axis demo' }; 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>
Result
Verify the result.
highcharts_line_charts.htm
Advertisements
To Continue Learning Please Login
Login with Google