📈 One library to rule all charts for React Native 📊
5.3.0
An update is finally here! Thank you all for the contributions and for your patience. Reminder - I'm still looking for fellow maintainers, I have very little spare time to dedicate to this project.
areas
down to children (@attitude - #316)5.2.0
x(Min|Max)
and y(Min|Max)
- deprecates grid(Min|Max)
clamp(X|Y)
to use in conjunction with above props (default false
)xScale
to StackedAreaChart along with (x|y)Accessor
cornerRadius
to progressCircleSvg
api with height
and width
instead of flex: 1
- Thanks to @DaKaZsvg
prop for each data entry! Allowing onPress among other things. -Thanks to @LRNZ09svg
prop for each area! Allowing onPress among other things
renderGradient
that is now replaces with the same gradient API as the other charts (i.e children). Not big enough to be considered a "breaking" change but it will need to be updated in order to keep displaying a gradient on the two above components(start|end)Angle
Version 5.0 is a major overhaul to the "decorator" and "extras" pattern. We've simplified the API, made it declarative and added support for rendering order.
All charts and axes now support React children. Meaning that your decorators and extras should now be placed as direct children to the chart in question. This is a breaking change but a very easy one to migrate (I migrated all storybooks in a matter of minutes), see the examples repo and read the docs for inspiration.
I want to thank everyone who is contributing by submitting issues and joining in on discussions. A special thanks to @narciero, @Sprit3Dan and @RoarRain for contributing with PRs.
Extras and Decorators have been removed
Extras and decorators should now be passed in as children to the chart in question. Each child will be called with similar arguments as before. See README for more info.
Migrating an "extra" is as simple as just moving it from the extras
array to a child of the chart.
The decorators
are nearly as easy to migrate. Create a wrapper component around
your decorator that accepts the data
prop, now you yourself can map this array and return as many decorators as you want.
renderGrid and gridProps have been removed
A grid show now be rendered through as a child. We still expose a default Grid
component as part of the API but this must no manually be added to all charts that want to display a grid.
As a result of this the following props are deprecated:
showGrid
gridProps
renderGrid
Grids are consolidate into one
Before we hade Grid.Vertical
,Grid.Horizontal
and Grid.Both
,
now we simply have Grid
with a direction
property. See README
for more info
Support for horizontal StackedBarChart
StackedBarChart now supports the prop horizontal
just as a regular BarChart. Thanks to @colin-young for this ❤️
StackedBar/AreaChart adheres to new extras
api
StackedBarChart and StackedAreaChart was still on the legacy renderExtras
pattern. It has now been migrated to the single extras
prop api.
Support for styled XAxis labels
XAxis now supports complex data argument with svg
property (just like the charts) to style each label individually. See examples repo for usage.
Thanks to @fqueiruga for this ❤️
Support for backgroundColor in ProgressCircle
You can now customize the progress "background" color
Support for strokeWidth in ProgressCircle
Customize the width of the ProgressCircle
Prettier transition in ProgressCircle from progress to background
Old implementation used to have a small cutoff between the progress and the background. Now the progress seems to be "inside" the circle instead.
The BarChart has been rewritten from the ground up. It works the same as before
but have some nice new features. The expectation on the data
props has changed to better align with the other charts APIs, see the README and examples for more info.
Complex objects
As before you can still pass in an array of just numbers, but you can now also pass in an array of complex objects! These objects can contain any data you want but you must also
pass in a yAccessor
prop to tell the chart what the actual value for the item is (same as Line/AreaChart).
The entire object will be returned to you as item
in the renderDecorator
callback, allowing for nice label rendering.
The BarChart looks for an svg
property on each entry, allowing you to set custom svg props for each bar (!!!).
The BarChart itself also takes an svg prop that will be passed to all bars (item specific svg properties will not be overriden)
All in all you should be able to do what you did before, and then some 😄 Check out the examples repo for some nice use examples
Horizontal support
horizontal={true}
, how nice is that!? 😄 Supports both the standard barChart and the grouped one (multiple data sets).
Extras support
BarChart now has first class support for the extras prop. Render a clip path or a gradient in a specific bar, up to you!
Spacing is replaced
We've replaced spacing
with spacingInner
and spacingOuter
to give more control to the user. Same default as before - 0.05
This is true for all places where spacing
was being used.
In order to have a nice YAxis along with the horizontal BarChart we have now added support for scale=d3.scaleBand
to the yAxis.
This in turn comes with added props spacingInner
and spacingOuter
to align nicely with your BarChart.
data entry supports svg
prop
PieChart has been upgraded to take the svg
prop on each data entry, allowing you to customise your PieChart even further
We've also added the valueAccessor
prop to allow you to use different dataStructures, not forcing you to name the value "value" and aligning with the other APIs.
data entry supports arc
prop
You can now customize your arcs on an individual level. Want one arc to be bigger than the rest? No problem!
Check out examples repo for examples
Due to low usage and high maintenance the WaterfallChart is removed.
The README is now more focused on the basic usage of this library. Any cool custom behavior has been moved to the examples repo. This is the go to place where you want inspiration on how to do cool things with your charts or if you've ever asked yourself "can I do this with react-native-svg-charts?"
We want to make sure that the README is concise and to the point. Here we want to explain the APIs and not much more. All charts and their APIs will still be documented here, but as an MVP.
Improve .npmignore to not bloat users projects (ignore everything that isn't necessary for the project)
This release changes some fundamentals about the API but we're confident that they're all for the better. The new arguments passed to the extras
functions opens up vast customisation options that allow us to really clean up the API. The switch to an arbitrary data structure also allows us to cater to more use cases and make sure we are future proof.
We're super excited for you guys to try out version 3!
We will soon try to tighten up the README and move most of the examples over to the react-native-svg-charts-examples repository. This repo will function as a showcase of all the cool uses of this library.
react-native-svg
's Text,
allowing for better alignment and a more streamligned api.svg
prop added to customize each <Text>
values
/dataPoints
renamed to data
to better reflect rest of component api (supports complex data)xAccessor
prop added to extract correct value from data
arrayyAccessor
prop added to extract correct value from data
arrayscale
prop added to customize scale of axisrenderExtra
is removedSeeing how renderExtra
was almost always used to just call
the function that was passed in as extras
we decided to remove this step
and simply call the extra
entry as a function directly, passing in the same props as before
In order to allow for the above change each entry in extras
must now be a function that renders a component. See documentation for examples
dataPoints
is now data
data
supports complex data structuresxAccessor
and yAccessor
added to support extraction of values from complex data structurexScale
and yScale
prop added to allow for custom scalesrenderExtra
is removed - See aboveextra
now passes line
as an extra argument property. This is the line svg path
and can be used to render e.g line shadows.extras
insteadrenderGradient
is removed and can now be rendered via extra
. See documentation for exampleshadowSvg
and shadowOffset
is now removed. Render your own shadow using `renderExtradataPoints
is now data
data
supports complex data structuresxAccessor
and yAccessor
added to support extraction of values from complex data structurexScale
and yScale
prop added to allow for custom scalesrenderExtra
is removed - See aboveextra
now passes area
and line
as extra argument property.
This is the area svg path as well as the path of line that follows the area's upper bound. See docs for example usagerenderGradient
is removed and can now be rendered via extra
. See documentation for exampleextras
for this (see docs for example)animate
default is now false
We figured opt-in is better than opt-out considering how poorly the animations are working at the moment
Due to the inherent nature of a bar chart consisting of many areas the BarChart
component has not yet been migrated to the new APIs