score:1

i think i found a solution: according to the size of the graph i updated the padding and font size of tooltip. in my case, when the graphic is greater than 205px, the original configuration (padding 2 and font 11.5) is used. when between 205 and 170px is updated to padding 0 and font 9.5, and less than 170px use tooltip shared

$("#container").resize(function () {
  if ($(this).height() < 205 && $(this).height() >= 170) {
    chart.update({
      tooltip: {
        shared: false,
        split: true,
        padding: 0,
        style: {
          fontsize: '9.5px'
        },
      }
    });
  } else if ($(this).height() < 170) {
    chart.update({
      tooltip: {
        shared: true,
        split: false,
        padding: 2,
        style: {
          fontsize: '11.5px'
        },
      }
    });
  } else {
    chart.update({
      tooltip: {
        shared: false,
        split: true,
        padding: 2,
        style: {
          fontsize: '11.5px'
        },
      }
    });
  }
});

score:2

to save space, use shared instead of split tooltips. i also made the tooltip svg instead of html. the scaling seems to work better.

  tooltip: {
    valuesuffix: '°c',
    split: false,
    shared: true,
    enabled: true,
    padding: 2,
    usehtml: false,
    pointformatter: function() {
      return '<span style="color:' + this.series.color + '">' + this.series.name + '</span>: ' + this.y + '<br/>'
    },

https://jsfiddle.net/blaird/go1eem4h/1/ },


Related Query

More Query from same tag