DEV Community: Xuefei Li

How to configure the style of the legend separately in VChart and change the shape of the graphic

Xuefei Li — Thu, 20 Jun 2024 08:54:49 +0000

Question title

How to configure the style of legends separately in VChart and change the shape of graphics

Problem description

How to change the legend item graphic of a column chart series to a circle

Solution

Legends in VChart can be customized through the data configuration item, where the graphic property is in the shapeproperty of the legend item

 legends: {
    visible: true,
    data: items => {
      return items.map(item => {
        if(item.label === 'Under 5 Years'){
          item.shape.symbolType = 'circle';
        }
        return item;
      });
    },
  },

Code example

const spec = {
  type: 'bar',
  data: [
    {
      id: 'barData',
      values: [
        {
          State: 'WY',
          Age: 'Under 5 Years',
          Population: 25635
        },
        {
          State: 'WY',
          Age: '5 to 13 Years',
          Population: 1890
        },
        {
          State: 'WY',
          Age: '14 to 17 Years',
          Population: 9314
        },
        {
          State: 'DC',
          Age: 'Under 5 Years',
          Population: 30352
        },
        {
          State: 'DC',
          Age: '5 to 13 Years',
          Population: 20439
        },
        {
          State: 'DC',
          Age: '14 to 17 Years',
          Population: 10225
        },
        {
          State: 'VT',
          Age: 'Under 5 Years',
          Population: 38253
        },
        {
          State: 'VT',
          Age: '5 to 13 Years',
          Population: 42538
        },
        {
          State: 'VT',
          Age: '14 to 17 Years',
          Population: 15757
        },
        {
          State: 'ND',
          Age: 'Under 5 Years',
          Population: 51896
        },
        {
          State: 'ND',
          Age: '5 to 13 Years',
          Population: 67358
        },
        {
          State: 'ND',
          Age: '14 to 17 Years',
          Population: 18794
        },
        {
          State: 'AK',
          Age: 'Under 5 Years',
          Population: 72083
        },
        {
          State: 'AK',
          Age: '5 to 13 Years',
          Population: 85640
        },
        {
          State: 'AK',
          Age: '14 to 17 Years',
          Population: 22153
        }
      ]
    }
  ],
  xField: 'State',
  yField: 'Population',
  seriesField: 'Age',
  stack: true,
  legends: {
    visible: true,
    data: items => {
      return items.map(item => {
        if(item.label === 'Under 5 Years'){
          item.shape.symbolType = 'circle';
        }
        return item;
      });
    },
  },
  bar: {
    // The state style of bar
    state: {
      hover: {
        stroke: '#000',
        lineWidth: 1
      }
    }
  }
};

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

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

Results show

How to make the axis label with graphics in VChart?

Xuefei Li — Thu, 20 Jun 2024 08:36:46 +0000

How to make the axis label with graphics in VChart?

Question title

How to make axis labels with graphics in VChart?

Problem description

Want to mark the special value label of the x-axis with a graph

Solution

The label of the coordinate axis currently supports the configuration of rich text content.

 label: {
        formatMethod: label => {
          return {
            type: 'rich',
            text: [
              {
                text: `${label}`,
                fontSize: 16,
                fontWeight: 'bold',
                fontStyle: 'italic'
              },
              { image: `icon address`, width: 40, height: 40 },
            ]
          };
        }
      }

Code example

const rankIcon = {
  'Top 1': 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/gold-medal.svg',
  'Top 2': 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/silver-medal.svg',
  'Top 3': 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/bronze-medal.svg'
};
const spec = {
  type: 'bar',
  height: 300,
  data: [
    {
      id: 'barData',
      values: [
        { name: 'Top 1', value: 990 },
        { name: 'Top 2', value: 680 },
        { name: 'Top 3', value: 255 }
      ]
    }
  ],
  barWidth: 20,
  yField: 'name',
  xField: 'value',
  bar: {
    style: {
      cornerRadius: [0, 10, 10, 0],
      fill: {
        gradient: 'linear',
        x0: 0,
        y0: 0.5,
        x1: 1,
        y1: 0.5,
        stops: [
          { offset: 0, color: 'rgb(255,163,1)' },
          { offset: 1, color: 'rgb(255,4,0)' }
        ]
      }
    }
  },
  barBackground: {
    visible: true
  },
  label: {
    visible: true,
    position: 'center',
    style: {
      fill: 'white',
      stroke: false
    }
  },
  direction: 'horizontal',
  seriesField: 'type',
  padding: { left: 50 },
  axes: [
    {
      orient: 'left',
      minWidth: 50,
      label: {
        formatMethod: label => {
          return {
            type: 'rich',
            text: [
              { image: rankIcon[label], width: 40, height: 40 },
              {
                text: `${label}`,
                fontSize: 16,
                fontWeight: 'bold',
                fontStyle: 'italic'
              }
            ]
          };
        }
      }
    }
  ]
};
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();

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

Results show

How to avoid the outline being blocked when hovering the pie chart sector?

Xuefei Li — Thu, 20 Jun 2024 08:24:34 +0000

Question title

How to avoid the outline being blocked when hovering the pie chart sector in VChart?

Problem description

The hover stroke of the pie chart sector is configured, but it will be obscured by other sectors

You can adjust the level of the element when hover, so that the hover element is always displayed above other sectors, which can avoid the problem of stroke obstruction

 pie: {
    state: {
      hover: {
        stroke: 'black',
        lineWidth: 4,
        zIndex: 1
      }
    }
  },

Code example

const spec = {
  type: 'pie',
  data: [
    {
      id: 'id0',
      values: [
        { type: 'oxygen', value: '46.60' },
        { type: 'silicon', value: '27.72' },
        { type: 'aluminum', value: '8.13' },
        { type: 'iron', value: '5' },
        { type: 'calcium', value: '3.63' },
        { type: 'sodium', value: '2.83' },
        { type: 'potassium', value: '2.59' },
        { type: 'others', value: '3.5' }
      ]
    }
  ],
  outerRadius: 0.8,
  valueField: 'value',
  categoryField: 'type',
  title: {
    visible: true,
    text: 'Statistics of Surface Element Content'
  },
  legends: {
    visible: true,
    orient: 'left'
  },
  label: {
    visible: true
  },
  pie: {
    state: {
      hover: {
        stroke: 'black',
        lineWidth: 4,
        zIndex: 1
      }
    }
  },
  tooltip: {
    mark: {
      content: [
        {
          key: datum => datum['type'],
          value: datum => datum['value'] + '%'
        }
      ]
    }
  }
};

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

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

Results show

github：https://www.visactor.io/vchart/option/pieChart#pie.style.zIndex
Related demo: https://www.visactor.io/vchart/demo/pie-chart/basic-pie

How to achieve only selecting the current item in VChart when clicking on the legend?

Xuefei Li — Thu, 20 Jun 2024 08:16:39 +0000

Question title

How to implement VChart to only select the current item when clicking on a legend?

Problem description

When clicking on the legend, can you change to select the current item and not select other items?

Solution

VChart supports configuring legend selection mode, including single selection mode

legends: {
    orient: 'right',
    selectMode: 'single', // Configure legend selection mode
    defaultSelected: ['Type D'],
    title: {
      visible: true,
      text: 'Single Select'
    }
  }

Code example

const data = [
  {
    name: 'Type A',
    value: 33934,
    year: 2010
  },
  {
    name: 'Type A',
    value: 52503,
    year: 2011
  },
  {
    name: 'Type A',
    value: 57177,
    year: 2012
  },
  {
    name: 'Type A',
    value: 69658,
    year: 2013
  },
  {
    name: 'Type A',
    value: 97031,
    year: 2014
  },
  {
    name: 'Type A',
    value: 119931,
    year: 2015
  },
  {
    name: 'Type A',
    value: 137133,
    year: 2016
  },
  {
    name: 'Type A',
    value: 154175,
    year: 2017
  },
  {
    name: 'Type B',
    value: 24916,
    year: 2010
  },
  {
    name: 'Type B',
    value: 24064,
    year: 2011
  },
  {
    name: 'Type B',
    value: 29742,
    year: 2012
  },
  {
    name: 'Type B',
    value: 29851,
    year: 2013
  },
  {
    name: 'Type B',
    value: 32490,
    year: 2014
  },
  {
    name: 'Type B',
    value: 30282,
    year: 2015
  },
  {
    name: 'Type B',
    value: 38121,
    year: 2016
  },
  {
    name: 'Type B',
    value: 40434,
    year: 2017
  },
  {
    name: 'Type C',
    value: 11744,
    year: 2010
  },
  {
    name: 'Type C',
    value: 17722,
    year: 2011
  },
  {
    name: 'Type C',
    value: 16005,
    year: 2012
  },
  {
    name: 'Type C',
    value: 19771,
    year: 2013
  },
  {
    name: 'Type C',
    value: 20185,
    year: 2014
  },
  {
    name: 'Type C',
    value: 24377,
    year: 2015
  },
  {
    name: 'Type C',
    value: 32147,
    year: 2016
  },
  {
    name: 'Type C',
    value: 39389,
    year: 2017
  },
  {
    name: 'Type D',
    value: null,
    year: 2010
  },
  {
    name: 'Type D',
    value: null,
    year: 2011
  },
  {
    name: 'Type D',
    value: 7988,
    year: 2012
  },
  {
    name: 'Type D',
    value: 12169,
    year: 2013
  },
  {
    name: 'Type D',
    value: 15112,
    year: 2014
  },
  {
    name: 'Type D',
    value: 22452,
    year: 2015
  },
  {
    name: 'Type D',
    value: 34400,
    year: 2016
  },
  {
    name: 'Type D',
    value: 34227,
    year: 2017
  },
  {
    name: 'Other',
    value: 12908,
    year: 2010
  },
  {
    name: 'Other',
    value: 5948,
    year: 2011
  },
  {
    name: 'Other',
    value: 8105,
    year: 2012
  },
  {
    name: 'Other',
    value: 11248,
    year: 2013
  },
  {
    name: 'Other',
    value: 8989,
    year: 2014
  },
  {
    name: 'Other',
    value: 11816,
    year: 2015
  },
  {
    name: 'Other',
    value: 18274,
    year: 2016
  },
  {
    name: 'Other',
    value: 18111,
    year: 2017
  }
];
const spec = {
  type: 'line',
  data: [
    {
      id: 'line',
      values: data
    }
  ],
  xField: 'year',
  yField: 'value',
  seriesField: 'name',
  legends: {
    orient: 'right',
    selectMode: 'single', // Configure legend selection mode
    defaultSelected: ['Type D'],
    title: {
      visible: true,
      text: 'Single Select'
    }
  },
  axes: [
    {
      orient: 'left',
      label: {
        inside: true,
        space: 2,
        style: {
          textBaseline: 'bottom',
          textAlign: 'start',
          fontWeight: 'bold'
        }
      },
      tick: {
        visible: false
      },
      domainLine: {
        visible: false
      },
      title: {
        visible: true,
        text: 'Axis Title'
      }
    }
  ]
};

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

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

Results show

Legend Tutorial: https://www.visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Legend
Related demo: https://www.visactor.io/vchart/demo/legend/single-select

How to configure animations in VChart portfolio diagrams?

Xuefei Li — Thu, 20 Jun 2024 08:14:55 +0000

Question title

How to configure animations for VChart's combo chart?

Problem description

In a biaxial diagram, how to make the left and right axes execute the animation in order, and after the left axis column is executed, the right axis line will play the animation again?

Firstly, in VChart, its animation can be configured within each series. We can configure animations separately in columns and lines.

Then there is a dedicated configuration for outro animation in the series: animationAppear.

animationAppear?: {
  preset?: Preset | false;
  duration?: number;
  delay?: number;
  easing?: EasingType;
  oneByOne?: boolean;
};

We can configure delay on the online animation to start playing outro animation after the column completes the animation.

series: [{
      type: 'bar',
      id: 'bar',
      animationAppear: {
        duration: 500
      }
    },
    {
      type: 'line',
      id: 'line',
      animationAppear: {
        delay: 500,
      }
    }
]

In addition, if oneByOneis configured on the bar chart animation, it should be noted that the total animation duration of the bar chart = x-axis number* duration

Code example

const spec = {
  type: 'common',
  seriesField: 'color',
  data: [
    {
      id: 'id0',
      values: [
        { x: '周一', type: '早餐', y: 15 },
        { x: '周一', type: '午餐', y: 25 },
        { x: '周二', type: '早餐', y: 12 },
        { x: '周二', type: '午餐', y: 30 },
        { x: '周三', type: '早餐', y: 15 },
        { x: '周三', type: '午餐', y: 24 },
        { x: '周四', type: '早餐', y: 10 },
        { x: '周四', type: '午餐', y: 25 },
        { x: '周五', type: '早餐', y: 13 },
        { x: '周五', type: '午餐', y: 20 },
        { x: '周六', type: '早餐', y: 10 },
        { x: '周六', type: '午餐', y: 22 },
        { x: '周日', type: '早餐', y: 12 },
        { x: '周日', type: '午餐', y: 19 }
      ]
    },
    {
      id: 'id1',
      values: [
        { x: '周一', type: '饮料', y: 22 },
        { x: '周二', type: '饮料', y: 43 },
        { x: '周三', type: '饮料', y: 33 },
        { x: '周四', type: '饮料', y: 22 },
        { x: '周五', type: '饮料', y: 10 },
        { x: '周六', type: '饮料', y: 30 },
        { x: '周日', type: '饮料', y: 50 }
      ]
    }
  ],
  series: [
    {
      type: 'bar',
      id: 'bar',
      dataIndex: 0,
      label: { visible: true },
      seriesField: 'type',
      dataIndex: 0,
      xField: ['x', 'type'],
      yField: 'y',
      animationAppear: {
        duration: 500, 
        oneByOne: true
      }
    },
    {
      type: 'line',
      id: 'line',
      dataIndex: 1,
      label: { visible: true },
      seriesField: 'type',
      xField: 'x',
      yField: 'y',
      stack: false,
      animationAppear: {
        delay: 500 * 7,
        duration: 500,
        oneByOne: true
      }
    }
  ],
  axes: [
    { orient: 'left', seriesIndex: [0] },
    { orient: 'right', seriesId: ['line'], grid: { visible: false } },
    { orient: 'bottom', label: { visible: true }, type: 'band' }
  ],
  legends: {
    visible: true,
    orient: 'bottom'
  }
};

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

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

Results show

Animation Tutorial: https://www.visactor.io/vchart/guide/tutorial_docs/Animation/Animation_Types
Related demo: https://www.visactor.io/vchart/demo/storytelling/bar-oneByOne-series

How to configure different colors for a line in VChart

Xuefei Li — Sat, 11 May 2024 10:17:50 +0000

Question title

How to configure different colors for a wire

Problem description

Part of the line is predicted data, and it is hoped that the dashed line and color will be different when predicting data.

Solution

VChart lines can return different styles to different data on a line through a function. When there is a situation of inconsistent styles, we will draw the line segment from the previous data to the current data as the style corresponding to the current data when drawing

Code example

const spec = {
  type: 'line',
  data: {
    values: [
      {
        x: '1st',
        y: 0.012
      },
      {
        x: '2nd',
        y: -0.01
      },
      {
        x: '3rd',
        y: 0.005
      },
      {
        x: '4th',
        y: 0.007
      },
      {
        x: '5th',
        y: 0.01
      },
      {
        x: '6th',
        y: 0.017
      },
      {
        x: '7th',
        y: 0.022
      },
      {
        x: '8th (prediction)',
        y: 0.033,
        latest: true
      }
    ]
  },
  xField: 'x',
  yField: 'y',
  line: {
    style: {
      lineDash: data => {
        if (data.latest) {
          return [5, 5];
        }
        return [0];
      },
      stroke: data => {
        if (data.latest) {
          return 'green';
        }
        return 'blue';
      }
    }
  },
  point: {
    style: {
      fill: data => {
        if (data.latest) {
          return 'green';
        }
        return 'blue';
      }
    }
  }
};
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();

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

Results show

Demo: https://codesandbox.io/p/sandbox/vchart-disabletriggerevent-forked-mxqfr3?file=%2Fsrc%2Findex.js%3A59%2C13

Can VChart be server-side rendering?

Xuefei Li — Sat, 11 May 2024 10:14:51 +0000

Question title

Can server-side rendering be used?

Problem description

Can server-side rendering be used? I want to provide a service to obtain chart images at the server level.

Solution

VChart supports Node server-side rendering. The drawing library VRender used by VChart supports Node environment rendering. In addition to VChart, you only need to install the canvas package at the server level.

Code example

const fs = require('fs');

const VChart = require('@visactor/vchart');
const Canvas = require('canvas');

// normal spec 
const spec = {
  type: 'radar',
  data: [
    {
      id: 'Map',
      values: [
        { key: 'North', value: 31, category: 'Destroyer' },
        { key: 'Northeast', value: 32, category: 'Destroyer' },
        { key: 'East', value: 21, category: 'Destroyer' },
        { key: 'Southeast', value: 15, category: 'Destroyer' },
        { key: 'South', value: 50, category: 'Destroyer' },
        { key: 'Southwest', value: 44, category: 'Destroyer' },
        { key: 'West', value: 32, category: 'Destroyer' },
        { key: 'Northwest', value: 32, category: 'Destroyer' },
        { key: 'North', value: 31, category: 'Destroyer' },
        { key: 'Northeast', value: 32, category: 'Destroyer' },
        { key: 'East', value: 21, category: 'Destroyer' },
        { key: 'Southeast', value: 40, category: 'aircraft carrier' },
        { key: 'South', value: 25, category: 'aircraft carrier' },
        { key: 'Southwest', value: 22, category: 'aircraft carrier' },
        { key: 'West', value: 18, category: 'aircraft carrier' },
        { key: 'Northwest', value: 7, category: 'aircraft carrier' },
        { key: 'North', value: 24, category: 'aircraft carrier' },
        { key: 'Northeast', value: 43, category: 'aircraft carrier' },
        { key: 'East', value: 42, category: 'aircraft carrier' }
      ]
    }
  ],
  categoryField: 'key',
  valueField: 'value',
  seriesField: 'category',
  legends: {
    visible: true,
    orient: 'bottom'
  }
};
const cs = new VChart.default(spec, {
  // set mode to 'node'
  mode: 'node',
  modeParams: Canvas,
  animation: false // close animation
});

cs.renderSync();

// export image
const buffer = cs.getImageBuffer();
fs.writeFileSync(`./chart.png`, buffer);

Results show

Demo: https://www.visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/node

How to configure a correlation scatter plot in VChart

Xuefei Li — Sat, 11 May 2024 10:11:26 +0000

Question title

How to configure a correlation scatter plot

Problem description

Expect the scatter plot to be configured with the following effect

Solution

VChart supports scatter correlation plots after the 1.3.0 version, and its key configuration is as follows:

The categoryFieldproperty is declared as a node name field configuration
The valueFieldproperty is declared as a related data field configuration
The sizeFieldproperty is declared as a node size data field configuration
The sizeRangeproperty is declared as the node size mapping range
Correlation Chart.innerRadius: Node distribution inner radius
correlations Chart.outerRadius: outer radius of node distribution

Code example

const spec = {
  type: 'correlation',
  data: [
    {
      values: [
        { word: '输入法哪个好用', pv: 15952, ratio: 94, sim: 3932 },
        { word: '谷歌拼音输入法', pv: 11032, ratio: 97, sim: 2799 },
        { word: '讯飞输入法', pv: 107908, ratio: 102, sim: 2645 },
        { word: 'QQ输入法', pv: 74912, ratio: 99, sim: 2189 },
        { word: '百度输入法', pv: 193624, ratio: 121, sim: 2100 },
        { word: '搜狗输入法', pv: 835168, ratio: 88, sim: 2050 },
        { word: '谷歌输入法', pv: 14140, ratio: 96, sim: 1953 },
        { word: '手心输入法', pv: 19236, ratio: 97, sim: 1870 },
        { word: '输入法不见了', pv: 1968, ratio: 109, sim: 1705 },
        { word: '输入法哪个最好用', pv: 812, ratio: 150, sim: 1567 },
        { word: '必应输入法', pv: 4602, ratio: 91, sim: 1522 },
        { word: '章鱼输入法', pv: 18262, ratio: 97, sim: 1486 },
        { word: '输入法下载', pv: 34186, ratio: 91, sim: 1278 },
        { word: '拼音输入法', pv: 7186, ratio: 86, sim: 1009 },
        { word: 'SHURUFA', pv: 13418, ratio: 102, sim: 924 },
        { word: '微软输入法', pv: 4680, ratio: 88, sim: 804 },
        { word: 'GOOGLE输入法', pv: 2206, ratio: 97, sim: 800 },
        { word: '输入法切换不出来', pv: 15112, ratio: 85, sim: 764 },
        { word: '章鱼输入法下载', pv: 8204, ratio: 135, sim: 754 },
        { word: '讯飞输入法下载', pv: 5590, ratio: 106, sim: 609 },
        { word: '输入法搜狗', pv: 352, ratio: 132, sim: 593 },
        { word: '输入法皮肤', pv: 2476, ratio: 103, sim: 540 },
        { word: '紫光输入法', pv: 1582, ratio: 86, sim: 538 },
        { word: '输入法设置', pv: 1298, ratio: 75, sim: 527 },
        { word: '搜狗输入法下载安装', pv: 126182, ratio: 102, sim: 521 },
        { word: '微软拼音输入法', pv: 3442, ratio: 88, sim: 510 },
        { word: 'QQ拼音输入法', pv: 24912, ratio: 98, sim: 478 },
        { word: '输入发', pv: 150, ratio: 125, sim: 465 },
        { word: 'SOUGOU输入法', pv: 264, ratio: 89, sim: 452 },
        { word: '微软拼音', pv: 2772, ratio: 93, sim: 443 }
      ]
    }
  ],

  categoryField: 'word',
  valueField: 'sim',

  sizeField: 'pv',
  sizeRange: [12, 30],

  innerRadius: '25%',
  outerRadius: '95%',

  nodePoint: {
    state: {
      hover: {
        lineWidth: 8,
        strokeOpacity: 0.2
      }
    }
  },

  centerPoint: {
    state: {
      hover: {
        lineWidth: 8,
        strokeOpacity: 0.2
      }
    }
  },

  centerLabel: {
    visible: true,
    position: 'center',
    style: {
      fill: 'white',
      text: '输入法'
    }
  },

  label: {
    visible: true,
    position: 'bottom',
    style: {
      fill: 'black'
    }
  }
};

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

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

Results show

Demo: https://www.visactor.io/vchart/demo/correlation-chart/correlation-chart

How to configure nested pie charts in VChart

Xuefei Li — Sat, 11 May 2024 10:08:18 +0000

Question title

How to Configure a Nested Pie Chart

Problem description

How to Configure a Nested Pie Chart

Solution

VChart can configure multiple pie-series and then configure their radii as: the outer radius of the inner circle = the inner radius of the outer circle, so as to achieve nested pie charts

There is also a rose chart similar to a nested pie chart, which can be selected according to the business scenario.

outerRadius: number // outer radius, percentage value
innerRadius: number // inner radius, percentage value

Code example

const spec = {
  type: 'common',
  data: [
    {
      id: 'id0',
      values: [
        { type: '0~29', value: '126.04' },
        { type: '30~59', value: '128.77' },
        { type: '60 and over', value: '77.09' }
      ]
    },
    {
      id: 'id1',
      values: [
        { type: '0~9', value: '39.12' },
        { type: '10~19', value: '43.01' },
        { type: '20~29', value: '43.91' },
        { type: '30~39', value: '45.4' },
        { type: '40~49', value: '40.89' },
        { type: '50~59', value: '42.48' },
        { type: '60~69', value: '39.63' },
        { type: '70~79', value: '25.17' },
        { type: '80 and over', value: '12.29' }
      ]
    }
  ],
  series: [
    {
      type: 'pie',
      dataIndex: 0,
      outerRadius: 0.65,
      innerRadius: 0,
      valueField: 'value',
      categoryField: 'type',
      label: { position: 'inside', visible: true }
    },
    {
      type: 'pie',
      dataIndex: 1,
      outerRadius: 0.8,
      innerRadius: 0.67,
      valueField: 'value',
      categoryField: 'type',
      label: {
        visible: true
      }
    }
  ],
  color: ['#98abc5', '#8a89a6', '#7b6888', '#6b486b', '#a05d56', '#d0743c', '#ff8c00'],
  legends: {
    visible: true,
    orient: 'left'
  }
};

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

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

Results show

Demo: https://codesandbox.io/p/sandbox/vchart-disabletriggerevent-forked-xkzpxq?file=%2Fsrc%2Findex.js%3A43%2C31

How to set the bar width of a bar chart in VChart

Xuefei Li — Sat, 11 May 2024 10:03:58 +0000

Question title

How to set the bar width of a bar chart, expecting the bar width to remain unchanged when the chart container becomes larger

Problem description

May I ask how to set the bar width of a bar chart so that when the chart container becomes larger, the bar width remains the same, always 16px?

Solution

VChart's bar chart supports a set of bar width configuration options.

barWidth: width
barMinWidth: Minimum width
barMaxWidth: maximum width

The default bar width of VChart is related to the width of the chart container. This logic ensures that when the chart container is small, the bars will not overlap.

In actual use, if there is a need for a fixed width of the column, you can use barWidth. If you just don't expect the column to be too wide and unsightly, you can use barMaxWidthto limit its maximum width, so that the container is relatively small and can be displayed correctly.

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 }
      ]
    }
  ],
  barWidth: 16,
  // barMaxWidth: 16,
  xField: 'month',
  yField: 'sales'
};

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

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

Results show

Demo: https://codesandbox.io/p/sandbox/vchart-disabletriggerevent-forked-n5z7cl?file=%2Fsrc%2Findex.js%3A30%2C1

How to make all x-axis labels displayed

Xuefei Li — Sat, 11 May 2024 03:55:46 +0000

Question title

How to make all the labels of the x-axis display

Problem description

May I ask why some of the text on the x-axis of the chart is not displayed? How can it be displayed?

Solution

The discrete lower axis in VChart defaults to a sampling algorithm based on label width. Therefore, when label overlap may occur, some labels are hidden according to the strategy. The relevant configuration items are as follows:

axes: {
    sampling: boolean
}

After turning off the sampling, in order to show the effect optimization, we also have a set of anti-overlap strategies for graphics. The configuration items are as follows

export interface AxisLabelOverlap {
    autoRotate?: boolean; 
    autoRotateAngle?: number[]; 
    autoHide?: boolean;
    autoHideMethod?: 'parity' | 'greedy' | CustomMethod; 
    ...others
}

axes: {
    label: {
        ...AxisLabelOverlap
    }
}

So you can configure the following two things:

Set sampling: false to forcibly display all tags
Set anti-overlap policies. For example, automatic rotation, which displays more labels. If it is not particularly dense, all labels can be displayed.

Code example

const spec = {
  type: 'line',
  data: {
    values: [
      { type: 'Nail polish', country: 'Africa', value: 4229 },
      { type: 'Nail polish', country: 'EU', value: 4376 },
      { type: 'Nail polish', country: 'China', value: 3054 },
      { type: 'Nail polish', country: 'USA', value: 12814 },
      { type: 'Eyebrow pencil', country: 'Africa', value: 3932 },
      { type: 'Eyebrow pencil', country: 'EU', value: 3987 },
      { type: 'Eyebrow pencil', country: 'China', value: 5067 },
      { type: 'Eyebrow pencil', country: 'USA', value: 13012 },
      { type: 'Rouge', country: 'Africa', value: 5221 },
      { type: 'Rouge', country: 'EU', value: 3574 },
      { type: 'Rouge', country: 'China', value: 7004 },
      { type: 'Rouge', country: 'USA', value: 11624 },
      { type: 'Lipstick', country: 'Africa', value: 9256 },
      { type: 'Lipstick', country: 'EU', value: 4376 },
      { type: 'Lipstick', country: 'China', value: 9054 },
      { type: 'Lipstick', country: 'USA', value: 8814 },
      { type: 'Eyeshadows', country: 'Africa', value: 3308 },
      { type: 'Eyeshadows', country: 'EU', value: 4572 },
      { type: 'Eyeshadows', country: 'China', value: 12043 },
      { type: 'Eyeshadows', country: 'USA', value: 12998 },
      { type: 'Eyeliner', country: 'Africa', value: 5432 },
      { type: 'Eyeliner', country: 'EU', value: 3417 },
      { type: 'Eyeliner', country: 'China', value: 15067 },
      { type: 'Eyeliner', country: 'USA', value: 12321 },
      { type: 'Foundation', country: 'Africa', value: 13701 },
      { type: 'Foundation', country: 'EU', value: 5231 },
      { type: 'Foundation', country: 'China', value: 10119 },
      { type: 'Foundation', country: 'USA', value: 10342 },
      { type: 'Lip gloss', country: 'Africa', value: 4008 },
      { type: 'Lip gloss', country: 'EU', value: 4572 },
      { type: 'Lip gloss', country: 'China', value: 12043 },
      { type: 'Lip gloss', country: 'USA', value: 22998 },
      { type: 'Mascara', country: 'Africa', value: 18712 },
      { type: 'Mascara', country: 'EU', value: 6134 },
      { type: 'Mascara', country: 'China', value: 10419 },
      { type: 'Mascara', country: 'USA', value: 11261 }
    ]
  },
  title: {
    visible: true,
    text: 'Stacked line chart'
  },
  stack: true,
  xField: 'type',
  yField: 'value',
  seriesField: 'country',
  axes: [{
    orient: 'bottom',
    sampling: false,
    label: {
      autoRotate: true,
      autoRotateAngle: [45,90]
    }
  }],
  lineLabel: { visible: true },
  legends: [{ visible: true, position: 'middle', orient: 'bottom' }]
};

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

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

Results show

Demo: https://codesandbox.io/p/sandbox/vchart-disabletriggerevent-forked-n5653c?file=%2Fsrc%2Findex.js%3A14%2C18

DEV Community: Xuefei Li

How to configure the style of the legend separately in VChart and change the shape of the graphic

Question title

Problem description

Solution

Code example

Results show

Related Documents

How to make the axis label with graphics in VChart?

How to make the axis label with graphics in VChart?

Question title

Problem description

Solution

Code example

Results show

How to avoid the outline being blocked when hovering the pie chart sector?

Question title

Problem description

Code example

Results show

How to achieve only selecting the current item in VChart when clicking on the legend?

Question title

Problem description

Solution

Code example

Results show

How to configure animations in VChart portfolio diagrams?

Question title

Problem description

Code example

Results show

How to configure different colors for a line in VChart

Question title

Problem description

Solution

Code example

Results show

Related Documents

Can VChart be server-side rendering?

Question title

Problem description

Solution

Code example

Results show

Related Documents

How to configure a correlation scatter plot in VChart

Question title

Problem description

Solution

Code example

Results show

Related Documents

How to configure nested pie charts in VChart

Question title

Problem description

Solution

Code example

Results show

Related Documents

How to set the bar width of a bar chart in VChart

Question title

Problem description

Solution

Code example

Results show

Related Documents

How to make all x-axis labels displayed

Question title

Problem description

Solution

Code example

Results show

Related Documents