5

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

2 Answers 2

2

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>
  )))
0

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)
1
  • doesn't help especially if some of the lines do not hold data for specific dataset from the X axis
    – Hairi
    Commented Jan 8, 2022 at 14:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.