How to set Highcharts data series in x-axis using crosshairs?

Question

I posted a similar question to this one some time ago in which @SebastianBochan helped me and I thought this should be a new topic. This is the question I posted. Given this fiddle I produced with @SebastianBochan previous code, I want to display x-axis values as a label on the x-axis, to be precise, just like the data series appear on the y-axis with the according crosshair, I want to do the same for the x-axis. This is the code I have up to this point:

if (chart.crossLabel2) {
    // update label
    chart.crossLabel2.attr({
        x: x - 13,
        text: chart.xAxis[0].toValue(x).toFixed(2)
    }).show();
} else {
    // draw label
    chart.crossLabel2 = chart.renderer.text(chart.xAxis[0].toValue(x).toFixed(2), chart.plotBottom, y).add();
}

With this code, however, the values DO appear but sadly the values are not in a fixed position relative to the mouse position moving the values from left to right as the pointer moves from left to right. In this case, these values should be at the bottom of the chart (chart.plotBottom), beneath the x-axis as a label, if this option even exists. The values keep jumping up and down, changing their position, everytime I refresh the chart. How can I achieve this? Where did I go wrong?

On the other hand, I would like to add some styling to these labels. In the same fiddle, I added the following css code:

#highcharts-0 > svg > text:nth-child(5) {
    outline: 1px solid gray;
    background-color: #4C4C4C;
    color: #FCFCFC;
    outline-offset: 3px;
    zIndex: 10;
}

What this should do is, change the text color to white and the background color to black or almost black but nothing happens. This code, however, produces the outline (outline-offset: 3px;) perfectly fine creating a box around the text. What about the colors? I tried using:

background-color: #4C4C4C !important;
color: #FCFCFC !important;

Still, nothing happens. I created A new div (<div id="demo">Value</div>) and added the following css to this just for testing purposes only:

#demo {
    color: #FCFCFC;
    background-color: #4C4C4C;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 3px;
    padding-right: 3px;
}

This works, and I would like to add the same styling to the labels as for this div. How can I do so?

Best regards!!

Answer 1

Generally the text element cannot have a background. To do that you should use renderer and add extra shape (rect). Styles should also be applied in css() attr() function instead of reference in CSS (like #highcharts-0 > svg > text:nth-child(5) ).

    function move(event) {
    var x = event.pageX,
      y = event.pageY,
      labelPadding = [5, 5, 5, 5],
      minX = chart.plotLeft,
      maxX = minX + chart.plotWidth,
      minY = chart.plotTop,
      maxY = minY + chart.plotHeight,
      path = ['M', chart.plotLeft, y,
        'L', chart.plotLeft + chart.plotWidth, y,
        'M', x, chart.plotTop,
        'L', x, chart.plotTop + chart.plotHeight
      ],
      bbox, bbox2;

    if (chart.crossLines && chart.crossLabel1 && chart.crossLabel2 && (x < minX || x > maxX || y > maxY || y < minY)) {
      chart.crossLines.hide();
      chart.crossLabel1.hide();
      chart.crossLabel2.hide();
      chart.crossLabel1bck.hide();
      chart.crossLabel2bck.hide();
    } else {

      if (chart.crossLines) {
        // update lines
        chart.crossLines.attr({
          d: path
        }).show();
      } else {
        // draw lines
        chart.crossLines = chart.renderer.path(path).attr({
          'stroke-width': 0.5,
          stroke: 'black',
          dashstyle: 'Dash',
          zIndex: 10
        }).add();
      }

      if (chart.crossLabel1) {
        // update label
        chart.crossLabel1.attr({
          zIndex: 10,
          y: y + 5,
          text: chart.yAxis[0].toValue(y).toFixed(2)
        }).show();

        bbox = chart.crossLabel1.getBBox();
        //background
        chart.crossLabel1bck.attr({
            x: bbox.x - labelPadding[3],
            y: bbox.y - labelPadding[0],
            width: bbox.width + labelPadding[1] + labelPadding[3],
            height: bbox.height + labelPadding[0] + labelPadding[2]
          })
          .show();

      } else {
        // draw label
        chart.crossLabel1 = chart.renderer.text(chart.yAxis[0].toValue(y).toFixed(2), chart.plotLeft - 56, y + 5).css({
          color: 'white'
        }).add();

        bbox = chart.crossLabel1.getBBox();

        //background
        chart.crossLabel1bck = chart.renderer.rect(bbox.x - labelPadding[3], y + 5 - labelPadding[0], bbox.width + labelPadding[1], bbox.height + labelPadding[2]).attr({
            fill: 'black',
            'stroke': 'black',
            'stroke-width': 1,
            zIndex: 9
          })
          .add();
      }

      if (chart.crossLabel2) {
        // update label
        chart.crossLabel2.attr({
          zIndex: 10,
          x: x - 13,
          text: chart.xAxis[0].toValue(x).toFixed(2)
        }).show();

        bbox2 = chart.crossLabel2.getBBox();
        //background
        chart.crossLabel2bck.attr({
          x: bbox2.x - labelPadding[3],
          y: bbox2.y - labelPadding[0],
          width: bbox2.width + labelPadding[1] + labelPadding[3],
          height: bbox2.height + labelPadding[0] + labelPadding[2]
        }).show();
      } else {
        // draw label
        chart.crossLabel2 = chart.renderer.text(chart.xAxis[0].toValue(x).toFixed(2), chart.plotBottom, chart.plotTop + chart.plotHeight + 12 + labelPadding[0]).css({
          color: 'white'
        }).add();

        bbox2 = chart.crossLabel2.getBBox();
        //background
        chart.crossLabel2bck = chart.renderer.rect(bbox.x - labelPadding[3], chart.plotTop + chart.plotHeight - labelPadding[0], bbox.width + labelPadding[1], bbox.height + labelPadding[2]).attr({
            fill: 'black',
            'stroke': 'black',
            'stroke-width': 1,
            zIndex: 9
          })
          .add();
      }
    }
  }

Example: https://jsfiddle.net/djf7fe04/