axisMaximum of yAxis don't working for RadarChart

[FlorianGG]

Expected Behavior

When I fixe an axisMaximum for yAxis in RadarChart, I would like that the maximum of this axis would be the value fixed and also when the oriantation of the phone is changing then the maximum of yAxis do not move.

Actual Behavior

If I fixe an axisMaximum, for example 3, the maximum of the yAxis displayed is 6 furthermore if I change the orientation of the phone, the maximum displayed is updated to another value for exemple 10.

Screenshots

Code Sample

import React, { PureComponent } from 'react';
import { View, processColor, StyleSheet } from 'react-native';
import { RadarChart } from 'react-native-charts-wrapper';

export default class ChartTestView extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            legend: {
                enabled: true,
                textSize: 14,
                form: 'CIRCLE',
                wordWrapEnabled: true,
            },
            data: {
                dataSets: [
                    {
                        values: [
                            { value: -3 },
                            { value: -2 },
                            { value: -1 },
                            { value: 0 },
                            { value: 1 },
                            { value: 2 },
                            { value: 3 },
                        ],
                        label: 'DS 1',
                        config: {
                            color: processColor('red'),

                            drawFilled: true,
                            fillColor: processColor('red'),
                            fillAlpha: 100,
                            lineWidth: 2,
                        },
                    },
                ],
            },
            xAxis: {
                valueFormatter: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
            },
            yAxis: {
                axisMaximum: 3,
                axisMinimum: -3,
                granularity: 1,
            },
        };
    }

    render() {
        const { legend, data, xAxis, yAxis } = this.state;
        return (
            <View style={{ flex: 1 }}>
                <RadarChart
                    style={styles.chart}
                    data={data}
                    xAxis={xAxis}
                    yAxis={yAxis}
                    chartDescription={{ text: '' }}
                    legend={legend}
                    drawWeb
                    webAlpha={255}
                    webColor={processColor('red')}
                    webColorInner={processColor('green')}
                    // skipWebLineCount={0}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    chart: {
        flex: 1,
    },
});

Specifications

"react": "16.9.0",
"react-native": "0.61.2",
"react-native-charts-wrapper": "^0.5.7",

[TobiasLima]

You can use "labelCount" and "labelCountForce" to set a fixed value, like this: yAxis: { axisMaximum: 3, axisMinimum: -3, granularity: 1, labelCount: 5, labelCountForce: true, }

[FlorianGG]

You can use "labelCount" and "labelCountForce" to set a fixed value, like this: yAxis: { axisMaximum: 3, axisMinimum: -3, granularity: 1, labelCount: 5, labelCountForce: true, }

Thank you but I don't understand why I have to use labelCount and labelCountForce. Do you have more explanations?

[FlorianGG]

You can use "labelCount" and "labelCountForce" to set a fixed value, like this: yAxis: { axisMaximum: 3, axisMinimum: -3, granularity: 1, labelCount: 5, labelCountForce: true, }

Thank you but I don't understand why I have to use labelCount and labelCountForce. Do you have more explanations?

Ok I tried your tips and it's working. This solution is working but the main problem is not solved

[TobiasLima]

Yes I understand. I had the same mistake as you, but that was the only way to fix it. The problem with orientation, I also do not know how to fix.