highchart Customclass css not applied to tooltip for dumbbell series

Question

i'm working on dumbbell series highchart

i'm using custom class for charts which is working fine.

but it's not applied in the highchart tooltip and legand. I used the same class for other charts where it's working fine. it isn't working in the dumbbell series i searched lot to find this issue but i couldn't find any solution.

here you can find my code

{
  chart: {
    type: 'dumbbell',
    inverted: true,
    className: Classes.HIGHCHARTS_THEME,
  },

  legend: {
    enabled: false,
  },

  subtitle: {
    text: '1960 vs 2018',
  },

  title: {
    text: 'Change in Life Expectancy',
  },

  tooltip: {
    shared: true,
  },

  xAxis: {
    type: 'category',
  },

  yAxis: {
    title: {
      text: 'Life Expectancy (years)',
    },
  },

  series: [
    {
      type: 'dumbbell',
      name: 'Life expectancy change',
      data: [
        {
          name: 'Austria',
          low: 69,
          high: 82,
        },
        {
          name: 'Belgium',
          low: 70,
          high: 81,
        },
        {
          name: 'Bulgaria',
          low: 69,
          high: 75,
        },
        {
          name: 'Croatia',
          low: 65,
          high: 78,
        },
        {
          name: 'Cyprus',
          low: 70,
          high: 81,
        },
        {
          name: 'Czech Republic',
          low: 70,
          high: 79,
        },
        {
          name: 'Denmark',
          low: 72,
          high: 81,
        },
        {
          name: 'Estonia',
          low: 68,
          high: 78,
        },
        {
          name: 'Finland',
          low: 69,
          high: 81,
        },
        {
          name: 'France',
          low: 70,
          high: 83,
        },
        {
          name: 'Greece',
          low: 68,
          high: 81,
        },
        {
          name: 'Spain',
          low: 69,
          high: 83,
        },
        {
          name: 'Netherlands',
          low: 73,
          high: 82,
        },
        {
          name: 'Ireland',
          low: 70,
          high: 82,
        },
        {
          name: 'Lithuania',
          low: 70,
          high: 75,
        },
        {
          name: 'Luxembourg',
          low: 68,
          high: 83,
        },
        {
          name: 'Latvia',
          low: 70,
          high: 75,
        },
        {
          name: 'Malta',
          low: 69,
          high: 82,
        },
        {
          name: 'Germany',
          low: 69,
          high: 81,
        },
        {
          name: 'Poland',
          low: 68,
          high: 78,
        },
        {
          name: 'Portugal',
          low: 63,
          high: 81,
        },
        {
          name: 'Romania',
          low: 66,
          high: 75,
        },
        {
          name: 'Slovakia',
          low: 70,
          high: 77,
        },
        {
          name: 'Slovenia',
          low: 69,
          high: 81,
        },
        {
          name: 'Sweden',
          low: 73,
          high: 82,
        },
        {
          name: 'Hungary',
          low: 68,
          high: 76,
        },
        {
          name: 'Italy',
          low: 69,
          high: 83,
        },
        {
          name: 'UK',
          low: 71,
          high: 81,
        },
      ],
    },
  ],
  credits: {
    enabled: false,
  },
}

can anyone tell me how to solve this issue

Answer 1

First of all, you nedd to add the custom className to the tooltip options.

  tooltip: {
    className: 'myClass'
  },

Then .myClass is set for a group of tooltips. For the one tooltip is created .myClass-box class, which has a higher priority and where you should apply CSS rules.

.myClass, .myClass-box {
  fill: red;
}

Demo: https://jsfiddle.net/BlackLabel/8hj3rtqk/