VChart
VChart copied to clipboard
[Bug] Axis is clip when chart size is small
Version
2.0.0
Link to Minimal Reproduction
null
Steps to Reproduce
const spec = {
"width": 236,
"height": 260,
"0": "{",
"1": "}",
"padding": {},
"type": "waterfall",
"data": [
{
"id": "Waterfall0",
"values": [
{
"month": "1月1231",
"netProfit": 10
},
{
"month": "2月",
"netProfit": 12
},
{
"month": "3月",
"netProfit": -8
},
{
"month": "4月",
"netProfit": 15
},
{
"month": "5月",
"netProfit": 9
},
{
"month": "6月",
"netProfit": 11
},
{
"month": "7月",
"netProfit": -5
},
{
"month": "8月",
"netProfit": 14
},
{
"month": "9月",
"netProfit": 7
},
{
"month": "10月",
"netProfit": 10
},
{
"month": "11月",
"netProfit": 12
},
{
"month": "12月",
"netProfit": 9
}
],
"fields": {
"month": {
"sortIndex": 0
}
}
}
],
"series": [
{
"type": "waterfall",
"id": "series0",
"dataId": "Waterfall0",
"xField": [
"month"
],
"yField": [
"netProfit"
],
"customConfig": {
"showPercent": false,
"showSeparator": true,
"showUnit": ""
},
"bar": {
"style": {
"cornerRadius": 6
}
},
"stackLabel": {
"visible": true,
"position": "max",
"offset": 0,
"style": {
"type": "text",
"fontFamily": "DIN Alternate"
}
},
"legends": {
"visible": false
},
"total": {
"type": "end",
"text": "总计",
"tagField": ""
}
}
],
"axes": [
{
"orient": "bottom",
"type": "band",
"label": {
"visible": true,
"style": {
"fill": "#646A73",
"fontSize": 12,
"lineHeight": 0,
"maxLineWidth": 75
},
"space": 16,
"autoRotate": true,
"autoHide": true,
"autoRotateAngle": [
0,
-45,
-90
]
},
"title": {
"visible": true,
"text": "month",
"style": {
"fill": "#646A73"
}
},
"domainLine": {
"visible": false,
"style": {
"stroke": "#D0D3D6",
"lineWidth": 0.5
}
},
"paddingInner": [
0.45,
0.1
],
"grid": {
"style": {
"lineDash": [
3,
0
],
"stroke": "rgba(176, 176, 176, 0.4)",
"lineWidth": 0.5
}
},
"sampling": false,
"trimPadding": true,
"paddingOuter": [
0.075,
0
],
"innerOffset": {
"left": 6,
"right": 6
},
"tick": {}
},
{
"seriesId": [
"series0"
],
"orient": "left",
"type": "linear",
"label": {
"visible": true,
"style": {
"angle": [
0
]
},
"space": 16
},
"title": {
"visible": false,
"style": {
"fill": "#646A73"
}
},
"domainLine": {
"visible": false,
"style": {
"stroke": "#D0D3D6",
"lineWidth": 0.5
}
},
"sampling": true,
"trimPadding": true,
"paddingInner": [
0.45,
0.1
],
"paddingOuter": [
0.075,
0
],
"tick": {
"tickCount": 7
},
"grid": {
"style": {
"lineDash": [
3,
0
],
"stroke": "rgba(176, 176, 176, 0.4)",
"lineWidth": 0.5
}
}
}
],
"crosshair": {
"trigger": "hover",
"xField": {
"visible": true,
"line": {
"type": "rect",
"width": "100%",
"style": {
"fill": "#D9D9D9",
"fillOpacity": 0.2
}
}
},
"yField": {
"visible": false
}
},
"legends": [
{
"visible": true,
"orient": "top",
"position": "start",
"defaultSelected": [
"增加值",
"减少值",
"总计"
],
"item": {
"label": {
"style": {
"fill": "#646A73"
}
}
}
}
],
"title": [],
"tooltip": {
"parentElement": "waterfall1",
"confine": true,
"style": {
"titleLabel": {
"maxWidth": 300,
"multiLine": true
},
"keyLabel": {
"maxWidth": 100,
"multiLine": true
},
"valueLabel": {
"maxWidth": 200,
"multiLine": true
}
},
"mark": {
"shapeType": "circle",
"content": {}
},
"dimension": {
"shapeType": "circle",
"content": {}
}
},
"region": [
{
"style": {
"cursor": "pointer"
}
}
],
"theme": "builder-mobile",
"color": [
"#F76964",
"#62D256",
"#4E83FD"
],
"indicator": {}
}
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
Expected Behavior
no clip
Environment
- OS:
- Browser:
- Framework:
Any additional comments?
No response