Inverted Y-Axis Does Not Handle Positive Values Correctly
See original GitHub issueDescription
When you enable inverted
on an axis, positive values mess up the chart rendering bars from the bottom of the graph instead of from “zero”.
Inverted:
Not Inverted:
Obviously we basically expect the “not inverted” chart, but mirrored on the x-axis, instead we’re getting… whatever is happening on the inverted image (it’s drawing “up” from the “max” (now “min”) y-value to the value of the series)
Steps to check or reproduce
Given this example: https://naver.github.io/billboard.js/demo/#Chart.BarChart
Using the following javascript:
// for ESM environment, need to import modules as:
// import bb, {bar} from "billboard.js"
var chart = bb.generate({
axis: { y: { inverted: true } },
data: {
columns: [
["data1", 30, 200, 100, 400, 150, 250],
["data2", 130, 100, 140, 200, 150, 50]
],
type: "bar", // for ESM specify as: bar()
},
bar: {
width: {
ratio: 0.5
}
},
bindto: "#barChart"
});
setTimeout(function() {
chart.load({
columns: [
["data3", 130, -150, 200, 300, -200, 100]
]
});
}, 1000);
Issue Analytics
- State:
- Created 2 years ago
- Comments:7 (3 by maintainers)
Top Results From Across the Web
Why does positive Y axis goes down, positive X axis go right?
Thus, when you add values to y axis the object go towards bottom and when subtract values the object goes upwards. In Android...
Read more >How do I reverse the y-axis in image? - MATLAB Answers
The image function reverses the y-axis so I wanted to reverse it to correct it. I know it has something to do with...
Read more >How to invert axis in Excel - Excelchat - Got It AI
The first thing we have to flip x and y axis is to select the Format Axis button. To do this, we have...
Read more >y-axis is short · Issue #671 · plouc/nivo - GitHub
I've been using a workaround where I track the max values in my data for different modes (grouped/stacked for Bar, stacked/not stacked for...
Read more >Create a Waterfall Chart with Negative Values Crossing ...
When you create a waterfall chart, negative values should cross the horizontal axis when appropriate so really show the visual impact of ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Even more awesome! I appreciate it a lot.
@StrangeWill, I’ll be trying patch soon and releasing it. Probably within this week.