如何在自定义highcharts按钮中垂直居中显示文本

Question

I am using Highcharts.js and the exporting module to add a custom text button on top of my chart. I'm having troubles centring the text inside the custom button vertically. How it looks:

Instead, "embed chart" text needs to look like the adjacent date picker.

My code:

exporting: {
    buttons: {
        contextButton: {
            enabled: false
        },
        customButton: {
            x: -1,
            y: 30,
            _titleKey: "embed",
            onclick: createChart,
            text: "embed chart",
            theme: {
                'stroke-width': 1,
                height: 8,
                align: 'center',
                stroke: 'silver',
                r: 0
            }
        }
    }
}

jsFiddle: http://jsfiddle.net/F8MjD/

Any suggestions on how to change it?

Answer 1

Updated based on online demo:

The generated code:

    <text x="5" y="18" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:12px;color:black;fill:black;" zIndex="1">
        <tspan x="5">embed chart</tspan>
    </text>

y="18" should be y="13"

Total overview

<g class="highcharts-button" top="-10px" useHtml="true" style="cursor:default;" stroke-linecap="round" transform="translate(710,40)">
    <title/>
    <rect rx="0" ry="0" fill="white" x="0.5" y="0.5" width="83" height="18" stroke="silver" stroke-width="1"/>
    <text x="5" y="13" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:12px;color:black;fill:black;" zIndex="1">
        <tspan x="5">embed chart</tspan>
    </text>
</g>

Now the question is which setup do you need to use with highcharts to change that.

Answer 2

您可以将padding设置为2值。