Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add prop yAxisLabelInterval #601

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat: add prop yAxisLabelInterval #601

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ import {
yAxisLabel="$"
yAxisSuffix="k"
yAxisInterval={1} // optional, defaults to 1
yAxisLabelInterval={1} // optional, defaults to 1
chartConfig={{
backgroundColor: "#e26a00",
backgroundGradientFrom: "#fb8c00",
Expand Down Expand Up @@ -154,8 +155,8 @@ const data = {
| Property | Type | Description |
| ----------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| data | Object | Data for the chart - see example above |
| width | Number | Width of the chart, use 'Dimensions' library to get the width of your screen for responsive |
| height | Number | Height of the chart |
| width | number | Width of the chart, use 'Dimensions' library to get the width of your screen for responsive |
| height | number | Height of the chart |
| withDots | boolean | Show dots on the line - default: True |
| withShadow | boolean | Show shadow for line - default: True |
| withInnerLines | boolean | Show inner dashed lines - default: True |
Expand All @@ -168,7 +169,8 @@ const data = {
| yAxisLabel | string | Prepend text to horizontal labels -- default: '' |
| yAxisSuffix | string | Append text to horizontal labels -- default: '' |
| xAxisLabel | string | Prepend text to vertical labels -- default: '' |
| yAxisInterval | string | Display y axis line every {x} input. -- default: 1 |
| yAxisInterval | number | Display y axis line every {x} input. -- default: 1
| yAxisLabelInterval | number | Display y axis label every {x} input. -- default: 1 |
| chartConfig | Object | Configuration object for the chart, see example config object above |
| decorator | Function | This function takes a [whole bunch](https://github.com/indiespirit/react-native-chart-kit/blob/master/src/line-chart/LineChart.tsx#L827) of stuff and can render extra elements, such as data point info or additional markup. |
| onDataPointClick | Function | Callback that takes `{value, dataset, getColor}` |
Expand Down
20 changes: 12 additions & 8 deletions src/AbstractChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export interface AbstractChartProps {
yAxisSuffix?: string;
yLabelsOffset?: number;
yAxisInterval?: number;
yAxisLabelInterval?: number;
xAxisLabel?: string;
xLabelsOffset?: number;
hidePointsAtIndex?: number[];
Expand Down Expand Up @@ -41,7 +42,7 @@ export const DEFAULT_X_LABELS_HEIGHT_PERCENTAGE = 0.75;
class AbstractChart<
IProps extends AbstractChartProps,
IState extends AbstractChartState
> extends Component<AbstractChartProps & IProps, AbstractChartState & IState> {
> extends Component<AbstractChartProps & IProps, AbstractChartState & IState> {
calcScaler = (data: number[]) => {
if (this.props.fromZero && this.props.fromNumber) {
return Math.max(...data, this.props.fromNumber) - Math.min(...data, 0) || 1;
Expand All @@ -50,7 +51,7 @@ class AbstractChart<
} else if (this.props.fromNumber) {
return (
Math.max(...data, this.props.fromNumber) -
Math.min(...data, this.props.fromNumber) || 1
Math.min(...data, this.props.fromNumber) || 1
);
} else {
return Math.max(...data) - Math.min(...data) || 1;
Expand Down Expand Up @@ -221,8 +222,8 @@ class AbstractChart<
count === 1 && this.props.fromZero
? paddingTop + 4
: height * verticalLabelsHeightPercentage -
(basePosition / count) * i +
paddingTop;
(basePosition / count) * i +
paddingTop;
return (
<Text
rotation={horizontalLabelRotation}
Expand Down Expand Up @@ -267,7 +268,8 @@ class AbstractChart<
const {
xAxisLabel = "",
xLabelsOffset = 0,
hidePointsAtIndex = []
hidePointsAtIndex = [],
yAxisLabelInterval = 1
} = this.props;

const fontSize = 12;
Expand All @@ -281,7 +283,9 @@ class AbstractChart<
if (hidePointsAtIndex.includes(i)) {
return null;
}

if (i % yAxisLabelInterval) {
return null;
}
const x =
(((width - paddingRight) / labels.length) * i +
paddingRight +
Expand Down Expand Up @@ -339,12 +343,12 @@ class AbstractChart<
key={Math.random()}
x1={Math.floor(
((width - paddingRight) / (data.length / yAxisInterval)) * i +
paddingRight
paddingRight
)}
y1={0}
x2={Math.floor(
((width - paddingRight) / (data.length / yAxisInterval)) * i +
paddingRight
paddingRight
)}
y2={height * verticalLabelsHeightPercentage + paddingTop}
{...this.getPropsForBackgroundLines()}
Expand Down