How to configure the outer border of the primitive when hovering in a bar chart?

skie1997

Siji Chen

Posted on May 12, 2024

How to configure the outer border of the primitive when hovering in a bar chart?

Title

How to configure the outer border of the primitive when hovering in a bar chart?

Description

How to configure the outer border effect displayed when hovering on a bar chart? I hope that when hovering, there will be an outer border with a certain gap from the primitive.

Solution

You can configure the lineWidth of border thickness, stroke of border color, and distance of gap between the border in bar.state.hover.outerBorder.


Code Example

const spec = {
  type: 'bar',
  data: [
    {
      id: 'barData',
      values: [
        { month: 'Monday', sales: 22 },
        { month: 'Tuesday', sales: 13 },
        { month: 'Wednesday', sales: 25 },
        { month: 'Thursday', sales: 29 },
        { month: 'Friday', sales: 38 }
      ]
    }
  ],
  xField: 'month',
  yField: 'sales',
  bar:{
    state:{
      hover:{
        zIndex:400,
        outerBorder:{
          lineWidth:1, // borderSize
          stroke:'#4e83fd', // borderColor
          distance: 3 // borderSpacing
        }
      }
    }
  }
};

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

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

Results

Online demo:https://codesandbox.io/p/sandbox/hover-border-wq6lsr?file=%2Fsrc%2Findex.ts%3A23%2C23

Related Documentation

Bar Chart Demo:https://www.visactor.io/vchart/demo/bar-chart/basic-column
Bar Chart Toturial:https://www.visactor.io/vchart/guide/tutorial\_docs/Chart\_Types/Bar
github:https://github.com/VisActor/VChart

💖 💪 🙅 🚩
skie1997
Siji Chen

Posted on May 12, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related