Allow label function to return svg elements to be rendered as labels e.g. svg:text

I would like to create a gauge with an icon in the middle and the value below it. For the icon i have created a webfont and it does seem to render. However my tspans that i would like to use to have 2 lines are not rendered. I can actually see the full string (<tspan…)

testIcon(value: string): string {
     return '<tspan x="0" dy="1.2em"></tspan><tspan x="0" dy="1.2em">' + value + '</tspan>';
}

Is there any other way to have 2 lines in the middle of the gauge? Or am i missing something else?

[Misiu]

@naikus I have similar need - I want to have 2 lines in label. I’ve done some research and I was able to pass that text element to function. To be backward compatible I’m checking number of parameters:

function updateGauge(theValue, frame) {
    var val = getValueInPercentage(theValue, min, limit),
        // angle = getAngle(val, 360 - Math.abs(endAngle - startAngle)),
        angle = getAngle(val, 360 - Math.abs(startAngle - endAngle)),
        // this is because we are using arc greater than 180deg
        flag = angle <= 180 ? 0 : 1;
    if (displayValue) {
        if (label.length === 1) {
            gaugeValueElem.textContent = label.call(opts, theValue);
        } else {
            label.call(opts, gaugeValueElem, theValue);
        }

    }
    gaugeValuePath.setAttribute(
        "d",
        pathString(radius, startAngle, angle + startAngle, flag)
    );
}

so now I can declare gaube like this:

var gauge1 = Gauge(document.getElementById("gauge1"), {
  max: 100,
  dialStartAngle: -90,
  dialEndAngle: -90.001,
  value: 20.5,
  label: function(item, value) {
    while (item.firstChild) {
      item.removeChild(item.firstChild);
    }
    var tspan1 = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
    tspan1.textContent=Math.round(value * 100) / 100 + " °C";
    tspan1.setAttribute('x',50);
    tspan1.setAttribute('y',48);
    item.appendChild(tspan1);
    
    var tspan2 = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
    tspan2.textContent="First";
    tspan2.setAttribute('x',50);
    tspan2.setAttribute('y',62);
    item.appendChild(tspan2);
  }
});

Not perfect but works just fine 😃 Here is my working demo: https://codepen.io/Misiu/pen/oEmVWw

Is there a chance this could be added?

[naikus]

Hi @pzontrop, The label function currently can only return plain text and not elements. The future version may have this functionality. Meanwhile you can label display via CSS and show whatever HTML in a div and place that div in the center of the gauge (e.g. via CSS transforms) and update the div in the label function