X-axis is not showing in the graph with smaller Y-axis value

[anmolmayank]

For the below sample code we are unable to see the X-Axis

Sample Running Data

• CustomValues:[[-30, -0.3798], [-29, -0.4799],[-28, -0.209],[-19, -1.3],[-10, -0.67],[-3, -0.634],[-2, -0.78],[-1, -0.51], [0, -0.76543], [1, -7], [4, -2.3], [5, -0.312]]

Sample Failed Data

• CustomValues: [[-30, -0.008378906249999929], [-29, -0.008623046874999929],[-28, -0.008623046874999929],[-19, -0.008256835937499929],[-10, -0.008623046874999929],[-3, -0.008745117187499929],[-2, -0.008378906249999929],[-1, -0.008256835937499929], [0, -0.008378906249999929], [1, -0.008256835937499929], [4, -0.008256835937499929], [5, -0.008256835937499929]]

Sample Code

data = [{
    customLabel: 'somethingA',
    customValues:[[-30, -0.3798], [-29, -0.4799],[-28, -0.209],[-19, -0.367],[-10, -0.67],[-3, -2.4],[-2, -0.78],[-1, -0.51], [0, -0.76543], [1, -0.7], [4, -0.566],  [5, -0.312]]
    }];

var labelAccessor = function(stack) { return stack.customLabel; };
var valuesAccessor = function(stack) { return stack.customValues; };
var xAccessor = function(element) { return element[0]; };
var yAccessor = function(element) { return element[1]; };

React.render(<LineChart
                data={data}
                width={400}
                height={400}
                margin={{top: 10, bottom: 50, left: 50, right: 10}}
                label={labelAccessor}
                x={xAccessor}
                y={yAccessor}
                values={valuesAccessor}
                tooltipHtml={tooltipLine}/>,
document.getElementById('linechart2')
);

Sample Output Graph