JavaScript/jQuery Charts - Scatter Logarithmic Axis

In this demo, a logarithmic axis is used to visualize a set of rapidly-growing values.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

$(() => { $('#chart').dxChart({ dataSource, commonPaneSettings: { border: { visible: true, }, }, series: { type: 'scatter', valueField: 'mass', argumentField: 'name', point: { size: 20, }, }, customizePoint() { let color; let hoverStyle; switch (this.data.type) { case 'Star': color = 'red'; hoverStyle = { border: { color: 'red' } }; break; case 'Satellite': color = 'gray'; hoverStyle = { border: { color: 'gray' } }; break; default: break; } return { color, hoverStyle }; }, export: { enabled: true, }, argumentAxis: { grid: { visible: true, }, label: { rotationAngle: 20, overlappingBehavior: 'rotate', }, }, valueAxis: { type: 'logarithmic', title: 'Mass Relative to the Earth', }, title: 'Relative Masses of the Heaviest Solar System Objects', legend: { visible: false, }, tooltip: { enabled: true, }, }); });

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <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=5.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.2.3/css/dx.light.css" /> <script src="js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="chart"></div> </div> </body> </html>

#chart { height: 440px; }

const dataSource = [{ name: 'Sun', mass: 332837, type: 'Star', }, { name: 'Jupiter', mass: 317.83, type: 'Planet', }, { name: 'Saturn', mass: 95.159, type: 'Planet', }, { name: 'Uranus', mass: 14.536, type: 'Planet', }, { name: 'Neptune', mass: 17.147, type: 'Planet', }, { name: 'Earth', mass: 1, type: 'Planet', }, { name: 'Venus', mass: 0.815, type: 'Planet', }, { name: 'Mars', mass: 0.107, type: 'Planet', }, { name: 'Mercury', mass: 0.0553, type: 'Planet', }, { name: 'Moon', mass: 0.0123, type: 'Satellite', }, { name: "Europa (Jupiter's Moon)", mass: 0.00803, type: 'Satellite', }];