Possibility of multiple x / y axes

[mirshko]

It would be nice if it was possible to have multiple x / y axes.

Especially when it comes to composing charts with differing scales.

[rokotyan]

@mirshko Currently we've no plans for adding dual-axis support since they can easily be misused.

However, if you really need to have a dual axis chart, you can achieve that by overlaying two XY Containers with manual margin configuration (autoMargin set to false, margin set to accommodate your axes). Here's a React example:

   ...
  const margin = { left: 60, right: 60, top: 40, bottom: 40 }
  const style = { position: 'absolute', top: 0, left: 0, width: '100%', height: '40vh' }
  return (<>
    <VisXYContainer data={data} margin={margin} autoMargin={false} style={style}>
      <VisArea x={d => d.x} y={d => d.y} />
      <VisAxis type='x' />
      <VisAxis type='y' />
    </VisXYContainer>
    <VisXYContainer data={data} margin={margin} autoMargin={false} style={{ ...style, '--vis-axis-tick-label-color': '#FF6B7E' }}>
      <VisLine x={d => d.x} y={d => d.y2} color= '#FF6B7E' />
      <VisAxis type='y' position='right' gridLine={false} />
    </VisXYContainer>
  </>)

[mirshko]

Okay awesome this helps a ton!

Good to know, on a sidenote, when using excludeFromDomainCalculation would it be possible to set that domain's separately? For example if I have one line that I want to be the main source of data, but a complimentary bar for each point in the line, but that bar's domain is like 1000 times the domain of the line, I want to exclude the bar's data from the domain calculation, that prop works however the bars then blow way far above the roof of the chart.

Im not sure if there's a way to handle the domain or max height of the excluded chart element.

[rokotyan]

@mirshko It's possible to set the domain range explicitly and also define specific domain constraints in XY Container https://unovis.dev/docs/containers/XY_Container#domain. Is it something you're looking for?

[mirshko]

Was more thinking of lowering the XY domain constraint for the nested StackedBar inside of my main Line chart.

[rokotyan]

I see, you want the bars to be presented with a different scale, but still have that component within the same XY Container? You can probably achieve this by modifying the y-accessor function of the bar chart component, i.e. dividing the data value by some constant:
<VisStackedBar ... y={d => d.value / 1000000000} />

[mirshko]

Ahh perfect! This helped a lot! Thanks for all the help on this!

…

On Wed, Aug 23, 2023 at 10:14 PM Nikita Rokotyan ***@***.***> wrote: I see, you want the bars to be presented with a different scale, but still have that component within the same XY Container? You can probably achieve this by modifying the y-accessor function of the bar chart component, i.e. dividing the data value by some constant: <VisStackedBar ... y={d => d.value / 1000000000} /> — Reply to this email directly, view it on GitHub <#261 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AB55T3BPFWJZN25M7ZC6K7TXWZQATANCNFSM6AAAAAA3VU2MEE> . You are receiving this because you were mentioned.Message ID: ***@***.***>