π One library to rule all charts for React Native π
MIT License
Bot releases are hidden (Show)
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)Published by JesperLekland over 6 years ago
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
Published by JesperLekland over 6 years ago
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
(start|end)Angle
Published by JesperLekland over 6 years ago
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
Published by JesperLekland over 6 years ago
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.
Published by JesperLekland over 6 years ago
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.
Published by JesperLekland over 6 years ago
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.
Published by JesperLekland over 6 years ago
Improve .npmignore to not bloat users projects (ignore everything that isn't necessary for the project)
Published by JesperLekland over 6 years ago
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,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 pathextras
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.renderGradient
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
Published by JesperLekland over 6 years ago
AreaChart
Added the start
prop to allow users to tweak where their area starts
Published by JesperLekland over 6 years ago
Fix bug where StackedAreaChart wouldn't render all data points
Published by JesperLekland over 6 years ago
You can now use a gradient on the Line
of an AreaChart
. See the gradient
part of the README for more information
Published by JesperLekland over 6 years ago
Previously the gridMin/Max had a default value of 0
. This caused charts with dataRanges above zero to always adhere to the a range beginning from zero which of course isn't wanted. The same was true for the YAxis.
Just as gridMin/Max
, the YAxis
wrongly assumed that 0
should be a part of the dataRange, this is now remedied. To further help users customise their charts we introduced the min
and max
prop, which work exactly the same as the gridMin
& gridMax
prop on the charts. This means that you no longer haft the alter the dataPoints
prop to get your wanted behaviour π
Published by JesperLekland almost 7 years ago
Now you can customize the Grid even further. Check the documentation for the renderGrid
prop.
You can also import Grid
from react-native-svg-charts
and get access to Grid.Horizontal
, Grid.Vertical
and Grid.Both
helper functions
Published by JesperLekland almost 7 years ago
PieChart data object now support prop onPress
, see README for more information
Published by JesperLekland almost 7 years ago
Expose the svg
prop. This enables the user to pass any svg-prop to the underlying react-native-svg
component. See the README for more information/examples
Note this removes all "default" svg props which you might have relied on before. So if your graph stops rendering it's probably because it no longer has a color.
To summarize:
strokeColor
, fillColor
, strokeWidth
, dashArray
etc have been replaced by
svg: {
stroke: 'string',
fill: 'string',
strokeWidth: 'number',
strokeDasharray: 'array',
etc,
}
Published by JesperLekland almost 7 years ago
Exposed the renderGradient
prop for the LineChart
. Same usage as for AreaChart
Published by JesperLekland almost 7 years ago
Published by JesperLekland almost 7 years ago
The prop dataPoints
on both the BarChart
and PieChart
have been renamed to data
to better reflect the fact that they are arrays of objects, not points.
The components will now throw an informative error when dataPoints
prop is used instead of data
Published by JesperLekland almost 7 years ago
Add default behaviour to formatLabel
prop to return "index" when not passed as prop