DEV Community: XinYu Zhou

How to customize the shape of Tooltip in Vchart?

XinYu Zhou — Fri, 07 Jun 2024 09:08:07 +0000

Title

How to customize the shape of Tooltip in Vchart?

Description

Is there a way to customize the shape of the tooltip in Vchart?

Solution

In the Vchart Spec, there are tooltip-related configurations. Configure the tooltip property to customize the tooltip shape. The mark attribute of the tooltip represents the effect when hovering over the graphic element. https://visactor.io/vchart/option/pieChart#tooltip.mark. The mark.content represents the configuration of the content. Configure the shapeType field in mark.content to customize the shape of the tooltip.

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' }
      ]
    }
  ],
  tooltip: { 
    mark: 
    { 
      content: { 
        key: datum => datum['type'],
        value: datum => datum['value'] + '%',
        shapeType: 'square' 
      } 
    },
  },
  outerRadius: 0.8,
  valueField: 'value',
  categoryField: 'type',
  title: {
    visible: true,
    text: 'Statistics of Surface Element Content'
  },
  legends: {
    visible: true,
    orient: 'left'
  },
  label: {
    visible: true
  }
};

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

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

Result

After running the code, the symbol of the tooltip becomes a rectangle.

Online demo: https://codesandbox.io/p/sandbox/tooltip-shape-cdzny7?file=%2Fsrc%2Findex.ts%3A44%2C2

VChart How to change the width of bars in a bar chart?

XinYu Zhou — Fri, 07 Jun 2024 09:05:17 +0000

Title

VChart How to change the width of bars in a bar chart?

Description

I am using vchart to create a bar chart and I want to set the width of the bars. However, I couldn't find the corresponding configuration item in the documentation. I tried some parameters, but none of them worked. How can I set the width of the bars?

Solution

To set the width of the bars in a vchart bar chart, you can adjust the width of the chart itself. The bar chart has a barWidth property that can be used to adjust the width of the bars.

Example Code

const spec = {
  type: 'bar',
  data: {
    values: [
      {
        time: '2:00',
        value: 8
      },
      {
        time: '4:00',
        value: 9
      },
      {
        time: '6:00',
        value: 11
      },
      {
        time: '8:00',
        value: 14
      },
      {
        time: '10:00',
        value: 16
      },
      {
        time: '12:00',
        value: 17
      },
      {
        time: '14:00',
        value: 17
      },
      {
        time: '16:00',
        value: 16
      },
      {
        time: '18:00',
        value: 15
      }
    ]
  },
  barWidth: '60%',
  barMinWidth: 20,
  barMaxWidth: 50,
  xField: 'time',
  yField: 'value',
};

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

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

Result

How to display multi-line labels in vchart?

XinYu Zhou — Fri, 07 Jun 2024 09:02:59 +0000

Title

How to display multi-line labels in vchart?

Description

Can vchart display multi-line labels? I want to customize the label content of the pie chart, add the value, and display the specific value on the second line.

Solution

The label configuration of the pie chart is in the label field: https://visactor.io/vchart/option/pieChart#label. The formatMethod attribute is used to format the label content: https://visactor.io/vchart/option/pieChart#label.formatMethod. The configuration function can be used to format the label. The function receives parameters including the original text and data, and returns a string representing the formatted label text. If an array is returned, each item in the array represents a line.

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,
    formatMethod: (text, datum) => {
      return [text, datum.value]
    }
  },
  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;

Result

After running the code, the label can be formatted with line breaks.

Online demo: https://codesandbox.io/p/sandbox/label-multiline-hhqm7j?file=%2Fsrc%2Findex.ts%3A34%2C37

How to customize the labels of a pie chart in VChart?

XinYu Zhou — Fri, 07 Jun 2024 08:59:46 +0000

Title

How to customize the labels of a pie chart in VChart?

Description

Can the labels of a VChart pie chart be customized? I want to add the values to the labels.

Solution

The label configuration of a pie chart is in the label field: https://visactor.io/vchart/option/pieChart#label. There is a property called formatMethod in this field, which is used to format the label content: https://visactor.io/vchart/option/pieChart#label.formatMethod. By configuring a function, the label can be formatted. The function receives parameters including the original text and data, and returns a string representing the formatted label text.

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,
    formatMethod: (text, datum) => {
      return `${text}: ${datum.value}`
    }
  },
  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;

Result

After running the code, the labels can be formatted.

Online demo: https://codesandbox.io/p/sandbox/pie-label-format-9k8wlr?file=%2Fsrc%2Findex.ts%3A48%2C2

Can a line chart be segmented?

XinYu Zhou — Fri, 07 Jun 2024 08:53:48 +0000

Title

Can a line chart be segmented?

Description

In vchart, is it possible to segment a line chart if there is a point that you do not want to display?

Solution

If a point's value is invalid, VChart will automatically hide that point. You can set the value of that point to null in the data to achieve the same effect.

For example, the point corresponding to 10:00 will not be displayed if its value is set to null.

data: {
    values: [
      {
        time: '2:00',
        value: 8
      },
      {
        time: '4:00',
        value: 9
      },
      {
        time: '6:00',
        value: 11
      },
      {
        time: '8:00',
        value: 14
      },
      {
        time: '10:00',
        value: null
      },
      {
        time: '12:00',
        value: 17
      },
      {
        time: '14:00',
        value: 17
      },
      {
        time: '16:00',
        value: 16
      },
      {
        time: '18:00',
        value: 15
      }
    ]
  }

Code Example

const spec = {
  type: 'line',
  data: {
    values: [
      {
        time: '2:00',
        value: 8
      },
      {
        time: '4:00',
        value: 9
      },
      {
        time: '6:00',
        value: 11
      },
      {
        time: '8:00',
        value: 14
      },
      {
        time: '10:00',
        value: null
      },
      {
        time: '12:00',
        value: 17
      },
      {
        time: '14:00',
        value: 17
      },
      {
        time: '16:00',
        value: 16
      },
      {
        time: '18:00',
        value: 15
      }
    ]
  },
  xField: 'time',
  yField: 'value'
};

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

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

Result

After running the code, the point corresponding to 10:00 will not be displayed, and the line chart will be segmented.

Online demo: https://codesandbox.io/p/sandbox/line-point-split-fq7wkh?file=%2Fsrc%2Findex.ts%3A49%2C2

How to display all words in a small canvas using vchart word cloud?

XinYu Zhou — Fri, 07 Jun 2024 08:47:44 +0000

Title

How to display all words in a small canvas using vchart word cloud?

Description

When the number of words in vchart word cloud is large and the canvas size is not large enough, only a part of the words can be displayed. How can we display all the words?

Solution

The word cloud has a configuration fontSizeRange that controls the size range of words. The default value is [20, 40]. If you want the text to automatically adapt to the canvas size and fill the entire canvas, you can set it to auto.

Reference: VisActor

Code Example

const spec = {
  width: 300,
  height: 300,
  type: 'wordCloud',
  nameField: 'name',
  valueField: 'value',
  maskShape: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/shape_motuo_mini.png',
  fontSizeRange: 'auto',
  data: [
    {
      name: 'source',
      values: [
        {
          name: '螺蛳粉',
          value: 957
        },
        {
          name: '钵钵鸡',
          value: 942
        },
        {
          name: '板栗',
          value: 842
        },
        {
          name: '胡辣汤',
          value: 828
        },
        {
          name: '关东煮',
          value: 665
        },
        {
          name: '羊肉汤',
          value: 627
        },
        {
          name: '热干面',
          value: 574
        },
        {
          name: '肠粉',
          value: 564
        },
        {
          name: '北京烤鸭',
          value: 554
        },
        {
          name: '龟苓膏',
          value: 540
        },
        {
          name: '米粉',
          value: 513
        },
        {
          name: '灌肠',
          value: 499
        },
        {
          name: '藕粉',
          value: 499
        },
        {
          name: '烤冷面',
          value: 495
        },
        {
          name: '炸酱面',
          value: 487
        },
        {
          name: '臭豆腐',
          value: 484
        },
        {
          name: '沙县小吃',
          value: 482
        },
        {
          name: '重庆小面',
          value: 482
        },
        {
          name: '冒菜',
          value: 479
        },
        {
          name: '醪糟',
          value: 462
        },
        {
          name: '肉夹馍',
          value: 456
        },
        {
          name: '酸辣粉',
          value: 456
        },
        {
          name: '驴打滚',
          value: 456
        },
        {
          name: '煎饼果子',
          value: 443
        },
        {
          name: '驴肉火烧',
          value: 443
        },
        {
          name: '小笼包',
          value: 426
        },
        {
          name: '烧麦',
          value: 425
        },
        {
          name: '卤煮',
          value: 422
        },
        {
          name: '油条',
          value: 414
        },
        {
          name: '桂林米粉',
          value: 414
        },
        {
          name: '兰州拉面',
          value: 409
        },
        {
          name: '双皮奶',
          value: 408
        },
        {
          name: '锅盔',
          value: 403
        },
        {
          name: '羊肉泡馍',
          value: 403
        },
        {
          name: '凉皮',
          value: 402
        },
        {
          name: '糍粑',
          value: 397
        },
        {
          name: '豆皮',
          value: 388
        },
        {
          name: '粘豆包',
          value: 388
        },
        {
          name: '过桥米线',
          value: 385
        },
        {
          name: '叉烧',
          value: 375
        },
        {
          name: '豆腐脑',
          value: 374
        },
        {
          name: '豆汁',
          value: 363
        },
        {
          name: '麻花',
          value: 363
        },
        {
          name: '春卷',
          value: 354
        },
        {
          name: '锅贴',
          value: 349
        },
        {
          name: '韭菜盒子',
          value: 349
        },
        {
          name: '面筋',
          value: 346
        },
        {
          name: '南瓜饼',
          value: 343
        },
        {
          name: '炒肝',
          value: 341
        },
        {
          name: '文昌鸡',
          value: 338
        }
      ]
    }
  ]
}; 
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();

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

Result

After running the code, all the text is displayed (of course, the text has become smaller).

Online demo: https://codesandbox.io/p/sandbox/wordcloud-fontsizerange-x4cflw?file=%2Fsrc%2Findex.ts%3A12%2C3-12%2C16

How to configure vchart line chart to make the points sparse in the case of big data?

XinYu Zhou — Sat, 11 May 2024 03:30:24 +0000

Title

How to configure vchart line chart to make the points sparse in the case of big data?

Description

I am using vchart to create a line chart, but there are a lot of data, which causes the points on the line chart to be very dense. I want to know if there is a way to make the points sparse through sampling or other methods?

Solution

Solution 1

Sampling can achieve this function. You can use the sampling and samplingFactor configurations to achieve this. Through the sampling configuration, you can use different sampling algorithms to sample points. The supported sampling types are:

'lttb': Use the Largest-Triangle-Three-Bucket algorithm, which can maximize the trend, shape, and extreme values of the sampled line after sampling.
'min': Take the minimum value of the filtered point.
'max': Take the maximum value of the filtered point.
'sum': Take the sum of the filtered point.
'average': Take the average value of the filtered point.

Through samplingFactor, you can configure the sampling intensity, which is within the range of [0,1]. The smaller the samplingFactor, the greater the sampling intensity.

Reference: https://visactor.io/vchart/option/lineChart#sampling

Solution 2

You can only hide the points by setting markOverlap: true.

Reference: https://visactor.io/vchart/option/lineChart#markOverlap

Code Example

const spec = {
  type: 'line',
  data: {
    values: new Array(10000).fill(0).map((_, i) => ({ time: i, value: Math.random() * 10000 }))
  },
  sampling: 'lttb',
  samplingFactor: 0.6,
  point: {
    style: {
      stroke: false
    }
  },
  xField: 'time',
  yField: 'value'
};

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

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

Result

After running the code, the data points are sampled to be more sparse.

Online demo: https://codesandbox.io/p/sandbox/line-chart-single-selected-forked-4px87p?file=%2Fsrc%2Findex.ts%3A18%2C2

How VChart line charts support emphasizing a certain point

XinYu Zhou — Sat, 11 May 2024 03:23:26 +0000

Title

Does vchart support emphasizing a certain point in a line chart?

Description

I'm using vchart to create a line chart and I'm wondering if it's possible to emphasize a certain point in the chart.

Solution

Yes, it's possible to achieve this. You can use the opacity and size options to highlight a certain point based on its data. By setting the opacity and size of the point, it will stand out more.

You can refer to the following link for more information on how to configure the mark function of a chart element: https://visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Series/Mark

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 }
    ]
  },
  percent: true,
  xField: 'type',
  yField: 'value',
  seriesField: 'country',
  animationAppear: {
    duration: 1500,
    easing: 'linear'
  },
  point: {
    style: {
      opacity: (datum) => {
        return datum.type === 'Eyeliner' && datum.country === 'EU' ? 1 : 0.6
      },
      size: (datum) => {
        return datum.type === 'Eyeliner' && datum.country === 'EU' ? 10 : 6
      },
      stroke: false
    }
  },
  legends: [{ visible: true, position: 'middle', orient: 'bottom' }],
  axes: [
    {
      orient: 'left',
      label: {
        formatMethod(val) {
          return `${(val * 100).toFixed(2)}%`;
        }
      }
    }
  ]
};

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

vchart.renderSync();

Result

After running the code, the points in the Eyeliner dimension of the EU line segment are emphasized.

Online demo: https://codesandbox.io/p/sandbox/line-chart-single-selected-forked-4px87p?file=%2Fsrc%2Findex.ts%3A3%2C1

How to customize the shape of the legend in VChart?

XinYu Zhou — Mon, 29 Apr 2024 06:56:14 +0000

Title

How to customize the shape of the legend in VChart?

Description

The default shape of the legend in VChart is a rounded rectangle. How can I customize the shape of the legend?

Solution

In VChart, you can customize the shape of the legend through configuration.

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,
  innerRadius: 0.5,
  padAngle: 0.6,
  valueField: 'value',
  categoryField: 'type',
  pie: {
    style: {
      cornerRadius: 10
    },
    state: {
      hover: {
        outerRadius: 0.85,
        stroke: '#000',
        lineWidth: 1
      },
      selected: {
        outerRadius: 0.85,
        stroke: '#000',
        lineWidth: 1
      }
    }
  },
  title: {
    visible: true,
    text: 'Statistics of Surface Element Content'
  },
  legends: {
    visible: true,
    orient: 'left',
    item: {
      shape: {
        style: {
          symbolType: 'star'
        }
      }
    }
  },
  label: {
    visible: true
  },
  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;

Result

Demo: https://codesandbox.io/p/sandbox/pie-legends-shap-6tq5k9?file=%2Fsrc%2Findex.ts%3A69%2C7

How to display segmented linear progress bar?

XinYu Zhou — Mon, 29 Apr 2024 04:27:15 +0000

Title

How to display segmented linear progress bar?

Description

How can I display a segmented linear progress bar like the one shown in the image below?

Solution

In VChart, you can use extension marks to display the dividing lines between each segment.

Code Example

const spec = {
  type: "linearProgress",
  data: [
    {
      id: "id0",
      values: [
        {
          type: "Tradition Industries",
          value: 0.85,
          goal: 0.7,
          text: "79.5%"
        }
      ]
    }
  ],
  direction: "horizontal",
  xField: "value",
  yField: "type",
  seriesField: "type",
  height: 80,
  cornerRadius: 20,
  progress: {
    style: {
      cornerRadius: 0
    }
  },
  bandWidth: 30,
  axes: [
    {
      orient: "right",
      type: "band",
      domainLine: { visible: false },
      tick: { visible: false },
      label: {
        formatMethod: (val) => "随便写点啥",
        style: {
          fontSize: 16
        }
      }
    },
    {
      orient: "bottom",
      type: "linear",
      visible: true,
      grid: {
        visible: false
      },
      label: {
        formatMethod: (val) => `${val * 100}%`,
        flush: true
      }
    }
  ],
  extensionMark: [
    {
      type: "rule",
      dataId: "id0",
      visible: true,
      style: {
        x: (datum, ctx, elements, dataView) => {
          return ctx.valueToX([1 / 3]);
        },
        y: (datum, ctx, elements, dataView) => {
          return ctx.valueToY([datum.type]) - 15;
        },
        x1: (datum, ctx, elements, dataView) => {
          return ctx.valueToX([1 / 3]);
        },
        y1: (datum, ctx, elements, dataView) => {
          return ctx.valueToY([datum.type]) + 15;
        },
        stroke: "#fff",
        lineWidth: 4,
        zIndex: 1
      }
    },
    {
      type: "rule",
      dataId: "id0",
      visible: true,
      style: {
        x: (datum, ctx, elements, dataView) => {
          return ctx.valueToX([2 / 3]);
        },
        y: (datum, ctx, elements, dataView) => {
          return ctx.valueToY([datum.type]) - 15;
        },
        x1: (datum, ctx, elements, dataView) => {
          return ctx.valueToX([2 / 3]);
        },
        y1: (datum, ctx, elements, dataView) => {
          return ctx.valueToY([datum.type]) + 15;
        },
        stroke: "#fff",
        lineWidth: 4,
        zIndex: 1
      }
    }
  ]
};

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

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

Result

Demo: https://codesandbox.io/p/sandbox/segment-linear-progress-3v4w5q?file=%2Fsrc%2Findex.ts%3A4%2C14-103%2C2

How to disable chart interaction

XinYu Zhou — Mon, 29 Apr 2024 04:25:56 +0000

Title

How to disable chart interaction

Description

How can I disable the interaction events of the chart and just use it as an image when using the chart?

Solution

In VChart, you can directly pass in disableTriggerEvent: true to disable interaction.

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'
};

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

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

Result

Demo: https://codesandbox.io/p/sandbox/vchart-disabletriggerevent-psxswy?file=%2Fsrc%2Findex.js%3A20%2C46

9. How to draw a dual-axis chart

XinYu Zhou — Fri, 26 Apr 2024 11:44:22 +0000

Title

How to draw a dual-axis chart

Describe

What methods can be used to draw a chart with two axes like this?

Solution

In VChart, you can add a right axis and bind the corresponding series to achieve this. Refer to the demo: https://visactor.io/vchart/demo/combination/dual-axis。

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'    },    {      type: 'line',      id: 'line',      dataIndex: 1,      label: { visible: true },      seriesField: 'type',      xField: 'x',      yField: 'y',      stack: false    }  ],  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;

结果展示

https://visactor.io/vchart/demo/combination/dual-axis

Tutorial:

Combination Chart: VisActor API:
Combination Chart: https://visactor.io/vchart/option/commonChart Github: GitHub - VisActor/VChart: VChart, more than just a cross-platform charting library, but also an expressive data storyteller.

DEV Community: XinYu Zhou

How to customize the shape of Tooltip in Vchart?

Title

Description

Solution

Code Example

Result

Related Documents

VChart How to change the width of bars in a bar chart?

Title

Description

Solution

Example Code

Result

Related Documentation

How to display multi-line labels in vchart?

Title

Description

Solution

Code Example

Result

Related Documents

How to customize the labels of a pie chart in VChart?

Title

Description

Solution

Code Example

Result

Related Documents

Can a line chart be segmented?

Title

Description

Solution

Code Example

Result

Related Documents

How to display all words in a small canvas using vchart word cloud?

Title

Description

Solution

Code Example

Result

Related Documents

How to configure vchart line chart to make the points sparse in the case of big data?

Title

Description

Solution

Solution 1

Solution 2

Code Example

Result

Related Documents

How VChart line charts support emphasizing a certain point

Title

Description

Solution

Code Example

Result

Related Documents

How to customize the shape of the legend in VChart?

Title

Description

Solution

Code Example

Result

Related Documents

How to display segmented linear progress bar?

Title

Description

Solution

Code Example

Result

Related Documents

How to disable chart interaction

Title

Description

Solution

Code Example

Result

Related Documents