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?
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?
Share Improve this question asked Mar 18 at 13:26 VladVlad 721 silver badge4 bronze badges 4- I guess you want the splitLines to extend beyond the label? Or would it be an option to remove the first vertical splitLine above the "9" label? – Matthias Mertens Commented Mar 18 at 14:03
- Is your data static? If so you could add a slightly bigger grid and add category axes to it with the same number of ticks as your original data. If not you could add your data to the larger grid too and make the series invisible but I would try to avoid such hacky solutions. – Matthias Mertens Commented Mar 18 at 14:16
- data not static. I need to save the first vertical splitLine above the "9" label – Vlad Commented Mar 19 at 5:33
- Edited my answer to my best idea with dynamic data. – Matthias Mertens Commented Mar 19 at 7:05
2 Answers
Reset to default 1The best possible solution that comes to my mind (which will intervene the least with other functionalities) is to use a second grid which is slighty larger together with category axes (they dont need a series attached for the ticks to be calculated) to display the splitLines. In order to make this solution work with dynamic data we need a way to determine the number of ticks echarts will choose for the data. This can be done by adding the data to the chart and capturing the highest index passed to the label formatter. Then, the data of the second yAxis can be set to the computed number, delayed by one tick with setTimeout.
Example:
let tickNr = 0;
option = {
grid: [{}, {id: 'helperGrid', left: 60}],
xAxis: [{
type: 'category',
splitLine: { show: true },
},
{
gridId: 'helperGrid',
type: 'category',
axisTick: { show: false },
axisLabel: { show: false }
}],
yAxis: [{
type: 'value',
position: 'right',
axisLabel: {
formatter: (value, index) => {
if (index > tickNr) tickNr = index;
return value;
}
}
},
{
id: 'helperAxis',
gridId: 'helperGrid',
type: 'category',
axisLine: { show: false },
axisTick: { show: false },
splitLine: { show: true },
axisLabel: { show: false },
}],
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
},
]
};
setTimeout(function() {
myChart.setOption({yAxis: [
{
id: 'helperAxis',
data: Array.from({length: tickNr})
}
]})
}, 1);
For the X axis set the splitLine.lineStyle to solid:
xAxis: {
...
splitLine: {
show: true,
lineStyle: {
type: 'solid',
},
},
Then set the minimum value to something negative then offset the grid.
grid: {
left: -10,
},
xAxis: {
type: 'category',
min: -1,