How to change the type of the vertical grid line and extend the horizontal lines beyond the...

I am trying to create a beautiful chart to visualize the dynamics of school students' performance.

I am using Angular version 17.3.0, ECharts version 5.5.1, and ngx-echarts version 17.2.0.

I have this config:

{
grid: {
left: 20,
right: 25,
top: 0,
bottom: 40,
},
xAxis: {
type: 'category',
data: [
'9 фев',
'16 фев',
'23 фев',
'1 мар',
'8 мар',
'15 мар',
'22 мар',
'29 мар',
'5 апр',
'12 апр',
],
boundaryGap: false,
axisLabel: {
interval: 0,
overflow: 'truncate',
color: '#86909C',
fontSize: 14,
fontWeight: 'normal',
margin: 10,
formatter: (value: string) => {
const [day, month] = value.split(' ');
return `{a|${day}}\n{b|${month}}`;
},
rich: {
a: {
fontSize: 14,
align: 'center',
},
b: {
fontSize: 14,
align: 'center',
},
},
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
},
},
},
yAxis: {
type: 'value',
min: 1,
max: 6,
interval: 1,
position: 'right',
splitLine: {
show: true,
lineStyle: {
type: 'solid',
},
},
axisLabel: {
color: '#0B1F33',
fontSize: 16,
fontWeight: 'bold',
margin: 12,
formatter: (value: number) => {
if (value < 2 || value > 5) {
return '';
} else {
return value.toString();
}
},
},
},
series: [
{
name: 'Test',
type: 'line',
smooth: true,
data: [null, 4, null, null, 4.57, 5, 4],
connectNulls: true,
emphasis: {
focus: 'series',
},
itemStyle: {
color: '#0E69D5',
borderColor: '#ffffff',
borderWidth: 1,
},
lineStyle: {
color: '#185AC5',
},
symbol: 'circle',
symbolSize: 7,
markLine: {
symbol: 'none',
tooltip: { show: false },
label: { show: false },
data: [
{
xAxis: 6,
lineStyle: {
color: '#0E69D5',
width: 1,
type: 'solid',
},
emphasis: {
disabled: true,
},
},
],
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(192, 216, 253, 0.80)' },
{ offset: 1, color: 'rgba(237, 247, 255, 0.08)' },
],
},
},
},
],
}


This is how it looks:

Could you please tell me how I can change the type of the line marked in red to solid without affecting the other vertical lines? And how can I make the horizontal lines extend beyond the boundaries of the chart as I've shown in green? Or is this impossible to do with ECharts? If it’s impossible, could you please recommend other libraries?

Continue reading...