VChart
VChart copied to clipboard
[Bug] fill & stroke are not effective for inside label
Version
1.11.0
Link to Minimal Reproduction
null
Steps to Reproduce
Caused by smart invert, need to fix the priority of style config and smart invert.
const spec = {
type: 'bar',
direction: 'horizontal',
data: [
{
id: 'barData',
values: [
{
State: 'WY',
Age: 'Under 5 Years',
Population: 25635
},
{
State: 'WY',
Age: '5 to 13 Years',
Population: 1890
},
{
State: 'WY',
Age: '14 to 17 Years',
Population: 9314
},
{
State: 'DC',
Age: 'Under 5 Years',
Population: 30352
},
{
State: 'DC',
Age: '5 to 13 Years',
Population: 20439
},
{
State: 'DC',
Age: '14 to 17 Years',
Population: 10225
},
{
State: 'VT',
Age: 'Under 5 Years',
Population: 38253
},
{
State: 'VT',
Age: '5 to 13 Years',
Population: 42538
},
{
State: 'VT',
Age: '14 to 17 Years',
Population: 15757
},
{
State: 'ND',
Age: 'Under 5 Years',
Population: 51896
},
{
State: 'ND',
Age: '5 to 13 Years',
Population: 67358
},
{
State: 'ND',
Age: '14 to 17 Years',
Population: 18794
},
{
State: 'AK',
Age: 'Under 5 Years',
Population: 72083
},
{
State: 'AK',
Age: '5 to 13 Years',
Population: 85640
},
{
State: 'AK',
Age: '14 to 17 Years',
Population: 22153
}
]
}
],
yField: 'State',
xField: 'Population',
seriesField: 'Age',
percent: true,
stack: true,
legends: {
visible: true
},
axes: [
{
orient: 'left',
label: {
formatMethod: val => {
return `${(val * 100).toFixed(2)}%`;
}
}
}
],
tooltip: {
mark: { visible: false }
},
label: {
visible: true,
position: 'inside',
style: {
fill: '#aaabbb',
stroke: 'red',
}
},
};
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();
// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;
Current Behavior
null
Expected Behavior
null
Environment
- OS:
- Browser:
- Framework:
Any additional comments?
No response