DEV Community

Siji Chen
Siji Chen

Posted on

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

Top comments (0)