[Bug] histogram background have offset when set axes inverse: true
Open
Nobody has claimed this yet.
bug
up for grabs
- Dominant language
- TypeScript
- Stars
- 1.8k
- Forks
- 221
- Avg merge
- 1d 6h
- Merged PRs (30d)
- 26
Description
Version
latest
Link to Minimal Reproduction
https://visactor.io/vchart/demo/histogram-chart/histogram-different-bin
Steps to Reproduce
访问:https://visactor.io/vchart/demo/histogram-chart/histogram-different-bin
复现代码
const spec = {
type: 'histogram',
xField: 'from',
x2Field: 'to',
yField: 'profit',
seriesField: 'type',
barPadding: 10,
bar: {
style: {
stroke: 'white',
lineWidth: 1
}
},
axes: [
{
orient: 'bottom',
inverse: true,
nice: false,
tick: {
visible: true
}
}
],
title: {
text: 'Profit',
textStyle: {
align: 'center',
height: 50,
lineWidth: 3,
fill: '#333',
fontSize: 25,
fontFamily: 'Times New Roman'
}
},
tooltip: {
visible: true,
mark: {
title: {
key: 'title',
value: 'profit'
},
content: [
{
key: datum => datum['from'] + '~' + datum['to'],
value: datum => datum['profit']
}
]
}
},
data: [
{
name: 'data1',
values: [
{
from: 0,
to: 10,
profit: 2,
type: 'A'
},
{
from: 10,
to: 16,
profit: 3,
type: 'B'
},
{
from: 16,
to: 18,
profit: 15,
type: 'C'
},
{
from: 18,
to: 26,
profit: 12,
type: 'D'
},
{
from: 26,
to: 32,
profit: 22,
type: 'E'
},
{
from: 32,
to: 56,
profit: 7,
type: 'F'
},
{
from: 56,
to: 62,
profit: 17,
type: 'G'
}
]
}
]
}
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
X轴反向直方图Hover背景偏移
Expected Behavior
X轴反向直方图Hover背景正常渲染
Environment
Any additional comments?
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the histogram-different-bin demo linked in the issue and reproduce the hover background offset with the x-axis set to inverse: true. Trace the histogram hover rendering and coordinate handling for reversed axes; done means the hover background aligns with the histogram bar in the linked reproduction.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- data-visualization
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100