-
Added support for multiple lines corresponding to secondary y-axis. Now we can add the property
isSecondaryinside the objects of thedataSetarray. When using isSecondary, make sure to pass thesecondaryYAxisprop. See Abhinandan-Kushwaha#586 -
Added support for
ringPie charts. Just pass the propringin the<PieChartPro>component to make a ring like Pie chart. See Abhinandan-Kushwaha#584 -
Added support for
pieInnerComponentto<PieChartPro>
Animation in Pie and donut charts using the <PieChartPro> component. See Abhinandan-Kushwaha#555
Curved paths (border-radius) in donut sections supported using the <PieChartPro> component. See Abhinandan-Kushwaha#554
Support for expo gradient, thanks to onyx-flame for his PR Abhinandan-Kushwaha#571
- refactors and adjustments related to xAxisThickness and yAxisOffset. See Abhinandan-Kushwaha#574
- Fixed the issue -
animateOnDataChangeskipping the initial render, thus rendering an empty chart. See Abhinandan-Kushwaha#537 - Fixed the issue -
yAxisOffsetnot working withdataSetin Line (and Area) charts.
- Added the properties
shiftTextBackgroundXandshiftTextBackgroundYto data items of Pie (and donut) charts. If we passshiftTextX, the background will also shift (because the library assigns a default value of shiftTextBackgroundX = shiftTextX). This can be overridden by manually passing shiftTextBackgroundX. Same applies toshiftTextBackgroundY
- Fixed the issue- "shiftTextX not working to focused section of the Pie (and donut) charts" Thanks to YASH-TRONX for his PR Abhinandan-Kushwaha#534
- Fixed the issue- line inside Bar (combined chart) getting cropped from right side in case of secondary See Abhinandan-Kushwaha#532 This actually got fixed in the core library (version 0.0.16). Here I just had to use the latest version of gifted-charts-core
- Added the prop
onScrollto Bar, Stacked Bar, Line and Area charts. It is a callback function that takes event as a parameter. - Added the props
paddingHorizontalandpaddingVerticalto Pie (and Donut) charts. This will be useful to accomodate "onBorder" labels. See Abhinandan-Kushwaha#528
Fixed issue with barInnerComponent for Bar charts that don't have gradient. See Abhinandan-Kushwaha#500 (comment)
Added the prop onPressOut to Bar and Stacked Bar charts. See Abhinandan-Kushwaha#523
Fixed issue with noOfSectionsBelowXAxis not taking the value 0 for Line charts. See Abhinandan-Kushwaha#526
- Added
interpolationto Line charts. These props can be used to control interpolation-interpolateMissingValues,showDataPointsForMissingValuesandonlyPositive. See Interpolation in Line chart docs - Added
BEFORE_DATA_POINTtoEdgePositionenum for step charts, and renamed theAT_DATA_POINTEdgePosition toAFTER_DATA_POINT. The default EdgePosition isAFTER_DATA_POINT.
- Fixed the issue- "topLabelComponent not visible for bar charts". See Abhinandan-Kushwaha#519
- Fixed RTL issue in pagination. Thanks to Houssem-Eddine Kellou for his PR Abhinandan-Kushwaha/gifted-charts-core#3
Added the props focusBarOnPress and focusedBarConfig to Bar charts. Using these, we can focus or highlight a bar on press. See Abhinandan-Kushwaha#512
- Fixed issues with
stepValue,noOfSectionsandmaxValue. See Abhinandan-Kushwaha#511 - Fixed issue with pagination, (isCloseToStart not returning true) PR Abhinandan-Kushwaha/gifted-charts-core#2 by Houssem-Eddine Kellou
Moved gifted-charts-core to dependency and put the 3rd party libraries into devDependency. PR Abhinandan-Kushwaha#514 by Armon Raphiel
Exported ruleTypes which was missed in version 1.4.0
📣 This release contains a huge refactor. 🔨 We have now moved most of the logic and maths (including utils, constatnts and types) to our newly launched library named gifted-charts-core
This helped in-
- Segragating UI and logic
- Modularity and code re-usability
- We are very soon going to launch a library for web named
react-gifted-charts❤️ With this we will be able to render charts in react using exactly the same code we use in react-native-gifted-charts!
This huge refactor might have introduced some bugs. Please bear with us.🙏
To avoid this in future mega releases, I am going to add thorough tests in the next release.
We will soon release version 2.0 after adding all types and unit tests for each component!!
-
Added support for Pagination using the props
onEndReached,onStartReachedandendReachedOffset. Thanks to Houssem-Eddine Kellou who added this feature through his PR- Abhinandan-Kushwaha#504. Pagination is now supported for Bar, Stack, Line and Area charts! -
Added the prop
onLongPressto Bar and Stacked Bar charts. See Abhinandan-Kushwaha#506
-
Added the prop
barInnerComponentto Bar and Stacked Bar charts.barInnerComponentcan also be passed as a property inside the data items. See Abhinandan-Kushwaha#500 -
Added the prop
pieInnerComponentto Pie and Donut charts.pieInnerComponentcan also be passed as a property inside the data items. See Abhinandan-Kushwaha#500 -
Exported the following types from
react-native-gifted-charts-
- barDataItem
- stackDataItem
- BarChartPropsType
- StackedBarChartPropsType
- pieDataItem
- PieChartPropsType
- lineDataItem
- bicolorLineDataItem
- LineChartPropsType
- LineChartBicolorPropsType
- popnPyramidDataItem
- PopulationPyramidPropsType
- Moved types to
'.\types.tsfiles for each type of chart and gave proper names to types.
🐛 Minor bug fixes with initialSpacing for Line inside Bar charts (combined Bar and Line charts).
-
Fixed issue with onPress not working on elements just above the chart. See Abhinandan-Kushwaha#497
It was an issue with the of the chart overflowing and overlapping in case stepHeight was large. -
Fixed the issue-
showStripOnFocus: height of strip becomes smaller when usingoverflowTop.
- Fixed issue with
pointerEvent value: box-nonein Pie charts. See Abhinandan-Kushwaha#491 and Abhinandan-Kushwaha#472 - Fixed issue with
data3anddata4in Line charts. See Abhinandan-Kushwaha#490 - Fixed issue- strip not visible for Line and Area charts having
pointerConfigwithpointerLabelComponent.
- Added support for Population Pyramid charts!! See Population Pyramid props
- Pointer labels will now be rendered on top of the rest of the chart content. Earlier, reference lines sometimes used to appear over the pointer lables, this has been fixed now.
- Added the prop
referenceLinesOverChartContentfor Bar charts.
- Fixed the issue- LineChart having a single data item and using the prop
adjustToWidthcaused crashes. See Abhinandan-Kushwaha#484 - Fixed issue with data point label getting cropperd. See Abhinandan-Kushwaha#486
- Fixed the issue- Reference line overlapping the tooltip. See Abhinandan-Kushwaha#476
🐛 Minor bug fixes with pointerEvents in Pie charts and yAxisExtraHeight with pointerLabelComponent in Bar and Line charts. See Abhinandan-Kushwaha#472 and Abhinandan-Kushwaha#467 (comment)
- Added support for mix of positive + negative values in Stacked Bar charts. Thanks to Christoph who added this feature through his PR- Abhinandan-Kushwaha#470
- Added the prop
yAxisExtraHeightfor extra length of Y axis at the top. Default value is 1/20th of the chart height. - Added the prop
inwardExtraLengthForFocused. This allows us to render donut charts whose focused section grows inwards. See Abhinandan-Kushwaha#325
- Earlier, charts used to have an extra length of Y axis equal to
sectionHeight/2at the top. Due to this, charts' height used to change along withsectionHeight. Fixed this by making the default value ofyAxisExtraHeightto a constant value which equals 1/20th of the chart height. See Abhinandan-Kushwaha#467 - Fixed the issue with
getPointerPropswhich threw a warning -Cannot update a component (xxx) while rendering a different component (yyy). See facebook/react#22633
🐛 Minor bug fixes with stripΒehindBars and initialPointerIndex for Bar charts. See Abhinandan-Kushwaha#410 (comment) and Abhinandan-Kushwaha#410 (comment)
-
Added the property
zIndextoreferenceLine1Config,referenceLine2ConfigandreferenceLine3Config. See Abhinandan-Kushwaha#310 -
Added
stripBehindBarsproperty topointerConfigfor Bar charts. See Abhinandan-Kushwaha#410 (comment) -
Added the
trimYAxisAtTopprop for Bar and Line charts. See Abhinandan-Kushwaha#461 -
showValuesAsTopLabelnow shows the sum of stack item values at top of each stack. See Abhinandan-Kushwaha#446 -
Added the property
resetPointerOnDataChangetopointerConfigfor Line charts. The default value ofresetPointerOnDataChangeis true. See Abhinandan-Kushwaha#456
-
Fixed issue with
overflowTop. See Abhinandan-Kushwaha#453 (comment) -
Fixed issue with
stackBorderRadius. See Abhinandan-Kushwaha#354 (comment) and Abhinandan-Kushwaha#354 (comment)
-
Added
pointerConfigsupport to Stacked Bar charts. -
Added
barBorderWidthandbarBorderColorto Bar charts. -
Added separate
spacingfor Line charts inside BarCharts. The line rendered in a Bar chart can have its ownspacingvalue independent from the spacing of the bars. It can be set using thespacingproperty in thelineConfigobject. -
Added these props to apply border radius to Stacked Bar charts-
- stackBorderRadius
- stackBorderTopLeftRadius
- stackBorderTopRightRadius
- stackBorderBottomLeftRadius
- stackBorderBottomRightRadius
- Fixed the issue - initial pointer appearing at top for the second data line. See Abhinandan-Kushwaha#453
Merged ThreeDBar and AnimatedBar codes to make a single file named AnimatedThreeDBar
-
Added the props-
showValuesAsTopLabel,topLabelContainerStyleandtopLabelTextStyleto Bar charts. See Abhinandan-Kushwaha#99 (comment) -
Added the prop
highlightedRangeto render the parts of lines lying in a given data range with a different style (color, thickness,type). See https://stackoverflow.com/questions/70406903/different-colors-line-chart-with-react-native-chart-kit
type HighlightedRange = {
from: number;
to: number;
color?: string | ColorValue;
thickness?: number;
strokeDashArray?: Array<number>;
};- Added the property
pointerEventsto thepointerConfigobject. If you have a Pressable / Touchable item in yourpointerLabelComponent, then you should setpointerEventsto 'auto' inside the pointerConfig object. See Abhinandan-Kushwaha#447
- Fixed the issue - Unwanted Spacing below the charts.See Abhinandan-Kushwaha#448
- Added support for dynamic number of lines with the help of the
dataSetprop. We can now pass an array of data instead of usingdata,data2,data3etc. - Added property
formatYLabelto thesecondaryYAxis, so we can now format the labels of the secondary Y-Axis usingformatYLabel. See Abhinandan-Kushwaha#442
- Fixed issue with Pie charts having all zero values. See Abhinandan-Kushwaha#443
- Added support for line segments in Line and Area charts. See Abhinandan-Kushwaha#432 (comment)
- Added support for 2 line charts inside Bar chart using the
lineData2andlineConfig2props. See Abhinandan-Kushwaha#440
- Fixed issue with step chart edge position. Added a prop named
edgePosition. See Abhinandan-Kushwaha#438
-
Added support for Step charts. To render a step chart, just pass the prop
stepChartto the<LineChart>component.
See Abhinandan-Kushwaha#438 -
Added the properties-
initialPointerIndex,initialPointerAppearDelay, andpersistPointerto thepointerConfigobject. See Abhinandan-Kushwaha#427 -
Added support for customizing individual / specific rules in charts using the prop
rulesConfigArray. See Abhinandan-Kushwaha#432 (comment) -
Added 2 new props-
xAxisLabelsHeightandxAxisLabelsVerticalShift. Here's a brief description of the use case of these props-
The height of X axis labels container is computed automatically. Sometimes you may need to explicitly provide the height of X-axis labels container. An example case is when the font size of label texts is large. Use the `xAxisLabelsHeight`` prop if the labels appear cropped from bottom.
Note- Using the xAxisLabelsHeight prop may shift the X axis labels up or down, making the label text overlap with the chart content. In such a case you can use the `xAxisLabelsVerticalShift`` prop to adjust the vertical position of X axis labels.
-
Fixed issue- Pie charts get distorted when one value is non-zero and rest values are zero. See Abhinandan-Kushwaha#436
-
Fixed issue with programmatically changing focus does in Pie and Donut charts. See Abhinandan-Kushwaha#428
🐛 A minor bug fix. See Abhinandan-Kushwaha#422 (comment)
🐛 A minor bug fix. See Abhinandan-Kushwaha#424
- Added support for Multicolor Line charts. See Abhinandan-Kushwaha#251
These props will help to render multicolor line-
lineGradient?: boolean;
lineGradientComponent?: () => any;
lineGradientId?: string;
lineGradientDirection?: string;
lineGradientStartColor?: string;
lineGradientEndColor?: string;- Added support for custom gradient in area charts using the props
areaGradientComponentandareaGradientId
- Fixed issue- pointerConfig on Bar chart was jaggy
- Added the
formatYLabelprop. The user can now pass a callback function that takes the label generated by the library and modifies it. The modified label returned by the callback function will be finally rendered along the Y-axis. See Abhinandan-Kushwaha#22
- Fixed the issue where tooltip was not rendered in Bar charts that use
showLineprop. Also, bars were not clickable withshowLineandlineBehindBars={false}. See Abhinandan-Kushwaha#411
- Added pointerConfig behaviour to Bar charts. See Abhinandan-Kushwaha#410
- Fixed issue with
pointerConfig. See Abhinandan-Kushwaha#177 - Added types to util functions. See Abhinandan-Kushwaha#379
- Fixed some typescript issues. See Abhinandan-Kushwaha#269 (comment)
- Fixed issue with the 4th curve of curved area charts. See Abhinandan-Kushwaha#402
- Fixed Abhinandan-Kushwaha#406
Fixed issue where a zero value was omitted in Pie chart. See Abhinandan-Kushwaha#401
focusedDataPointLabelComponentnow appears above other UI elements, as it is now given a zIndex of 1000. See Abhinandan-Kushwaha#396- Fixed issue with the position of verticalLines when
hideYAxisTextis set to true.
- replaced
JSON.parse(JSON.stringify())with custom deepClone method (added in utils). It fixed this issue- Abhinandan-Kushwaha#397
- Added the property named
isSecondaryin thelineConfigobject see Abhinandan-Kushwaha#392 - Replaced the prop
verticalLinesTypewithverticalLinesStrokeDashArray
Fixed issue with secondary Y axis position (it was shifting towards right earlier)
- Added the prop
scrollEventThrottle(only for iOS) see https://reactnative.dev/docs/scrollview#scrolleventthrottle-ios - default value is 0 - exposed secondaryDataItem in pointerLabelComponent see Abhinandan-Kushwaha#388
Fixed issue with adjustToWidth (Now if you pass the adjustToWidth prop, your chart will take the screen width automatically)
- secondary Y axis for charts with negative values
- Line chart inside stacked bar chart
minValue is now renamed to mostNegativeValue to avoid confusion
- Fixed issue with
roundToDigitsfor Y axis labels. Now we add trailing 0s after decimal point if needed. So if the Y axis label is 1.5 and we haveroundToDigits={2}, then the label rendered will be 1.50 - Fixed Y axis label issue which displayed NaN as a label when we used
yAxisOffsetandyAxisLabelTextsprops together.
🐛 Minor bug fixes
Added the secondaryYAxis prop to render a secondary Y axis on the right side of the chart. Earliear we were able to render the Y axis either on the left or on the right side, not both.
In addition to data2, data3, etc, now we have the secondaryData prop. This is done to reference the second line to the secondary Y axis.
In Bar, Line and Area charts, we can access the ScrollView using the scrollRef prop. You just need to create a ref using React.useRef() and pass it into the scrollRef prop. The most common use of scrollRef is to scroll to a given position, and to fire the scroll on an event like a button press.
In Bar, Line and Area charts, we can scroll to any given index using the scrollToIndex prop.
To render a horizontal Bar chart from right to left, pass the rtl prop along with the horizontal prop.
Now, we support 2 types of curves-
- Cubic bezier curve
- Quadratic bezier curve
The default curveType is cubiz bezier curve. To change it to quadratic, pass the prop curveType={CurveType.QUADRATIC}
curvature takes a value between 0 and 1. The default curvature value is 0.2
curvature works only for cubic bezier curves. When curvature value is 0, the curve becomes straight line.
In Line and area charts, we can pass the showValuesAsDataPointsText prop to display the value of the data points.
The isAnimated prop is now supported in stacked bar charts.
Similar to the initialSpacing we now have a prop named endSpacing as well.
Similar to the overflowTop we now have a prop named overflowBottom as well, but it makes sense only for line and area charts. It gives extra space at the bottom of the chart to make room for dataPoints or dataPointText.
The library used to break when used in an expo project. This was perhaps due to version conflicts in react-native-svg. We have now moved both react-native-svg and react-native-linear-gradient to peer dependencies. This should hopefully fix the issues with expo.
autoAdjustPointerLabelPosition is now false by default. This should make the Area and Line charts with pointerConfig smooth on Android.