Open
Description
What problem does this feature solve?
const spec = {
type: 'bar',
xField: 'Date',
yField: 'Price',
point: {
visible: false // disable point
},
line: {
style: {
lineWidth: 3,
lineCap: 'round'
}
},
axes: [
{
orient: 'left',
min: 0.12,
max: 0.18,
tick: {
visible: false
},
grid: {
style: {
lineDash: [0, 0]
}
},
domainLine: {
visible: false
},
label: {
// format tick label, the last label add unit
formatMethod: (value, datum) => {
if (value === 0.18) {
return `$${value}`;
}
return value;
}
}
}, // configure y-axis 配置 y 轴
{
orient: 'bottom',
// label: {
// formatMethod: (value, datum) => {
// if (value.startsWith('Jan-')) {
// return `20${value.split('-')[1]}`;
// }
// return '';
// }
// }
}
],
markArea: [
{
x: 'Sep-22',
x1: 'Mar-23',
label: {
text: 'Electricite prices have surged since 2020',
position: 'insideTop'
}
}
],
data: {
id: 'data',
values: [
{ Date: 'Sep-21', Price: 0.144 },
{ Date: 'Oct-21', Price: 0.142 },
{ Date: 'Nov-21', Price: 0.142 },
{ Date: 'Dec-21', Price: 0.142 },
{ Date: 'Jan-22', Price: 0.147 },
{ Date: 'Feb-22', Price: 0.148 },
{ Date: 'Mar-22', Price: 0.15 },
{ Date: 'Apr-22', Price: 0.151 },
{ Date: 'May-22', Price: 0.154 },
{ Date: 'Jun-22', Price: 0.16 },
{ Date: 'Jul-22', Price: 0.164 },
{ Date: 'Aug-22', Price: 0.167 },
{ Date: 'Sep-22', Price: 0.167 },
{ Date: 'Oct-22', Price: 0.166 },
{ Date: 'Nov-22', Price: 0.163 },
{ Date: 'Dec-22', Price: 0.165 },
{ Date: 'Jan-23', Price: 0.168 },
{ Date: 'Feb-23', Price: 0.168 },
{ Date: 'Mar-23', Price: 0.166 }
]
}
};
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();
// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;
markArea can cover bars
What does the proposed API look like?
{
markArea: [
{
includeHalfBand?: boolean
}
]
}