CODEWITHSUNDEEP
javascripthighcharts
Miyamiya
Miyamiya

Reputation: 5

I want to change the font of the name of the series in tooltip in Highcharts

I haven't figure out how to change the "Return of:" in the tooltip. FontSize in the tooltip only affects x and y data, but I would like to change the font of the series name, "Return of:", to be displayed in the same size.

var xData = [];
var yData = [];
for (var i = 0; i < 1000; i++) {
  xData.push(Math.round((Math.random() - 0.5) * 100));
  yData.push(Math.round((Math.random() - 0.5) * 100));
}

Highcharts.chart('container', {
  chart: {
    type: 'scatter',
    height: 500,
    width: 500,
    
  },
  credits: {
    enabled: false
  },

  legend: {
    enabled: false
  },
  title: {
    text: 'Asset Return Pairs',
    fontSize: '30px'
  },
  xAxis: {
    title: {
      text: 'Asset 1'
    },
        
    max: 50,
    tickInterval: 5,
    labels: {
      format: '{value}%'
    }
  },
  yAxis: {
    title: {
      text: 'Asset 2'
    },
   
    min: -50,
    max: 50,
    tickInterval: 5,
    labels: {
      format: '{value}%'
    }
  },
  plotOptions: {
  series: {
    name: {
      style: {
        fontSize: '25px'
      }
    }
  }
},
  
  tooltip: {
    pointFormat: 'Asset 1: <b>{point.x}%</b> <br>Asset 2: <b>{point.y}%</b>',
    style: {fontSize: 13.5},
    
  },
  series: [{
    name: 'Return of:',
    style: {fontSize: 13},
    data: xData.map(function(xVal, index) {
      return [xVal, yData[index]];
    })
  }]
});

Here is also link to jsfiddle: https://jsfiddle.net/lauri1/6a97yngm/25/

Upvotes: 0

Views: 64

Answers (1)

Nahid
Nahid

Reputation: 336

I think in your code plotOptions doesn't support the style property in this Highcharts.

You can use formatter property within the tooltip options. Use this

  tooltip: {
    pointFormat: 'Asset 1: <b>{point.x}%</b> <br>Asset 2: <b>{point.y}%</b>',
    style: {fontSize: 20.5},
    formatter: function() {
    return '<span style="font-size: 20px">Return of:</span><br>Asset 1: <b>' + this.point.x + '%</b><br>Asset 2: <b>' + this.point.y + '%</b>';
  }

Here's the updated fiddler : https://jsfiddle.net/8zqot56u/

Upvotes: 1

Related Questions