React, sorting X-axis label in Rechart in from different data sources

user_5554158 0
Viewed 815

I need help figuring how to sort X-Axis label values in ascending order in Rechart graphs. currently, the data for the chart is gotten from two sources.

Below is the code presented.

const series = [
  { name: 'SourceA: ', data: reportsFromSourceA },
  { name: 'SourceB: ', data: reportsFromSourceB },
]

const selectedCategories= [...]

 selectedCategories.map((category, i) => (
    <ResponsiveContainer height={350} width='50%' key={category}>
      <LineChart
        margin={{ top: 40, right: 30, left: 70, bottom: 5 }}
        syncId='category'
      >
        <XAxis dataKey='hour' allowDuplicatedCategory={false} />
        <YAxis
          label={{
            value: category,
            position: 'top',
            fontSize: 18,
            offset: 20,
            fontWeight: 'bold',
            fill: COLORS[i % 8]
          }}
          tickFormatter={formatUSD}
        />
        <CartesianGrid strokeDasharray='3 3' />
        <Tooltip formatter={formatUSD} />
        {series.map((s, i) => (
          <Line dataKey='rpc' stroke={COLORS[i % 2]} data={s.data[category]} name={s.name} key={s.name} />
        ))}
        <ReferenceArea y2={0} stroke='red' color='red' strokeOpacity={0.5} />
      </LineChart>
    </ResponsiveContainer>
  )))

Unsorted X-Label

recharts reactjs charts
2 Answers

I had a similar issue, but the solution is to:

  • first sort out the data coming from your database
  • or sort the entire array it by key value (in ascending or descending order)
user_91618280

The issue occurs due to some missing entries of the labels in the first data source which the second one has. The simple solution can be to create an extra data source for labels only and we'll not draw a line for that source.

A relevant sandbox example is here

The full explanation is here

The following solution can solve the issue

const labelSeries = {data: [
  {category: 01}, {category: 05}, {category: 09}, {category: 10}, {category: 11},
  {category: 12}, {category: 13}, {category: 14},{category: 15}, {category: 16},
  {category: 17}, {category: 18}, {category: 19}, {category: 20}, {category: 21},
  {category: 22}
]}

const series = [
  { name: 'SourceA: ', data: reportsFromSourceA },
  { name: 'SourceB: ', data: reportsFromSourceB },
]

const selectedCategories= [...]

 selectedCategories.map((category, i) => (
    <ResponsiveContainer height={350} width='50%' key={category}>
      <LineChart
        margin={{ top: 40, right: 30, left: 70, bottom: 5 }}
        syncId='category'
      >
        <XAxis dataKey='hour' allowDuplicatedCategory={false} />
        <YAxis
          label={{
            value: category,
            position: 'top',
            fontSize: 18,
            offset: 20,
            fontWeight: 'bold',
            fill: COLORS[i % 8]
          }}
          tickFormatter={formatUSD}
        />
        <CartesianGrid strokeDasharray='3 3' />
        <Tooltip formatter={formatUSD} />
        <Line data={labelSeries.data} /> // This line will sort the x-axis label
        {series.map((s, i) => (
          <Line dataKey='rpc' stroke={COLORS[i % 2]} data={s.data[category]} name={s.name} key={s.name} />
        ))}
        <ReferenceArea y2={0} stroke='red' color='red' strokeOpacity={0.5} />
      </LineChart>
    </ResponsiveContainer>
  )))
user_84156370
Related