Non-linear polygon shape (envelope) overlay

[sjjb]

I need to add an aircraft centre of gravity envelope to a cartesian chart incorporating line and scatter graphs. The desired shape is as below:

Example points

const cgEnvelope = [
    { cg: 38, weight: 39800 },
    { cg: 36, weight: 46500 },
    { cg: 36, weight: 49000 },
    { cg: 39.75, weight: 49000 },
    { cg: 45, weight: 44000 },
    { cg: 45, weight: 38400 },
    { cg: 38, weight: 39800 },
  ];

I have tried useLinePath and useAreaPath with custom path components, but the path ends up 'unfolded' in a linear fashion. I have tried changing the X axis into a string to retain the original sorting order, I have tried an ascending order, but the shape is still not right.

I had this shape working directly with Skia paths and canvas, but I would like to take advantage of the configuration provided by the package.

Is this something that is possible for Victory Charts?

[zibs]

Thanks for the question. I'm hopefully going to be able to take a look at this this week and let you know.

[sjjb]

Thanks for the response. I worked around the issue by setting the envelope coordinates in the CartesianChart data property, this set up the chart boundaries/ axis labels etc. I then added a custom child component that utilised the provided x/yScale functions to plot my own custom path using the same envelope coordinates.

Only other issue I faced was not having access to Redux Toolkit store data (useSelector etc) in the child line component, I ended up retrieving the required data in the parent and passing as a prop. Not sure if interacting with Redux in a child component should be possible?