Highcharts. Indentation and formatting issues - highcharts

Question

I want to make the graph start at 0 (as shown in the picture) and have the string formatted according to the regular expression replace(/\B(?=(\d{3})+(?!\d))/g, " ") but all my attempts are unsuccessful.
chartOptions: {
colors: ['#3DC3FB', '#FF5252', '#D2F449', '#179877'],
title: {
text: "",
},
credits: {
enabled: false
},
tooltip: {
formatter: function () {
if (this.x > 0) {
return this.x;
} else return false;
},
},
plotOptions: {
series: {
enableMouseTracking: false,
states: {
hover: {
enabled: false
},
normal: {
animation: false
},
select: {
enabled: false
}
}
},
},
xAxis: {
gridLineWidth: 1,
tickmarkPlacement: 'on',
lineColor: "#A4A4A4",
min: 0,
categories: [null, "10 лет"],
top: 10,
right: -100,
title: {
style: {
color: "#A4A4A4"
}
},
},
yAxis: {
gridLineWidth: 0,
tickColor: 'undefined',
tickLength: 5,
tickWidth: 1,
tickPosition: 'outside',
lineWidth: 1,
lineColor: '#A4A4A4',
min: 3,
title: {
text: "Доход от инвестиций",
margin: 10,
align: "low",
style: {
color: "#A4A4A4"
},
y: -50,
},
labels: {
enabled: false,
},
},
legend: {enabled: false},
marker: {
enabled: false,
symbol: 'circle',
radius: 12,
states: {
hover: {
fillColor: 'white',
lineColor: 'green',
lineWidth: 0
}
}
},
series: [
{
type: 'line',
name: "ВДело",
data: [0, 1100],
dataLabels: {
x: -100,
y: 5,
enabled: true,
// useHTML: true,
format: `{point.y}/мес`,
formatter: function () {
return Highcharts.numberFormat(this.y,2);
},
color: "#3DC3FB",
style:{
fontSize: 20,
lineHeight: 18,
fontWeight: 500,
fontFamily: 'Gilroy',
fontStyle: 'normal',
}
},
animation: {
defer: 1
},
marker: {
symbol: 'circle',
radius: 4,
states: {
hover: {
fillColor: '#3DC3FB',
lineColor: 'green',
lineWidth: 0
}
}
},
},
{
type: 'line',
name: "Акции",
data: [0, 550],
animation: {
defer: 1
},
marker: {
symbol: 'circle',
radius: 4,
states: {
hover: {
fillColor: '#FF5252',
lineColor: 'green',
lineWidth: 0
}
}
},
},
{
type: 'line',
name: "Облигации",
data: [0, 366],
animation: {
defer: 1
},
marker: {
symbol: 'circle',
radius: 4,
states: {
hover: {
fillColor: '#D2F449',
lineColor: 'green',
lineWidth: 0
}
}
},
},
{
type: 'line',
name: "Депозит",
data: [0, 275],
animation: {
defer: 1
},
marker: {
symbol: 'circle',
radius: 4,
states: {
hover: {
fillColor: '#179877',
lineColor: 'green',
lineWidth: 0
}
}
},
},
],
},
I am new to highcharts and have a hard time with huge documentation. help me please

Answer 1

Understood the cost of his sleep. For those who will be interested. So that the graph starts like in the picture.
plotOptions: {
series: {
findNearestPointBy: 'x',
label: {
connectorAllowed: false
},
pointPlacement: 'on'
}
}
and
{
type: 'line',
name: "ВДело",
data: [0, 1100],
dataLabels: {
x: -50,
y: -10,
enabled: true,
format: `{point.y}/мес`,
pointFormat: ' <b>{point.y:,.0f}/мес</b>',
shared: true,
color: "#3DC3FB",
style:{
fontSize: 20,
lineHeight: 18,
fontWeight: 500,
fontFamily: 'Gilroy',
fontStyle: 'normal',
}
},

Answer 2

When it comes to the place to start the chart in the category axis, you need to only change xAxis.min to 0.5
Sample code:
xAxis: {
min: 0.5,
tickmarkPlacement: 'on',
type: 'category'
},
Simplified demo:
https://jsfiddle.net/BlackLabel/jt1gqrnb/