Line Сделать настройку отображения координат + скорректировать график

[dkorsun36]

Добрый день!

1. Столкнулись с проблемой что компонент Line не контролируемое заполнение значений на осях, пример
   

Необходимо показывать целочисленные значения суток, компонент разбивает же вычисляя сам

2. Непропорционально отрисовывается график, пример:
   
   

Разница 15 дней, но по графику как будто первый график оканчивается на 8-е сутки

[dkorsun36]

Работаем с версией @consta/charts@^0.2.2"

[N1MBER]

За то какой интервал будет использоваться в осях необходимо применить свойство tickInterval:
xAxis={{ tickInterval: 1, }} (может не так вычисляться если ширина таблицы не позволяет вместить все значения)
Также есть свойств tickCount, которое определяет неокончательное число (может быть меньше) делений на оси, еще можно использовать tickMethod для метода расчета делений.
Чтобы сделать пример использования, можете пожалуйста предоставить данные для данного случая

[dkorsun36]

Пример данных по которым строится график {"plan":[{"x_value":0.0,"y_value":0.0},{"x_value":0.0,"y_value":0.0},{"x_value":0.20833333333333334,"y_value":0.0},{"x_value":0.2916666666666667,"y_value":0.0},{"x_value":0.2916666666666667,"y_value":0.0},{"x_value":0.2916666666666667,"y_value":0.0},{"x_value":0.2916666666666667,"y_value":0.0},{"x_value":0.2916666666666667,"y_value":0.0},{"x_value":0.2916666666666667,"y_value":0.0},{"x_value":0.2916666666666667,"y_value":0.0},{"x_value":0.2916666666666667,"y_value":0.0},{"x_value":0.2916666666666667,"y_value":0.0},{"x_value":0.4166666666666667,"y_value":0.0},{"x_value":0.4166666666666667,"y_value":0.0},{"x_value":0.4166666666666667,"y_value":0.0},{"x_value":0.6295833333333333,"y_value":460.0},{"x_value":0.6816666666666666,"y_value":460.0},{"x_value":0.7599999999999999,"y_value":460.0},{"x_value":0.8141666666666666,"y_value":460.0},{"x_value":0.835,"y_value":460.0},{"x_value":1.0954166666666667,"y_value":460.0},{"x_value":1.2204166666666667,"y_value":460.0},{"x_value":1.2620833333333332,"y_value":460.0},{"x_value":1.5495833333333333,"y_value":460.0},{"x_value":1.5704166666666666,"y_value":460.0},{"x_value":1.6120833333333333,"y_value":460.0},{"x_value":1.7162499999999998,"y_value":460.0},{"x_value":1.9662499999999998,"y_value":460.0},{"x_value":2.299583333333333,"y_value":460.0},{"x_value":2.362083333333333,"y_value":460.0},{"x_value":2.487083333333333,"y_value":460.0},{"x_value":2.5704166666666666,"y_value":460.0},{"x_value":2.643333333333333,"y_value":460.0},{"x_value":2.705833333333333,"y_value":460.0},{"x_value":2.9741666666666666,"y_value":1104.0},{"x_value":3.047083333333333,"y_value":1104.0},{"x_value":3.1491666666666664,"y_value":1104.0},{"x_value":3.2408333333333332,"y_value":1104.0},{"x_value":3.2616666666666667,"y_value":1104.0},{"x_value":3.5545833333333334,"y_value":1104.0},{"x_value":3.5970833333333334,"y_value":1104.0},{"x_value":3.7220833333333334,"y_value":1104.0},{"x_value":3.7220833333333334,"y_value":1104.0},{"x_value":3.7533333333333334,"y_value":1104.0},{"x_value":4.1866666666666665,"y_value":1104.0},{"x_value":4.2283333333333335,"y_value":1104.0},{"x_value":4.2595833333333335,"y_value":1104.0},{"x_value":4.3637500000000005,"y_value":1104.0},{"x_value":5.1137500000000005,"y_value":1104.0},{"x_value":5.2387500000000005,"y_value":1104.0},{"x_value":5.3012500000000005,"y_value":1104.0},{"x_value":5.467916666666667,"y_value":1104.0},{"x_value":5.617083333333334,"y_value":1104.0},{"x_value":5.700416666666668,"y_value":1104.0},{"x_value":5.783750000000001,"y_value":1104.0},{"x_value":6.457083333333334,"y_value":2316.0},{"x_value":6.835000000000001,"y_value":2316.0},{"x_value":7.041250000000001,"y_value":2316.0},{"x_value":7.432916666666667,"y_value":2316.0},{"x_value":7.45375,"y_value":2316.0},{"x_value":8.225416666666668,"y_value":2316.0},{"x_value":8.367083333333335,"y_value":2316.0},{"x_value":8.533750000000001,"y_value":2316.0},{"x_value":8.679583333333335,"y_value":2316.0},{"x_value":8.721250000000001,"y_value":2316.0},{"x_value":8.992916666666668,"y_value":2316.0},{"x_value":9.337083333333334,"y_value":2316.0},{"x_value":9.378750000000002,"y_value":2316.0},{"x_value":9.420416666666668,"y_value":2316.0},{"x_value":9.535000000000002,"y_value":2316.0},{"x_value":9.993333333333334,"y_value":2316.0},{"x_value":10.035000000000002,"y_value":2316.0},{"x_value":10.285000000000002,"y_value":2316.0},{"x_value":10.515833333333335,"y_value":2316.0},{"x_value":10.588750000000001,"y_value":2316.0},{"x_value":10.672083333333333,"y_value":2316.0},{"x_value":10.672083333333333,"y_value":2316.0},{"x_value":10.755416666666667,"y_value":2316.0},{"x_value":11.964999999999998,"y_value":3477.0},{"x_value":12.294166666666664,"y_value":3477.0},{"x_value":12.458749999999997,"y_value":3477.0},{"x_value":13.012916666666664,"y_value":3477.0},{"x_value":13.044166666666664,"y_value":3477.0},{"x_value":13.527916666666664,"y_value":3477.0},{"x_value":13.750416666666665,"y_value":3477.0},{"x_value":14.000416666666665,"y_value":3477.0},{"x_value":14.031666666666665,"y_value":3477.0},{"x_value":14.561249999999996,"y_value":3477.0},{"x_value":14.725833333333329,"y_value":3477.0},{"x_value":14.819583333333329,"y_value":3477.0},{"x_value":15.03708333333333,"y_value":3477.0},{"x_value":15.28708333333333,"y_value":3477.0},{"x_value":15.53208333333333,"y_value":3477.0},{"x_value":15.636249999999997,"y_value":3477.0},{"x_value":16.46958333333333,"y_value":3477.0},{"x_value":17.641666666666662,"y_value":3476.0},{"x_value":17.896666666666665,"y_value":3476.0},{"x_value":18.08791666666666,"y_value":3476.0},{"x_value":18.62958333333333,"y_value":3476.0},{"x_value":18.66083333333333,"y_value":3476.0},{"x_value":19.12958333333333,"y_value":3476.0},{"x_value":19.354583333333327,"y_value":3476.0},{"x_value":19.604583333333327,"y_value":3476.0},{"x_value":19.635833333333327,"y_value":3476.0},{"x_value":20.22166666666666,"y_value":3476.0},{"x_value":20.402499999999993,"y_value":3476.0},{"x_value":20.54833333333333,"y_value":3476.0},{"x_value":20.755833333333328,"y_value":3476.0},{"x_value":21.02666666666666,"y_value":3476.0},{"x_value":21.068333333333328,"y_value":3476.0},{"x_value":21.27666666666666,"y_value":3476.0},{"x_value":21.443333333333328,"y_value":3476.0},{"x_value":21.888333333333325,"y_value":3476.0}],"fact":[{"x_value":0.0,"y_value":0.0}],"npv":[],"tech_limit":[{"x_value":0.0,"y_value":0.0},{"x_value":0.0,"y_value":0.0},{"x_value":0.0,"y_value":0.0},{"x_value":0.0,"y_value":0.0},{"x_value":0.0,"y_value":0.0},{"x_value":0.0,"y_value":0.0},{"x_value":0.0,"y_value":0.0},{"x_value":0.0,"y_value":0.0},{"x_value":0.0,"y_value":0.0},{"x_value":0.0,"y_value":0.0},{"x_value":0.0,"y_value":0.0},{"x_value":0.0,"y_value":0.0},{"x_value":0.0,"y_value":0.0},{"x_value":0.0,"y_value":0.0},{"x_value":0.0,"y_value":0.0},{"x_value":0.0,"y_value":460.0},{"x_value":0.0,"y_value":460.0},{"x_value":0.0,"y_value":460.0},{"x_value":0.0,"y_value":460.0},{"x_value":0.0,"y_value":460.0},{"x_value":0.0,"y_value":460.0},{"x_value":0.0,"y_value":460.0},{"x_value":0.0,"y_value":460.0},{"x_value":0.0,"y_value":460.0},{"x_value":0.0,"y_value":460.0},{"x_value":0.0,"y_value":460.0},{"x_value":0.0,"y_value":460.0},{"x_value":0.0,"y_value":460.0},{"x_value":0.0,"y_value":460.0},{"x_value":0.0,"y_value":460.0},{"x_value":0.0,"y_value":460.0},{"x_value":0.0,"y_value":460.0},{"x_value":0.0,"y_value":460.0},{"x_value":0.0,"y_value":460.0},{"x_value":0.0,"y_value":1104.0},{"x_value":0.0,"y_value":1104.0},{"x_value":0.0,"y_value":1104.0},{"x_value":0.0,"y_value":1104.0},{"x_value":0.0,"y_value":1104.0},{"x_value":0.0,"y_value":1104.0},{"x_value":0.0,"y_value":1104.0},{"x_value":0.0,"y_value":1104.0},{"x_value":0.0,"y_value":1104.0},{"x_value":0.0,"y_value":1104.0},{"x_value":0.0,"y_value":1104.0},{"x_value":0.0,"y_value":1104.0},{"x_value":0.0,"y_value":1104.0},{"x_value":0.0,"y_value":1104.0},{"x_value":0.0,"y_value":1104.0},{"x_value":0.0,"y_value":1104.0},{"x_value":0.0,"y_value":1104.0},{"x_value":0.0,"y_value":1104.0},{"x_value":0.0,"y_value":1104.0},{"x_value":0.0,"y_value":1104.0},{"x_value":0.0,"y_value":1104.0},{"x_value":0.0,"y_value":2316.0},{"x_value":0.0,"y_value":2316.0},{"x_value":0.0,"y_value":2316.0},{"x_value":0.0,"y_value":2316.0},{"x_value":0.0,"y_value":2316.0},{"x_value":0.0,"y_value":2316.0},{"x_value":0.0,"y_value":2316.0},{"x_value":0.0,"y_value":2316.0},{"x_value":0.0,"y_value":2316.0},{"x_value":0.0,"y_value":2316.0},{"x_value":0.0,"y_value":2316.0},{"x_value":0.0,"y_value":2316.0},{"x_value":0.0,"y_value":2316.0},{"x_value":0.0,"y_value":2316.0},{"x_value":0.0,"y_value":2316.0},{"x_value":0.0,"y_value":2316.0},{"x_value":0.0,"y_value":2316.0},{"x_value":0.0,"y_value":2316.0},{"x_value":0.0,"y_value":2316.0},{"x_value":0.0,"y_value":2316.0},{"x_value":0.0,"y_value":2316.0},{"x_value":0.0,"y_value":2316.0},{"x_value":0.0,"y_value":2316.0},{"x_value":0.0,"y_value":3477.0},{"x_value":0.0,"y_value":3477.0},{"x_value":0.0,"y_value":3477.0},{"x_value":0.0,"y_value":3477.0},{"x_value":0.0,"y_value":3477.0},{"x_value":0.0,"y_value":3477.0},{"x_value":0.0,"y_value":3477.0},{"x_value":0.0,"y_value":3477.0},{"x_value":0.0,"y_value":3477.0},{"x_value":0.0,"y_value":3477.0},{"x_value":0.0,"y_value":3477.0},{"x_value":0.0,"y_value":3477.0},{"x_value":0.0,"y_value":3477.0},{"x_value":0.0,"y_value":3477.0},{"x_value":0.0,"y_value":3477.0},{"x_value":0.0,"y_value":3477.0},{"x_value":0.0,"y_value":3477.0},{"x_value":0.0,"y_value":3476.0},{"x_value":0.0,"y_value":3476.0},{"x_value":0.0,"y_value":3476.0},{"x_value":0.0,"y_value":3476.0},{"x_value":0.0,"y_value":3476.0},{"x_value":0.0,"y_value":3476.0},{"x_value":0.0,"y_value":3476.0},{"x_value":0.0,"y_value":3476.0},{"x_value":0.0,"y_value":3476.0},{"x_value":0.0,"y_value":3476.0},{"x_value":0.0,"y_value":3476.0},{"x_value":0.0,"y_value":3476.0},{"x_value":0.0,"y_value":3476.0},{"x_value":0.0,"y_value":3476.0},{"x_value":0.0,"y_value":3476.0},{"x_value":0.0,"y_value":3476.0},{"x_value":0.0,"y_value":3476.0},{"x_value":0.0,"y_value":3476.0}]}
график с этими данными выглядит так

[N1MBER]

@dkorsun36 Можете еще пожалуйста скинуть код того как вы используете компонент или хотя бы значения пропсов data, xField, yField, seriesField

[dkorsun36]

<Line
data={points}
xField="x_value"
yField="y_value"
seriesField="type"
lineStyle={({ type }) => ({
stroke: colorMap[type],
lineDash: type === 'План' ? [5, 6] : [0, 0],
})}
color={({ type }) => colorMap[type]}
legend={{
marker: (name) =>
(
{
symbol: 'circle',
style: {
fill: colorMap[name],
},
}
),
}}
tooltip={{
title: (title, datum) => formatDays(Number(title)),
formatter: (point: Record<string, any>) => ({
name: point.type,
value: String(point.y_value)
.replace('-', ''),
}),
}}
xAxis={{
title: {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
text: 'сут', // @ts-ignore
position: 'end',
style: {
fill: 'rgb(150, 150, 150)',
},
},
grid: {
line: {
style: {
stroke: 'rgb(120, 120, 120)',
lineWidth: 1,
lineDash: [1, 3],
},
},
},
tickInterval: 10,
}}
yAxis={{
title: {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
text: 'метры', // @ts-ignore
position: 'start',
style: {
fill: 'rgb(150, 150, 150)',
},
},
label: {
formatter: (label) => label.replace('-', ''),
},
grid: {
line: {
style: {
stroke: 'rgb(120, 120, 120)',
lineWidth: 1,
lineDash: [1, 3],
},
},
},
tickInterval: 1000,
}}
animation={{
appear: {
animation: 'fade-in',
duration: 350,
},
leave: {
animation: 'fade-out',
duration: 100,
},
}}
/>

[N1MBER]

Можете пожалуйста связаться со мной в телеграмме @N1MBER , есть ряд вопросов и в рамках шью будет долго и не удобно обсуждать