change center of VueUiQuadrant graph

[elnerto]

Hello,
I love this library.
I wanted to know if I can move the axes in the VueUiQuadrant graph, so that the center is not at (0,0)
For example, the center is at (10,20)
to graph only positive values

Thank you very much and greetings to all

[graphieros]

Hi @elnerto !
Thank you very much :)

The purpose of a quadrant chart is to position datapoints on 4 sides, to identify the quality of a datapoint, and have it classified on one of 4 sides.

The intersection of both axes is derived from the dataset, it is only 0,0 if extremes are inverse (-n , n). If all your datapoints are positive on both x and y, they are all classified in the same portion of the quadrant, that's what it's designed to do.

I think you might consider using VueUiScatter for your use case. The scatter chart's axes will behave as you expect.

Cheers, and thanks for trying out the lib :)

[elnerto]

Thank you,
Instead of modifying the axes, offset the XY data,
add the true data MyDataX, MyDataY and modify the custom tooltip
to show them to the user

I love this quadrant graph
Thanks a lot

customFormat: ({ seriesIndex, datapoint, series, config }) => {
const content = "My custom content";
return <div><span id="Q" >Quantity sold</span> <span id="$" >${datapoint.MyDataX}</span></div><div><span id="Q" >Sales amount</span> <span id="$" >${datapoint.MyDataY}</span></div>
}
...
"series": [
{
"name": "IBM",
"MyDataX": 3300,
"MyDataY": 30000,
"x": -2,
"y": -1
}

[graphieros]

Very cool workaround !