Logarithmic Axis in React Chart

25 Aug 202624 minutes to read

The logarithmic axis uses a logarithmic scale and is particularly useful for visualizing data that spans a wide range of values. It effectively represents datasets that include both very small values (for example, 10-6) and very large values (for example, 106) within the same chart, improving readability and enabling comparison.

Note: To use the logarithmic axis, inject Logarithmic via <Inject services={[Logarithmic, …]} /> and set the valueType property of the axis to Logarithmic. The default logarithmic base is 10, and the axis requires all data values to be positive; zero or negative values will not be rendered.

To get started quickly with React Logarithmic Axis, you can check out this video:

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, DateTime, Logarithmic, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { logData } from './datasource';
function App() {
    const primaryXAxis = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' };
    const primaryYAxis = { valueType: 'Logarithmic', title: 'Profit' };
    return <ChartComponent id='charts' primaryXAxis={primaryXAxis} primaryYAxis={primaryYAxis} title='Product X Growth [1995-2005]'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Logarithmic, LineSeries, DateTime]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={logData} xName='x' yName='y' name='Product X' type='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
ColumnSeries, Legend, DateTime, Logarithmic, Tooltip, DataLabel, LineSeries}
from'@syncfusion/ej2-react-charts';
import { logData } from './datasource';

function App() {
  const primaryXAxis: AxisModel = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' };
  const primaryYAxis: AxisModel = { valueType: 'Logarithmic', title: 'Profit' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryXAxis}
      primaryYAxis={primaryYAxis}
      title='Product X Growth [1995-2005]'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Logarithmic, LineSeries, DateTime]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={logData} xName='x' yName='y' name='Product X' type='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let logData = [
    { x: new Date(1995, 0, 1), y: 80 }, 
    { x: new Date(1996, 0, 1), y: 200 },
    { x: new Date(1997, 0, 1), y: 400 }, 
    { x: new Date(1998, 0, 1), y: 600 },
    { x: new Date(1999, 0, 1), y: 700 }, 
    { x: new Date(2000, 0, 1), y: 1400 },
    { x: new Date(2001, 0, 1), y: 2000 }, 
    { x: new Date(2002, 0, 1), y: 4000 },
    { x: new Date(2003, 0, 1), y: 6000 }, 
    { x: new Date(2004, 0, 1), y: 8000 },
    { x: new Date(2005, 0, 1), y: 11000 }
];
export let logData: Object[] = [
    { x: new Date(1995, 0, 1), y: 80 }, 
    { x: new Date(1996, 0, 1), y: 200 },
    { x: new Date(1997, 0, 1), y: 400 }, 
    { x: new Date(1998, 0, 1), y: 600 },
    { x: new Date(1999, 0, 1), y: 700 }, 
    { x: new Date(2000, 0, 1), y: 1400 },
    { x: new Date(2001, 0, 1), y: 2000 }, 
    { x: new Date(2002, 0, 1), y: 4000 },
    { x: new Date(2003, 0, 1), y: 6000 }, 
    { x: new Date(2004, 0, 1), y: 8000 },
    { x: new Date(2005, 0, 1), y: 11000 }
];

Range

The range of the logarithmic axis is calculated automatically based on the provided data. This automatic calculation ensures that all data points are visible within the chart area. Alternatively, the axis range can be customized explicitly using the minimum, maximum, and interval properties.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, DateTime, Logarithmic, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { logData } from './datasource';
function App() {
    const primaryXAxis = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' };
    const primaryYAxis = { valueType: 'Logarithmic', title: 'Profit', minimum: 10, maximum: 10000 };
    return <ChartComponent id='charts' primaryXAxis={primaryXAxis} primaryYAxis={primaryYAxis} title='Product X Growth [1995-2005]'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Logarithmic, LineSeries, DateTime]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={logData} xName='x' yName='y' name='Product X' type='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
ColumnSeries, Legend, DateTime, Logarithmic, Tooltip, DataLabel, LineSeries}
from'@syncfusion/ej2-react-charts';
import { logData } from './datasource';
function App() {

  const primaryXAxis: AxisModel = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' };
  const primaryYAxis: AxisModel = { valueType: 'Logarithmic', title: 'Profit', minimum: 10, maximum: 10000 };

  return <ChartComponent id='charts'
      primaryXAxis={primaryXAxis}
      primaryYAxis={primaryYAxis}
      title='Product X Growth [1995-2005]'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Logarithmic, LineSeries, DateTime]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={logData} xName='x' yName='y' name='Product X' type='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let logData = [
    { x: new Date(1995, 0, 1), y: 80 }, 
    { x: new Date(1996, 0, 1), y: 200 },
    { x: new Date(1997, 0, 1), y: 400 }, 
    { x: new Date(1998, 0, 1), y: 600 },
    { x: new Date(1999, 0, 1), y: 700 }, 
    { x: new Date(2000, 0, 1), y: 1400 },
    { x: new Date(2001, 0, 1), y: 2000 }, 
    { x: new Date(2002, 0, 1), y: 4000 },
    { x: new Date(2003, 0, 1), y: 6000 }, 
    { x: new Date(2004, 0, 1), y: 8000 },
    { x: new Date(2005, 0, 1), y: 11000 }
];
export let logData: Object[] = [
    { x: new Date(1995, 0, 1), y: 80 }, 
    { x: new Date(1996, 0, 1), y: 200 },
    { x: new Date(1997, 0, 1), y: 400 }, 
    { x: new Date(1998, 0, 1), y: 600 },
    { x: new Date(1999, 0, 1), y: 700 }, 
    { x: new Date(2000, 0, 1), y: 1400 },
    { x: new Date(2001, 0, 1), y: 2000 }, 
    { x: new Date(2002, 0, 1), y: 4000 },
    { x: new Date(2003, 0, 1), y: 6000 }, 
    { x: new Date(2004, 0, 1), y: 8000 },
    { x: new Date(2005, 0, 1), y: 11000 }
];

Logarithmic base

The logarithmic base of the axis can be customized using the logBase property. This property determines how the axis values are distributed along the scale. The base must be a value greater than 1; the default is 10.
For example, when the logarithmic base is set to 2, the axis values follow the sequence 2-2, 2-1, 20, 21, 22, and so on.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, DateTime, Logarithmic, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { logData } from './datasource';
function App() {
    const primaryXAxis = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' };
    const primaryYAxis = { valueType: 'Logarithmic', title: 'Profit', minimum: 10, maximum: 10000, logBase: 2 };
    return <ChartComponent id='charts' primaryXAxis={primaryXAxis} primaryYAxis={primaryYAxis} title='Product X Growth [1995-2005]'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Logarithmic, LineSeries, DateTime]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={logData} xName='x' yName='y' name='Product X' type='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
ColumnSeries, Legend, DateTime, Logarithmic, Tooltip, DataLabel, LineSeries}
from'@syncfusion/ej2-react-charts';
import { logData } from './datasource';
function App() {

  const primaryXAxis: AxisModel = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' };
  const primaryYAxis: AxisModel = { valueType: 'Logarithmic', title: 'Profit', minimum: 10, maximum: 10000, logBase: 2 };

  return <ChartComponent id='charts'
      primaryXAxis={primaryXAxis}
      primaryYAxis={primaryYAxis}
      title='Product X Growth [1995-2005]'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Logarithmic, LineSeries, DateTime]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={logData} xName='x' yName='y' name='Product X' type='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let logData = [
    { x: new Date(1995, 0, 1), y: 80 }, 
    { x: new Date(1996, 0, 1), y: 200 },
    { x: new Date(1997, 0, 1), y: 400 }, 
    { x: new Date(1998, 0, 1), y: 600 },
    { x: new Date(1999, 0, 1), y: 700 }, 
    { x: new Date(2000, 0, 1), y: 1400 },
    { x: new Date(2001, 0, 1), y: 2000 }, 
    { x: new Date(2002, 0, 1), y: 4000 },
    { x: new Date(2003, 0, 1), y: 6000 }, 
    { x: new Date(2004, 0, 1), y: 8000 },
    { x: new Date(2005, 0, 1), y: 11000 }
];
export let logData: Object[] = [
    { x: new Date(1995, 0, 1), y: 80 }, 
    { x: new Date(1996, 0, 1), y: 200 },
    { x: new Date(1997, 0, 1), y: 400 }, 
    { x: new Date(1998, 0, 1), y: 600 },
    { x: new Date(1999, 0, 1), y: 700 }, 
    { x: new Date(2000, 0, 1), y: 1400 },
    { x: new Date(2001, 0, 1), y: 2000 }, 
    { x: new Date(2002, 0, 1), y: 4000 },
    { x: new Date(2003, 0, 1), y: 6000 }, 
    { x: new Date(2004, 0, 1), y: 8000 },
    { x: new Date(2005, 0, 1), y: 11000 }
];

Logarithmic interval

The spacing between logarithmic axis labels can be controlled using the interval property (the same property used in the Range section). This property defines the step size between consecutive logarithmic values.
For example, when the logarithmic base is 10 and the interval is set to 2, the axis labels are placed at values such as 102, 104, and 106. The default value of the interval is 1.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, DateTime, Logarithmic, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { logData } from './datasource';
function App() {
    const primaryXAxis = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' };
    const primaryYAxis = { valueType: 'Logarithmic', title: 'Profit', minimum: 10, maximum: 10000, interval: 2 };
    return <ChartComponent id='charts' primaryXAxis={primaryXAxis} primaryYAxis={primaryYAxis} title='Product X Growth [1995-2005]'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Logarithmic, LineSeries, DateTime]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={logData} xName='x' yName='y' name='Product X' type='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
ColumnSeries, Legend, DateTime, Logarithmic, Tooltip, DataLabel, LineSeries}
from'@syncfusion/ej2-react-charts';
import { logData } from './datasource';
function App() {

  const primaryXAxis: AxisModel = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' };
  const primaryYAxis: AxisModel = { valueType: 'Logarithmic', title: 'Profit', minimum: 10, maximum: 10000, interval: 2 };

  return <ChartComponent id='charts'
      primaryXAxis={primaryXAxis}
      primaryYAxis={primaryYAxis}
      title='Product X Growth [1995-2005]'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Logarithmic, LineSeries, DateTime]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={logData} xName='x' yName='y' name='Product X' type='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let logData = [
    { x: new Date(1995, 0, 1), y: 80 }, 
    { x: new Date(1996, 0, 1), y: 200 },
    { x: new Date(1997, 0, 1), y: 400 }, 
    { x: new Date(1998, 0, 1), y: 600 },
    { x: new Date(1999, 0, 1), y: 700 }, 
    { x: new Date(2000, 0, 1), y: 1400 },
    { x: new Date(2001, 0, 1), y: 2000 }, 
    { x: new Date(2002, 0, 1), y: 4000 },
    { x: new Date(2003, 0, 1), y: 6000 }, 
    { x: new Date(2004, 0, 1), y: 8000 },
    { x: new Date(2005, 0, 1), y: 11000 }
];
export let logData: Object[] = [
    { x: new Date(1995, 0, 1), y: 80 }, 
    { x: new Date(1996, 0, 1), y: 200 },
    { x: new Date(1997, 0, 1), y: 400 }, 
    { x: new Date(1998, 0, 1), y: 600 },
    { x: new Date(1999, 0, 1), y: 700 }, 
    { x: new Date(2000, 0, 1), y: 1400 },
    { x: new Date(2001, 0, 1), y: 2000 }, 
    { x: new Date(2002, 0, 1), y: 4000 },
    { x: new Date(2003, 0, 1), y: 6000 }, 
    { x: new Date(2004, 0, 1), y: 8000 },
    { x: new Date(2005, 0, 1), y: 11000 }
];

See also