VChart icon indicating copy to clipboard operation
VChart copied to clipboard

[Bug] Axis is clip when chart size is small

Open purpose233 opened this issue 4 months ago • 0 comments

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

Image

Expected Behavior

no clip

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

purpose233 avatar Jul 31 '25 07:07 purpose233