Could not draw x-axis scale in Logarithmic format

[rajanbabu033]

Hi,
I'm using recharts and would like to render x-axis scale for line chart as 100, 1K, 10K.But it is rendering as 200, 300, 400, 600, 800, 10000.......8000

Actual Chart:
X-axis scale is rendered as 200,300,400,600,800,1000......8000 refer below screenshot.

Expected Something like below chart

Sample Code used to Draw the chart
<LineChart width={600} height={500} data={curveData} margin={{ top: 50, right: 20, bottom: 50, left: 20 }}>



<XAxis dataKey='frequency' scale={'log'}>


<YAxis type='number' domain={[minYAxisScale, maxYAxisScale]} tickCount={10} minTickGap={50}>

I try to use scale as log/pow. But does not help. Kindly provide suggestion to achieve this.

[ckifer]

Your XAxis defaults to be categorical. Try changing to type="number"

Also if you could throw this into a sandbox it would be easier to help with

[rajanbabu033]

Hi,
Thanks for your reply.
Code is Placed in github : https://github.com/rajanbabu033/rajanrepository.git

I have provided complete code below. Would like to show only 100, 1K, 10K in x-axis scale with Logarithmic scale Type.
File-1 : LineChartRenderer.tsx

import React, { ReactElement } from 'react';
import { LineChart, Line, CartesianGrid, XAxis, YAxis, Tooltip, Label, Legend, ResponsiveContainer } from 'recharts';
import getChartMockData from './ChartMockData';

export const LineChartRenderer = (): ReactElement => {
  const curveData = getChartMockData();
  const minYAxisScale = 70;
  const maxYAxisScale = 160;
  const minXAxisScale = 100;
  const maxXAxisScale = 10000;

  return (
    <>      
      <ResponsiveContainer width={'30%'} height={400}>
        <LineChart width={600} height={500} data={curveData} margin={{ top: 50, right: 20, bottom: 50, left: 20 }}>

          <Line type='monotone' dot={false} dataKey='FogCurve' stroke='purple' strokeWidth={1} />
          <Line type='monotone' dot={false} dataKey='OSPL90Curve' stroke='blue' strokeWidth={1} />

          <CartesianGrid stroke='#ccc' strokeDasharray='5 5' />

          <XAxis dataKey={'frequency'} type='number' domain={[minXAxisScale, maxXAxisScale]} scale='log'>
            <Label value='Hz' offset={0} position='insideBottomRight' />
          </XAxis>
          <YAxis type='number' domain={[minYAxisScale, maxYAxisScale]} tickCount={4}>
            <Label value='dB SPL' offset={-15} position='insideTopLeft' />
          </YAxis>
          <Tooltip />
          <Legend />
        </LineChart>
      </ResponsiveContainer>
    </>
  );
};

File-2 : ChartMockData.tsx

import React from 'react';

const ChartMockData = [
  { frequency: '100' },
  { frequency: '200', FogCurve: 113.91, OSPL90Curve: 123.91 },
  { frequency: '300', FogCurve: 114.25, OSPL90Curve: 124.25 },
  { frequency: '400', FogCurve: 114.74, OSPL90Curve: 124.74 },
  { frequency: '500', FogCurve: 115.49, OSPL90Curve: 125.49 },
  { frequency: '600', FogCurve: 116.66, OSPL90Curve: 126.66 },
  { frequency: '700', FogCurve: 118.36, OSPL90Curve: 128.36 },
  { frequency: '800', FogCurve: 120.63, OSPL90Curve: 130.63 },
  { frequency: '900', FogCurve: 123.47, OSPL90Curve: 133.47 },
  { frequency: '1000', FogCurve: 126.99, OSPL90Curve: 136.99 },
  { frequency: '1100', FogCurve: 130.35, OSPL90Curve: 136.99 },
  { frequency: '1200', FogCurve: 132.24, OSPL90Curve: 136.99 },
  { frequency: '1300', FogCurve: 131.6, OSPL90Curve: 141.6 },
  { frequency: '1400', FogCurve: 129.91, OSPL90Curve: 139.91 },
  { frequency: '1500', FogCurve: 128.5, OSPL90Curve: 138.5 },
  { frequency: '1600', FogCurve: 127.72, OSPL90Curve: 137.72 },
  { frequency: '1700', FogCurve: 127.45, OSPL90Curve: 137.45 },
  { frequency: '1800', FogCurve: 127.6, OSPL90Curve: 137.6 },
  { frequency: '1900', FogCurve: 128.08, OSPL90Curve: 138.08 },
  { frequency: '2000', FogCurve: 128.99, OSPL90Curve: 138.68 },
  { frequency: '2100', FogCurve: 128.57, OSPL90Curve: 138.99 },
  { frequency: '2200', FogCurve: 127.42, OSPL90Curve: 138.99 },
  { frequency: '2300', FogCurve: 126.11, OSPL90Curve: 138.99 },
  { frequency: '2400', FogCurve: 124.53, OSPL90Curve: 138.99 },
  { frequency: '2500', FogCurve: 123.34, OSPL90Curve: 138.99 },
  { frequency: '2600', FogCurve: 122.32, OSPL90Curve: 138.99 },
  { frequency: '2700', FogCurve: 121.5, OSPL90Curve: 138.99 },
  { frequency: '2800', FogCurve: 121.03, OSPL90Curve: 138.99 },
  { frequency: '2900', FogCurve: 120.91, OSPL90Curve: 138.99 },
  { frequency: '3000', FogCurve: 128.99, OSPL90Curve: 138.99 },
  { frequency: '3100', FogCurve: 121.2, OSPL90Curve: 131.2 },
  { frequency: '3200', FogCurve: 121.74, OSPL90Curve: 131.74 },
  { frequency: '3300', FogCurve: 122.67, OSPL90Curve: 132.67 },
  { frequency: '3400', FogCurve: 124.2, OSPL90Curve: 134.2 },
  { frequency: '3500', FogCurve: 125.9, OSPL90Curve: 135.9 },
  { frequency: '3600', FogCurve: 127.55, OSPL90Curve: 137.55 },
  { frequency: '3700', FogCurve: 127.92, OSPL90Curve: 137.92 },
  { frequency: '3800', FogCurve: 126.4, OSPL90Curve: 136.4 },
  { frequency: '3900', FogCurve: 124.83, OSPL90Curve: 134.83 },
  { frequency: '4000', FogCurve: 123.08, OSPL90Curve: 133.08 },
  { frequency: '4100', FogCurve: 122, OSPL90Curve: 132 },
  { frequency: '4200', FogCurve: 121.64, OSPL90Curve: 131.64 },
  { frequency: '4300', FogCurve: 121.72, OSPL90Curve: 131.72 },
  { frequency: '4400', FogCurve: 122.18, OSPL90Curve: 132.18 },
  { frequency: '4500', FogCurve: 122.89, OSPL90Curve: 132.89 },
  { frequency: '4600', FogCurve: 123.99, OSPL90Curve: 133.99 },
  { frequency: '4700', FogCurve: 123.96, OSPL90Curve: 133.96 },
  { frequency: '4800', FogCurve: 122.68, OSPL90Curve: 132.68 },
  { frequency: '4900', FogCurve: 120.64, OSPL90Curve: 130.64 },
  { frequency: '5000', FogCurve: 118.47, OSPL90Curve: 128.47 },
  { frequency: '5100', FogCurve: 116.6, OSPL90Curve: 126.6 },
  { frequency: '5200', FogCurve: 115.12, OSPL90Curve: 125.12 },
  { frequency: '5300', FogCurve: 114.04, OSPL90Curve: 124.04 },
  { frequency: '5400', FogCurve: 113.5, OSPL90Curve: 123.5 },
  { frequency: '5500', FogCurve: 113.41, OSPL90Curve: 123.41 },
  { frequency: '5600', FogCurve: 113.87, OSPL90Curve: 123.87 },
  { frequency: '5800', FogCurve: 116.29, OSPL90Curve: 126.29 },
  { frequency: '5900', FogCurve: 118.15, OSPL90Curve: 128.15 },
  { frequency: '6000', FogCurve: 117.65, OSPL90Curve: 127.65 },
  { frequency: '6300', FogCurve: 109.78, OSPL90Curve: 119.78 },
  { frequency: '6500', FogCurve: 105.76, OSPL90Curve: 115.76 },
  { frequency: '6700', FogCurve: 104.55, OSPL90Curve: 114.55 },
  { frequency: '7100', FogCurve: 106.1, OSPL90Curve: 116.1 },
  { frequency: '7500', FogCurve: 97.05, OSPL90Curve: 107.05 },
  { frequency: '8000', FogCurve: 89.31, OSPL90Curve: 99.31 },
  { frequency: '10000' },
];

export default function getChartMockData() {
  return ChartMockData;
}

[ckifer]

Is this what you want?

[ckifer]

  const TICKS = [100, 1000, 10000];
...
          <XAxis 
            dataKey={'frequency'} 
            type='number' 
            domain={[minXAxisScale, maxXAxisScale]} 
            scale='log' 
            ticks={TICKS} 
            tickFormatter={(value) => { 
              if (value >= 1000) { 
                return `${value / 1000}k`
              } 
              else return value 
            }}
           >

[rajanbabu033]

Great. It helps. Thanks for the reply with working code.