Comments (11)
How would I use the rect-series if I need to set a custom bar width, but my x axis labels are strings?
My data:
[
{
"x": "Label 1",
"y": 0.3
},
{
"x": "Label 2",
"y": 0.2
},
{
"x": "Label 3",
"y": 0.7
}
]
It seems to be impossible to define an x0
if my x axis labels are not numbers.
Therefore I think setting a custom width on the vertical bar chart would be a useful feature.
from react-vis.
I managed to "hack" the rect-series to draw a vertical bar chart with custom column width and strings as x-axis labels.
Below is my example code, maybe it helps somebody:
const values = [
{"y": 0.9},
{"y": 0.3},
{"y": 0.5}
]
const labels = [
'Label 1',
'Label 2',
'Label 3'
]
class BarChartCustomBarWidth extends React.Component {
// by tweaking this value you can resize the columns
// 1 - columns touch each other
// 0 - columns are invisible
columnWidth = 0.5
transformDataToRectSeries(raw) {
const transformed = raw.map((el, i) => {
el.x0 = (i + 1) - this.columnWidth / 2
el.x = (i + 1) + this.columnWidth / 2
return el
})
transformed.unshift({x: 0.5, y: 0}) // fake data point, enables margin between y-axis and first column
transformed.push({x: 3.5, y: 0}) // fake data point, enables margin between last column and chart end
return transformed
}
render() {
return (
<XYPlot width={500} height={400}>
<XAxis
tickFormat={(v,i) => labels[i]}
tickValues={[1, 2, 3]}
/>
<YAxis/>
<VerticalRectSeries
data={this.transformDataToRectSeries(values)}
/>
</XYPlot>
)
}
}
ReactDOM.render(<BarChartCustomBarWidth />, document.getElementById('app'));
from react-vis.
+1
from react-vis.
+1
from react-vis.
+1
from react-vis.
+1
from react-vis.
@chrisirhc This is addressed by rect-series, so i'm going to close this issue. Feel free to re-open if you feel different
from react-vis.
I also would find it useful to limit the width of a bar. When working with ordinal data, I don't see how we can use a rect-series
from react-vis.
@sprzedwojski nice work around! If you feel motivated I would gladly accept a PR adding custom width functionality. I think it would be reasonable to add an optional width prop bar series. In order to complete this work you also need to make sure an associated accessor (getWidth) works well, make tests etc.
from react-vis.
@sprzedwojski Great workaround! However, while it does allow you to control the width of the bars, it doesn't allow you to set the width. If the width of your bar chart changes, the width of the bars will scale with it. A better API would allow you to set the point-width of each bar regardless of chart width. Will see if I can come up with something based on your fiddle.
from react-vis.
Tried all day -- couldn't hack it :( best of luck to all who enter here looking for fixed width bars. Here be dragons.
from react-vis.
Related Issues (20)
- Arc series graph moving around HOT 1
- FlexibleXYPlot Warning: componentWillReceiveProps has been renamed, and is not recommended for use
- npm ERR! peer react@"15.3.0 - 16.x" from [email protected] with NPM 7 or above install HOT 10
- X-Axis shows rgb values instead of actual label
- Stroke color in CSS
- Is this project abandoned? HOT 3
- Some heat map box does not show tooltip on react-vis.
- How to make this library work with non ES6 app?
- Position labels in radial charts HOT 3
- Option to replace react-motion with other animcation libraries
- Warning: componentWillReceiveProps has been renamed, and is not recommended for use. HOT 1
- Unable to show separate tooltips for area series and custom svg series
- Security Vulnerability in d3-color HOT 1
- Proposal: Archive this repository HOT 9
- Unable To Resolve Module In 1.11.11 HOT 9
- Cannot read properties of null (reading 'offsetHeight')
- Easy way to reduce transitive dependencies
- HeatmapSeries is breaking after upgrading to version 1.12.1 HOT 3
- How to apply stroke only on the top of AreaSeries
- React 18 support HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-vis.