Widgetscript: Hoe zorg ik er voor dat de labels buiten een kolom/staaf valt in plaats van er binnen?

Gegevenslabels buiten een kolom of staaf in plaats van er binnen

Met behulp van onderstaand script is het mogelijk om de gegevenslabels buiten kolommen/staven te laten vallen in plaats van er in:

Voorbeeld
Voor
Ophir_Buchman_0-1648034803433
Na
Ophir_Buchman_1-1648034829612

Gebruikt dit script voor kolomdiagrammen:

const labelHeight = 25

widget.on('domready', function(widget) {
  try {
    console.log('DOM Ready script starting (wid=' + widget.oid + ')');
    
    // Get plot height
    plotHeight = parseInt(widget.chart[0].getElementsByClassName('highcharts-plot-border')[0].getAttribute('height'));
    if (plotHeight < labelHeight * 3) return;

    // Find Highest column
    maxColumnHeight = -1;
    widget.chart[0].getElementsByClassName('highcharts-series','highcharts-column-series').forEach(column => { 
      column.childNodes.forEach(rect => {
        if (parseInt(rect.getAttribute('height')) > maxColumnHeight)
          maxColumnHeight = parseInt(rect.getAttribute('height'))
      }) 
    })

    if (maxColumnHeight == -1) return;

    // Check if we require adjustment
    if (plotHeight - maxColumnHeight > labelHeight) return;

    ratio = (maxColumnHeight - labelHeight) / maxColumnHeight;

    // Adjust Column height and location
    columnsArray = widget.chart[0].getElementsByClassName('highcharts-series','highcharts-column-series');
    labelsArray = widget.chart[0].getElementsByClassName('highcharts-data-labels');

    for (let seriesNum = 0; seriesNum < columnsArray.length; seriesNum++) {
      for (let columnNum = 0; columnNum < columnsArray[seriesNum].childNodes.length; columnNum++) {

        currentHeight = parseInt(columnsArray[seriesNum].childNodes[columnNum].getAttribute('height')); 
        currentY = parseInt(columnsArray[seriesNum].childNodes[columnNum].getAttribute('y'));
        transformLabel = labelsArray[seriesNum].childNodes[columnNum].getAttribute('transform')

        // Calculate offset
        offset = Math.round(currentHeight * (1-ratio))

        // Adjust columns
        columnsArray[seriesNum].childNodes[columnNum].setAttribute('height',currentHeight-offset)
        columnsArray[seriesNum].childNodes[columnNum].setAttribute('y',currentY+offset)

        // Adjust labels
        newLabel = transformLabel.split(',')[0] + ',' + (currentY+offset-labelHeight) + ')';
        labelsArray[seriesNum].childNodes[columnNum].setAttribute('transform',newLabel)
      }
    }
  }
  catch (error) {
    console.error(error);
  }
  finally {
    console.log('DOM Ready script complete (wid=' + widget.oid + ')');
  }
});

Gebruik dit script voor staafdiagrammen:

const labelWidth = 25 + 5 // 5 is the space between the label and the bar

widget.on('domready', function(widget) {
  try {
    console.log('DOM Ready script starting (wid=' + widget.oid + ')');

    // Get plot width
    plotWidth = parseInt(widget.chart[0].getElementsByClassName('highcharts-plot-border')[0].getAttribute('width'));

    // Find Widest bar
    maxBarWidth = -1;
    widget.chart[0].getElementsByClassName('highcharts-series','highcharts-bar-series').forEach(bar => { 
      bar.childNodes.forEach(rect => {
        if (parseInt(rect.getAttribute('height')) > maxBarWidth)
        maxBarWidth = parseInt(rect.getAttribute('height'))
      }) 
    })

    if (maxBarWidth == -1) return;

    // Check if we require adjustment
    if (plotWidth - maxBarWidth > labelWidth) return;

    ratio = (maxBarWidth - labelWidth) / maxBarWidth;

    // Adjust Bar height and location
    barsArray = widget.chart[0].getElementsByClassName('highcharts-series','highcharts-bar-series');
    labelsArray = widget.chart[0].getElementsByClassName('highcharts-data-labels');

    for (let seriesNum = 0; seriesNum < barsArray.length; seriesNum++) {
      for (let barNum = 0; barNum < barsArray[seriesNum].childNodes.length; barNum++) {
        currentWidth = parseInt(barsArray[seriesNum].childNodes[barNum].getAttribute('height')); 
        currentY = parseInt(barsArray[seriesNum].childNodes[barNum].getAttribute('y'));
        transformLabel = labelsArray[seriesNum].childNodes[barNum].getAttribute('transform')

        // Calculate offset
        offset = Math.round(currentWidth * (1-ratio))

        // Adjust bars
        barsArray[seriesNum].childNodes[barNum].setAttribute('height',currentWidth-offset)
        barsArray[seriesNum].childNodes[barNum].setAttribute('y',currentY+offset)

        // Adjust labels
        newLabel = 'translate(' + (currentWidth - offset) + ',' + transformLabel.split(',')[1]
        labelsArray[seriesNum].childNodes[barNum].setAttribute('transform',newLabel)
      }
    }
  }
  catch (error) {
    console.error(error);
  }
  finally {
    console.log('DOM Ready script complete (wid=' + widget.oid + ')');
  }
});