Comments (4)
I'm leaning toward inline styles, but with a little trepidation because it has the potential to disrupt the usual division of labor between designers and developers since inline styles can't be overridden in linked CSS stylesheets without !important
. And so designers would have to either work directly in the jsx to style the charts or use what is considered a bad CSS practice.
That said, if I understand correctly, that's the approach Facebook's designers have been using in-house for a while now (and was one of the reasons for JSX to begin with).
And for many "normal" users, I think styling the charts inside the components might even be the preferred way of working (although this would depend on the individual, of course).
In my own React work, I'm typically using inline styles. It fits in well with my overall structure, which is to create a directory for each component organized like this:
MyComponent:
view.js
controllers.js
models.js
styles.js
index.js
The index.js
is pointing to the view file, so I can just require the whole directory as a single component in Browserify. The styles.js is just a simple object -- it could just as easily be a JSON file.
So yes, I think inline styles are probably the way to go.
from react-d3.
I would lean towards passing in styles as props instead of through CSS. There's definitely more and more people doing it, including the React team: https://vimeo.com/116209150
from react-d3.
While I personally lean towards inline styles, I see the benefits of styling via CSS. d4 does a good job of adding classes to each of the elements. You can inspect the example charts and see how he did it.
I could see a hybrid approach for react-d3. You could attach the necessary classes as CSS hooks to the elements. Then you could pass in a prop that would disable the inline styles so any CSS could be respected. For example:
<LineChart data={lineData} width={400} height={200} title="Line Chart" enableCSS />
or
<LineChart data={lineData} width={400} height={200} title="Line Chart" disableInlineStyles />
Maybe this isn't the highest priority but I wanted to suggest a way to do both inline and css styling.
from react-d3.
So after lots of discussion with other devs and contributors, I agree that inline styles are the way to go, as long as we make sure to expose lots of class hooks for future designers to use for CSS styling (just as you point out is done in d4 -- a very cool project btw).
So I'm closing this issue: inline styles it is. Thanks for bringing it up for explicit discussion.
from react-d3.
Related Issues (20)
- Failed propType: Invalid prop `width` of type String supplied to LineChart HOT 3
- LineChart width proptype warning
- Vertical Labels on BarChart (transform / textAnchor) HOT 2
- colors HOT 5
- Building in Accessible View
- label for plots in graph
- How to show tooltips in lineChart? HOT 2
- How do I shrink(or expand) PieChart? HOT 1
- does it have wordcloud? HOT 1
- Warning React.__spread is deprecated HOT 1
- using dates in linechart as x axis not working
- examples on github pages do not escape viewBoxObject correctly HOT 1
- WebStorm React d3 library force()
- Set AreaChart fill color
- Line chart format Date in x axis HOT 1
- Installing react-d3 HOT 1
- PropTypes Support for React v^15.5.0 HOT 3
- React 16 support HOT 1
- TypeError: Cannot read property 'string' of undefined HOT 1
- Can't create charts with this package
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-d3.