Can the tip displayed above be configured to modify the background color and text color when hovering a long label?



This content originally appeared on DEV Community and was authored by SimaQ

Title

Can the tip displayed above be configured to modify the background color and text color when hovering a long label?

Description

Can the tip displayed above be configured to modify the background color and text color when hovering a long label?

Image description

Solution

Just configure the poptip property in the theme.

theme:{
    component: {
      poptip: {
        contentStyle: {
          fill: '#fff',
        },
        panel: {
          fill: '#ccc'
        }
      }
    }
  }

Code Example

const spec = {
  type: 'bar',
  data: [
    {
      id: 'barData',
      values: [
        {
          name: 'AppleAppleAppleAppleAppleAppleAppleAppleAppleAppleApple',
          value: 214480
        },
        {
          name: 'Google',
          value: 155506
        },
        {
          name: 'Amazon',
          value: 100764
        },
        {
          name: 'Microsoft',
          value: 92715
        },
        {
          name: 'Coca-Cola',
          value: 66341
        },
        {
          name: 'Samsung',
          value: 59890
        },
        {
          name: 'Toyota',
          value: 53404
        },
        {
          name: 'Mercedes-Benz',
          value: 48601
        },
        {
          name: 'Facebook',
          value: 45168
        },
        {
          name: "McDonald's",
          value: 43417
        },
        {
          name: 'Intel',
          value: 43293
        },
        {
          name: 'IBM',
          value: 42972
        },
        {
          name: 'BMW',
          value: 41006
        },
        {
          name: 'Disney',
          value: 39874
        },
        {
          name: 'Cisco',
          value: 34575
        },
        {
          name: 'GE',
          value: 32757
        },
        {
          name: 'Nike',
          value: 30120
        },
        {
          name: 'Louis Vuitton',
          value: 28152
        },
        {
          name: 'Oracle',
          value: 26133
        },
        {
          name: 'Honda',
          value: 23682
        }
      ]
    }
  ],
  direction: 'horizontal',
  xField: 'value',
  yField: 'name',
  axes: [
    {
      orient: 'bottom',
      visible: false
    }
  ],
  label: {
    visible: true
  },
  theme:{
    component: {
      poptip: {
        contentStyle: {
          fill: '#fff',
        },
        panel: {
          fill: '#ccc'
        }
      }
    }
  }
};

const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();

// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;

Result

Image description

Related Documents


This content originally appeared on DEV Community and was authored by SimaQ