Question Title
Issues with Y-axis display in vchart's area chart
Problem Description
I encountered an issue with display of y-axis values when using the vchart library to draw an area chart. Specifically, the visually taller chart corresponds to a smaller value. For example, I have two data points, one at 2.8w and the other at 3w6. However, on the chart, 3w6 appears visually shorter than 2.8w which I find perplexing. I do not know how to address this issue, and it hinders user experience.
At present, the code I used is shown below:
{
type: 'area',
data: {
fields: {
country: {
domain: ['China', 'USA', 'EU', 'Africa'],
sortIndex: 0
}
},
values: [
//...data values
]
},
title: {
visible: true,
text: 'Stacked area chart of cosmetic products sales'
},
xField: 'type',
yField: 'value',
seriesField: 'country',
legends: [{ visible: true, position: 'middle', orient: 'bottom' }],
tooltip: {
dimension: {
updateContent: data => {
let sum = 0;
data.forEach(datum => {
sum += +datum.value;
});
data.push({
hasShape: 'false',
key: 'Total',
value: sum
});
return data;
}
}
}
};
Solution
The key to solving this issue lies in the "stack" attribute in the area chart of the vchart library. After careful observation, I realized that the problem was due to the stacking feature of the area chart.
Firstly, we need to understand the role of stacking in area charts. When stacking is enabled, values from different series will pile up. If you want to display difference or comparison between two series, you should disable stacking. However, if you want to show an overall trend that consists of two or more elements, stacking should be enabled. Therefore, whether to enable stacking or not should be based on your visualisation demands.
By default, area charts enable stacking. If you think this may impact your chart interpretation, feel free to disable it.
{
type: 'area',
//...omit remaining specs
title: {
visible: true,
text: 'Stacked area chart of cosmetic products sales'
},
stack: false,
xField: 'type',
yField: 'value',
seriesField: 'country',
legends: [{ visible: true, position: 'middle', orient: 'bottom' }]
};
Result Demonstration
With stacking disabled, the Y-axis of the chart will reflect the actual data values, avoiding visually taller charts representing smaller values.
Check out an online demo here: https://codesandbox.io/p/sandbox/line-chart-shows-on-the-left-most-of-canvas-forked-kgj8sj
Relevant Documents
Related API: https://visactor.bytedance.net/vchart/option/areaChart#stack
GitHub: https://github.com/VisActor/VChart
Top comments (0)