-
Notifications
You must be signed in to change notification settings - Fork 105
change center of VueUiQuadrant graph #53
-
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
Beta Was this translation helpful? Give feedback.
All reactions
-
❤️ 1
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 :)
Replies: 2 comments 1 reply
-
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 :)
Beta Was this translation helpful? Give feedback.
All reactions
-
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
}
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 1
-
Very cool workaround !
Beta Was this translation helpful? Give feedback.