tanner
Posts: 5
Joined: Thu Jul 28, 2022 8:44 pm

Tooltip suffix being set incorrectly

Hello I have a chart with 2 y axes. The unit for one axis is '$' and the other is '%'. I am setting the tooltip format for each series accordingly, but for some reason one of the series is getting rendered with both the '$' and '%'. Any idea what is going on here?

Code: Select all

const options = {
  chart: { height: 275 },
  legend: { verticalAlign: 'top' },
  plotOptions: {
    column: { stacking: 'normal', dataLabels: { enabled: true } },
    line: { dataLabels: { enabled: false } },
  },
  series: [
    {
      dataLabels: { format: '${point.y:.3f}' },
      tooltip: { valuePrefix: '$' },
      color: '#46ae82',
      data: [ ... ],
      name: '< 30',
      type: 'column',
      yAxis: '0',
    },
    {
      dataLabels: { format: '${point.y:.3f}' },
      tooltip: { valuePrefix: '$' },
      color: '#1f78b4',
      data: [ ... ],
      name: '30-60',
      type: 'column',
      yAxis: '0',
    },
    {
      dataLabels: { format: '${point.y:.3f}' },
      tooltip: { valuePrefix: '$' },
      color: '#fdbf6f',
      data: [ ... ],
      name: '60-90',
      type: 'column',
      yAxis: '0',
    },
    {
      dataLabels: { format: '${point.y:.3f}' },
      tooltip: { valuePrefix: '$' },
      color: '#ec605b',
      data: [ ... ],
      name: '90-180',
      type: 'column',
      yAxis: '0',
    },
    {
      dataLabels: { format: '${point.y:.3f}' },
      tooltip: { valuePrefix: '$' },
      color: '#e62b24',
      data: [ ... ],
      name: '180+',
      type: 'column',
      yAxis: '0',
    },
    {
      dataLabels: { format: '{point.y:.3f}%' },
      tooltip: { valueSuffix: '%' },
      data: [ ... ],
      name: '90+',
      type: 'line',
      yAxis: '1',
    },
  ],
  title: { text: 'Claim AR Trend By Age Bucket' },
  tooltip: { shared: true, xDateFormat: '%Y %B' },
  xAxis: { type: 'datetime' },
  yAxis: [
    {
      title: { text: '' },
      labels: { format: '${value:.1f}' },
      reversedStacks: false,
      id: '0',
    },
    {
      title: { text: '' },
      labels: { format: '{value:.1f}%' },
      id: '1',
      opposite: true,
    },
  ],
};
Attachments
Screenshot from 2022-10-03 10-46-47.png
Screenshot from 2022-10-03 10-46-47.png (60.23 KiB) Viewed 88 times
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Tooltip suffix being set incorrectly

Hi there,

I have tried to reproduce your issue in an online editor - but everything worked fined for me. Could you please take a look at it, and try to reproduce it? Or change the fake data to your one?

Could you also please confirm, which Highcharts version are you using?

DEMO: https://jsfiddle.net/BlackLabel/u2146tfb/

Thank you in advance,
Regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Usage”