If you have technical questions, please create a support ticket in the DevExpress Support Center.
import React from 'react';
import {
Chart,
Pane,
Series,
CommonAxisSettings,
ValueAxis,
Tooltip,
Crosshair,
HorizontalLine,
Label,
Legend,
} from 'devextreme-react/chart';
import { dataSource } from './data.ts';
const crosshairFormat = {
type: 'fixedPoint',
precision: 2,
};
function App() {
return (
<Chart
id="chart"
dataSource={dataSource}
title="Damped Sine Wave"
>
<Pane name="top" />
<Pane name="bottom" />
<Series pane="top" />
<Series pane="bottom" />
<CommonAxisSettings endOnTick={false} />
<ValueAxis title="Logarithmic Axis" linearThreshold={-3} type="logarithmic" pane="top" />
<ValueAxis title="Linear Axis" pane="bottom" />
<Tooltip enabled={true} format="exponential" />
<Crosshair enabled={true}>
<HorizontalLine visible={false} />
<Label visible={true} format={crosshairFormat} />
</Crosshair>
<Legend visible={false} />
</Chart>
);
}
export default App;
xxxxxxxxxx
import React from 'react';
import {
Chart,
Pane,
Series,
CommonAxisSettings,
ValueAxis,
Tooltip,
Crosshair,
HorizontalLine,
Label,
Legend,
} from 'devextreme-react/chart';
import { dataSource } from './data.js';
const crosshairFormat = {
type: 'fixedPoint',
precision: 2,
};
function App() {
return (
<Chart
id="chart"
dataSource={dataSource}
title="Damped Sine Wave"
>
<Pane name="top" />
<Pane name="bottom" />
<Series pane="top" />
<Series pane="bottom" />
<CommonAxisSettings endOnTick={false} />
<ValueAxis
title="Logarithmic Axis"
linearThreshold={-3}
type="logarithmic"
pane="top"
/>
<ValueAxis
title="Linear Axis"
pane="bottom"
/>
<Tooltip
enabled={true}
format="exponential"
/>
<Crosshair enabled={true}>
<HorizontalLine visible={false} />
<Label
visible={true}
format={crosshairFormat}
/>
</Crosshair>
<Legend visible={false} />
</Chart>
);
}
export default App;
xxxxxxxxxx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
xxxxxxxxxx
export const dataSource: ({ arg: number; val: number; })[] = [];
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) });
}
xxxxxxxxxx
window.exports = window.exports || {};
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
jsx: 'react',
},
meta: {
'react': {
'esModule': true,
},
'typescript': {
'exports': 'ts',
},
'devextreme/time_zone_utils.js': {
'esModule': true,
},
'devextreme/localization.js': {
'esModule': true,
},
'devextreme/viz/palette.js': {
'esModule': true,
},
'openai': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
'bundles:': 'bundles/',
'externals:': 'bundles/externals/',
},
defaultExtension: 'js',
map: {
'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
'react': 'npm:react@17.0.2/umd/react.development.js',
'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js',
'prop-types': 'npm:prop-types/prop-types.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign',
'devextreme': 'npm:devextreme@24.2.5/cjs',
'devextreme-react': 'npm:devextreme-react@24.2.5/cjs',
'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.5/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.54/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3',
// SystemJS plugins
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.8/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/localization/messages': {
format: 'json',
defaultExtension: 'json',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.12/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);
xxxxxxxxxx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
xxxxxxxxxx
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) });
}
xxxxxxxxxx
<html lang="en">
<head></head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
xxxxxxxxxx
#chart {
height: 450px;
}
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 property. 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.