Your search did not match any results.
Line Charts

Logarithmic vs Linear Axes

The Chart component supports two numeric axis types: linear (or continuous) and logarithmic. This demo shows two charts that display the same data but use different axis types. The bottom chart uses a linear axis, which makes it hard to analyze smaller value changes. For the top chart, a logarithmic Y axis is used to increase data readability.

Logarithmic scales increment values not by adding a constant number, but by multiplying it by a specific factor - logarithmBase. On a base 10 scale, the visual range between 1 and 10 will be the same as range between 10 and 100. This makes it easier to analyze data that has high peaks, yet requires you to review changes for small argument values too.

Graphs in this demo display negative and zero values, and this scenario needs special consideration if you use logarithmic axes. The chart can build and unlimited number of tick marks that never reach 0 - 100, 10, 1, 0.1, 0.01, 0.001, and so on. To cut off this sequence, set the linearThreshold option. In this demo, it is set to -3, which means that between -10-3 and 10-3, or between -0.001 and 0.001, the chart uses linear data presentation.

Copy to CodeSandBox
Apply
Reset
<template> <div> <dx-chart id="chart" :data-source="dataSource" title="Damped Sine Wave" > <dx-pane name="top"/> <dx-pane name="bottom"/> <dx-series pane="top"/> <dx-series pane="bottom"/> <dx-common-axis-settings :end-on-tick="false" /> <dx-value-axis :linear-threshold="-3" type="logarithmic" title="Logarithmic Axis" pane="top" /> <dx-value-axis title="Linear Axis" pane="bottom" /> <dx-tooltip :enabled="true" format="exponential" /> <dx-crosshair :enabled="true" > <dx-horizontal-line :visible="false" /> <dx-label :visible="true" :format="crosshairFormat" /> </dx-crosshair> <dx-legend :visible="false" /> </dx-chart> </div> </template> <script> import { dataSource } from './data.js'; import { DxChart, DxPane, DxSeries, DxCommonAxisSettings, DxValueAxis, DxTooltip, DxCrosshair, DxHorizontalLine, DxLabel, DxLegend } from 'devextreme-vue/chart'; export default { components: { DxChart, DxPane, DxSeries, DxCommonAxisSettings, DxValueAxis, DxTooltip, DxCrosshair, DxHorizontalLine, DxLabel, DxLegend }, data() { return { dataSource: dataSource, crosshairFormat: { type: 'fixedPoint', precision: 2 } }; } }; </script> <style scoped> #chart { height: 450px; } </style>
import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', components: { App }, template: '<App/>' });
<!DOCTYPE html> <html> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </body> </html>
export const dataSource = []; for (let i = 0; i < 600; i += 1) { const argument = i / 100; dataSource.push({ arg: argument, val: Math.exp(-argument) * Math.cos(2 * Math.PI * argument) }); }
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, map: { vue: 'npm:vue@2.5.16/dist/vue.esm.browser.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@latest/index.js', 'devextreme': 'npm:devextreme@19.2', 'devextreme-vue': 'npm:devextreme-vue@19.2', jszip: 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.7/dist/quill.js', 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, meta: { '*.vue': { loader: 'vue-loader' } }, packages: { 'devextreme-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true } });