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

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 ho…


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


Print Share Comment Cite Upload Translate Updates
APA

SimaQ | Sciencx (2024-06-26T07:25:50+00:00) Can the tip displayed above be configured to modify the background color and text color when hovering a long label?. Retrieved from https://www.scien.cx/2024/06/26/can-the-tip-displayed-above-be-configured-to-modify-the-background-color-and-text-color-when-hovering-a-long-label/

MLA
" » Can the tip displayed above be configured to modify the background color and text color when hovering a long label?." SimaQ | Sciencx - Wednesday June 26, 2024, https://www.scien.cx/2024/06/26/can-the-tip-displayed-above-be-configured-to-modify-the-background-color-and-text-color-when-hovering-a-long-label/
HARVARD
SimaQ | Sciencx Wednesday June 26, 2024 » Can the tip displayed above be configured to modify the background color and text color when hovering a long label?., viewed ,<https://www.scien.cx/2024/06/26/can-the-tip-displayed-above-be-configured-to-modify-the-background-color-and-text-color-when-hovering-a-long-label/>
VANCOUVER
SimaQ | Sciencx - » Can the tip displayed above be configured to modify the background color and text color when hovering a long label?. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/06/26/can-the-tip-displayed-above-be-configured-to-modify-the-background-color-and-text-color-when-hovering-a-long-label/
CHICAGO
" » Can the tip displayed above be configured to modify the background color and text color when hovering a long label?." SimaQ | Sciencx - Accessed . https://www.scien.cx/2024/06/26/can-the-tip-displayed-above-be-configured-to-modify-the-background-color-and-text-color-when-hovering-a-long-label/
IEEE
" » Can the tip displayed above be configured to modify the background color and text color when hovering a long label?." SimaQ | Sciencx [Online]. Available: https://www.scien.cx/2024/06/26/can-the-tip-displayed-above-be-configured-to-modify-the-background-color-and-text-color-when-hovering-a-long-label/. [Accessed: ]
rf:citation
» Can the tip displayed above be configured to modify the background color and text color when hovering a long label? | SimaQ | Sciencx | https://www.scien.cx/2024/06/26/can-the-tip-displayed-above-be-configured-to-modify-the-background-color-and-text-color-when-hovering-a-long-label/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.