How might I apply the visx XYchart scale to SplitLinePath

[alicewuu]

Hi,

I am trying to scale the SplitLinePath to align with a LineSeries from the XYChart, I found that LineSeries is scaled with the getScaledValueFactory and am trying to imitate that behavior with SplitLinePath. I have tried

<g transform="translate(0)"> <SplitLinePath sampleRate={1} styles={...} segments={segments} x={d => scaleLinear({ range: [0, chartWidth], domain: [0, data.length], })(d.x) } y={d => scaleLinear({ range: [chartHeight, 0], domain: [ 0, Math.max(data.map(d => d.y || 1)), ], })(d.y) } segmentation={'x'} /> </g>
but it does not look quite right

Here is my LineSeries code for reference:
<XYChart theme={customTheme} height={chartHeight} width={chartWidth} xScale={{ type: 'linear' }} yScale={{ type: 'linear' }} margin={{ top: chartMargin, left: chartMargin, bottom: chartMargin, right: chartMargin, }} > <LineSeries dataKey="LineSeries" data={d} {...accessors} strokeWidth={2} /> </XYChart>

[williaster]

Hi @alicewuu 👋 You can easily access the XYChart from a child component using its DataContext, it would look something like this:

import React, { useContext } from "react";
import { DataContext, LineSeries, XYChart, ... } from "@visx/xychart";

function MyChart() {
  return (
    <XYChart {...props}>
      <LineSeries {...lineProps} />
      <CustomSeries />
    </XYChart>
  );
}

function CustomSeries() {
  const { xScale, yScale, ... } = useContext(DataContext);
  // use scales with `SplitLinePath`, note they may be `null` on first render
}

I think that's probably all you need to overlay a SplitLinePath? If you want the XYChart scales to account for data in your CustomSeries component, it's a bit more complicated but totally possible. This is the essence of how all the other series work, they simply invoke the registerData function with key/data/xAccessor/yAccessor/... on mount and the context computes the extent of x/y data using that info across all series which register data.