Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Muti series and Y Axes, how to use map and scale

See original GitHub issue

Hi, I have 2 line series and 2 Y axes, but I don’t know how to bind each line series to different Y axes

Here is my code

<XYPlot
    width={1000}
    height={600}>
    <HorizontalGridLines />
    <LineSeries data={this.props.temperature} />
    <XAxis title="Time" tickFormat={tickFormatter} />
    <YAxis title="Temperature" />
    <LineSeries data={this.props.pressure} />
    <YAxis title="Pressure" orientation="right" />
</XYPlot>

Issue Analytics

State:
Created 6 years ago
Comments:12 (4 by maintainers)

Top GitHub Comments

7reactions

mindjuicecommented, Sep 28, 2017

Instead of rescaling all my data, I just made two graphs and positioned them over top of each other with one YAxis on the left and the other YAxis on the right. Only one has an XAxis. Essentially the following:

<div style={{ position: 'relative' }}>
  <div>
    <XYPlot height={400} width={730} margin={{ left: 90, right: 90, bottom: 70 }}>
      <VerticalGridLines />
      <HorizontalGridLines />
      <XAxis />
      <YAxis />
      <LineSeries data={this.props.data1} color="green" />
    </XYPlot>
  </div>
  <div style={{ position: 'absolute', top: 0 }}>
    <XYPlot height={400} width={730} margin={{ left: 90, right: 90, bottom: 70 }}>
      <YAxis orientation="right"/>
      <LineSeries data={this.props.data2} color="blue"/>
    </XYPlot>
  </div>
</div>

You can see it live here: https://goo.gl/o8YC7Y

3reactions

octaviolagecommented, Sep 18, 2021

@ayepRahman I made an example following @gerardvanderput tip

import React from 'react';

import { XYPlot, XAxis, YAxis, VerticalBarSeries, LineSeries } from 'react-vis';
import 'react-vis/dist/style.css';

export const Example = (props) => {
  
  // Line data
  const avgPriceMonthly = [
    {x: 'June', y: 45},
    {x: 'July', y: 24},
    {x: 'August', y: 30},
    {x: 'September', y: 40},
    {x: 'October', y: 33}
  ]

  // Bar data
  const monthlySales = [
    {x: 'June', y: 1200},
    {x: 'July', y: 650},
    {x: 'August', y: 1100},
    {x: 'September', y: 750},
    {x: 'October', y: 1470}
  ]

  // Function to convert scale to another axis Y
  const handleCustomScale = (tick) => { // Can be add a customStart parameter to sum with result
    //                                     if scales doesn't start at same point
    const maxSalesValue = Math.max(...monthlySales.map(item => item.y)); // Get max value from sales data
    const maxPriceValue = Math.max(...avgPriceMonthly.map(item => item.y)); // Get max value from prices data
    const factor = maxSalesValue / maxPriceValue; // Calculate factor to convert sales tick to price tick
    return Math.round(tick / factor); // Return result as a integer
  }

  return (
    <XYPlot 
      margin={{bottom: 70, left: 70, right: 70}} // Need to add margin to make space for the scale
      xType="ordinal" 
      width={600} height={300}>
      <VerticalBarSeries
        barWidth={0.5}
        data={monthlySales}
        color='#15b7f7'
      />
      <LineSeries
        yDomain={[0, Math.max(...avgPriceMonthly.map(item => item.y))]} // Get the max value of the line data
        data={avgPriceMonthly}
        color='#df4747'
        />
      <XAxis tickLabelAngle={-45} />
      <YAxis /> 
      <YAxis orientation='right' tickTotal={5} tickFormat={v => handleCustomScale(v)} /> 
    </XYPlot>
  );
}

export default Example;

Result is:

<div>