Describe the bug
The x scale compute uneven ticks for simple x linear charts:
To Reproduce
Use the following chart in the playground:
const data = [
{ x: 7.053400039672852, y: 1.019049570549345, dataMin: 7.053400039672852, dataMax: 14.680128231140726, percent: 10 },
{ x: 16.8664653595564, y: 1.5285743558240172, dataMin: 14.680128231140726, dataMax: 20.721481475600584, percent: 15 },
{ x: 26.67953067943995, y: 0.5095247852746725, dataMin: 20.721481475600584, dataMax: 31.134000474396174, percent: 5 },
{ x: 36.4925959993235, y: 0.12998767296647204, dataMin: 31.134000474396174, dataMax: 74.95778185805996, percent: 5 },
{ x: 74.95778185805996, y: 0.3718786139686189, dataMin: 74.95778185805996, dataMax: 88.40302934524654, percent: 5 },
{ x: 88.40302934524654, y: 0.14487824285108267, dataMin: 88.40302934524654, dataMax: 122.9147676270215, percent: 5 },
{ x: 122.9147676270215, y: 0.07890686802154025, dataMin: 122.9147676270215, dataMax: 186.28060795710638, percent: 5 },
{ x: 186.28060795710638, y: 0.4344198127360625, dataMin: 186.28060795710638, dataMax: 197.79021192408248, percent: 5 },
{ x: 197.79021192408248, y: 0.47910304703632484, dataMin: 197.79021192408248, dataMax: 208.22638015747071, percent: 5 },
{ x: 208.22638015747071, y: 0.15180409193531094, dataMin: 208.22638015747071, dataMax: 241.16356871580467, percent: 5 },
{ x: 241.16356871580467, y: 0.0778711327650822, dataMin: 241.16356871580467, dataMax: 305.3722147500643, percent: 5 },
{ x: 305.3722147500643, y: 0.05038552439310782, dataMin: 305.3722147500643, dataMax: 404.60706563679923, percent: 5 },
{ x: 404.60706563679923, y: 0.04950569918337908, dataMin: 404.60706563679923, dataMax: 505.60553818596964, percent: 5 },
{ x: 505.60553818596964, y: 0.010256529428346779, dataMin: 505.60553818596964, dataMax: 993.0998738606771, percent: 5 },
{ x: 993.0998738606771, y: 0.06490505477669992, dataMin: 993.0998738606771, dataMax: 1070.1354763603908, percent: 5 },
{ x: 1070.1354763603908, y: 0, dataMin: 993.0998738606771, dataMax: 1070.1354763603908, percent: 5 },
]
return (
<Fragment>
<div className="chart">
<Chart>
<Axis
id={getAxisId('bottom')}
position={Position.Bottom}
tickFormat={d => d.toFixed(0)}
ticks={5}
/>
<Axis
id={getAxisId('left')}
position={Position.Left}
tickFormat={d => d.toFixed(1)}
hide={true}
/>
<AreaSeries
id={getSpecId('aaa')}
name={'aaa'}
xScaleType={ScaleType.Linear}
yScaleType={ScaleType.Linear}
xAccessor="x"
yAccessors={['y']}
data={data}
curve={CurveType.CURVE_STEP_AFTER}
/>
</Chart>
</div>
</Fragment>
);Expected behavior
The ticks should be evenly distributed 0, 10, 15 etc
Screenshots
This is the current output
Version (please complete the following information):
- OS: all
- Browser: all
- Elastic Charts: 11.x
Additional context
Seems that for area/line chart the minInterval is computed and used in the continuous scale ticks. I think we use this only for band linear charts
if (this.minInterval > 0) {
const intervalCount = Math.floor((this.domain[1] - this.domain[0]) / this.minInterval);
this.tickValues = new Array(intervalCount + 1).fill(0).map((d, i) => {
return this.domain[0] + i * this.minInterval;
});
} else {
Errors in browser console
n/a
Kibana Cross Issues
n/a
Checklist
[ ] every related Kibana issue is listed under Kibana Cross Issues list[ ] kibana cross issue tag is associated to the issue if any kibana cross issue is present
Describe the bug
The x scale compute uneven ticks for simple x linear charts:
To Reproduce
Use the following chart in the playground:
Expected behavior
The ticks should be evenly distributed 0, 10, 15 etc
Screenshots
This is the current output
Version (please complete the following information):
Additional context
Seems that for area/line chart the minInterval is computed and used in the continuous scale ticks. I think we use this only for band linear charts
Errors in browser console
n/a
Kibana Cross Issues
n/a
Checklist
[ ] every related Kibana issue is listed underKibana Cross Issueslist[ ]kibana cross issuetag is associated to the issue if any kibana cross issue is present