react-native-svg-charts

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.

Contributions

• update README (@andrewdazs and @iammosespaulr)
• fix crash in Axis component (@krzysztof-miemiec - #238)
• Introduce grouped LineChart (@alburdette619 - #240)
• Introduce grouped StackedBarChart (@alburdette619 - #239)
• Fix 'transparent' color for X-Axis and Y-Axis in RN 0.57 (@denieler - #256)
• Added extra props to axis children (@alburdette619 - #276)
• Create interaction handle during animation (@Jyrno42 - #314)
• Stacked Area Chart: Pass areas down to children (@attitude - #316)
• Added more props to axis children (@buschco - #326)
• Fix blinking animation (@andycloke - #329)
• Fix YAxis using Unnecessary max/min value before definition (@saji-ryu - #354)
• prevent crash on undefined data (@usrbowe - #355)

• remove eslint formatting in favor of prettier (easier to contribute)
• remove circleci checks as they didn't add any value (easier to contribute)

5.2.0

• Add x(Min|Max) and y(Min|Max) - deprecates grid(Min|Max)
• Add clamp(X|Y) to use in conjunction with above props (default false)
• Add xScale to StackedAreaChart along with (x|y)Accessor

• Added cornerRadius to progressCircle
• Adhere to Svg api with height and width instead of flex: 1 - Thanks to @DaKaZ
• StackedBarChart now supports svg prop for each data entry! Allowing onPress among other things. -Thanks to @LRNZ09
• Only clone child if not null (fixes crash in some cases) - Thanks to @attitude
• StackedAreaChart now supports svg prop for each area! Allowing onPress among other things
  • The two above changes does remove the other "svg" props from the charts, for example 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
• PieChart supports (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.

Breaking Changes

• 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.

Awesome new BarChart (breaking changes)

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.

YAxis supports scaleBand and spacing

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.

PieChart

• 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

WaterfallChart is removed

Due to low usage and high maintenance the WaterfallChart is removed.

Cleaned up README

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.

Changes ( many of them breaking )

XAxis & YAxis

• Axes are now rendered with 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)
• (XAxis) xAccessor prop added to extract correct value from data array
• (YAxis) yAccessor prop added to extract correct value from data array
• scale prop added to customize scale of axis

renderExtra is removed

Seeing 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

LineChart

• dataPoints is now data
• data supports complex data structures
• xAccessor and yAccessor added to support extraction of values from complex data structure
• xScale and yScale prop added to allow for custom scales
• renderExtra is removed - See above
• extra now passes line as an extra argument property. This is the line svg path
  and can be used to render e.g line shadows.
• no longer renders a shadow by default. Use extras instead
• renderGradient is removed and can now be rendered via extra. See documentation for example
• shadowSvg and shadowOffset is now removed. Render your own shadow using `renderExtra

AreaChart

• dataPoints is now data
• data supports complex data structures
• xAccessor and yAccessor added to support extraction of values from complex data structure
• xScale and yScale prop added to allow for custom scales
• renderExtra is removed - See above
• extra 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 usage
• renderGradient is removed and can now be rendered via extra. See documentation for example
• no longer renders "top" line, use extras for this (see docs for example)

WaterfallChart

• deprecated - will be removed in future versions (due to low usage poor maintenance)

animate default is now false

We figured opt-in is better than opt-out considering how poorly the animations are working at the moment

Comments

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

Decide where area starts on AreaChart

Added the start prop to allow users to tweak where their area starts

Bugfix

Fix bug where StackedAreaChart wouldn't render all data points

renderLineGradient for AreaChart

You can now use a gradient on the Line of an AreaChart. See the gradient part of the README for more information

Breaking changes

gridMin/Max proper behaviour

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.

YAxis supports "min" and "max" prop

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 👍

Introducing the renderGrid prop

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

onPress for PieChart slice

PieChart data object now support prop onPress, see README for more information

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,
}

Gradient for LineChart

Exposed the renderGradient prop for the LineChart. Same usage as for AreaChart

Fix XAxis not showing labels on Android

Breaking Changes

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

XAxis

Add default behaviour to formatLabel prop to return "index" when not passed as prop