DEV Community: Siji Chen

How to configure gradual change colors for discrete data in VChart?

Siji Chen — Sun, 19 May 2024 08:57:09 +0000

Title

How to configure gradual change colors for discrete data in VChart?

Description

I want to set interpolated gradual change colors for primitive elements with different values, as shown in the example below. The colors of each sector have a difference relationship.

Solution

It can be achieved through custom color mapping.
First, you need to declare the mapping relationship through scales, where id represents the unique index of the mapping, field represents the data mapping field, and color represents the target color of the mapping. You can configure the color palette with interpolation here.

  color: {
    id: 'color',
    type: 'linear',
    range: ['#1664FF', '#B2CFFF', '#1AC6FF', '#94EFFF'],
    domain: [
      {
        dataId: 'id0',
        fields: ['value']
      }
    ]
  },

Secondly, you need to associate mapping in the style of primitive sector. Where scale represents the associated mapping ID, and field represents the data mapping field

fill: {
    scale: 'color',
    field: 'value'
  }

Code Example

const pieData = [
  { 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' }
];
const spec = {
  type: 'pie',
  data: [
    {
      id: 'id0',
      values: pieData
    }
  ],
  outerRadius: 0.8,
  innerRadius: 0.5,
  padAngle: 0.6,
  valueField: 'value',
  categoryField: 'type',
  color: {
    id: 'color',
    type: 'linear',
    range: ['#1664FF', '#B2CFFF', '#1AC6FF', '#94EFFF'],
    domain: [
      {
        dataId: 'id0',
        fields: ['value']
      }
    ]
  },
  pie: {
    style: {
      cornerRadius: 10,
      fill: {
        scale: 'color',
        field: 'value'
      }
    }
  },
  legends: {
    visible: true,
    orient: 'left',
    data: (data, scale) => {
      return data.map(datum => {
        const pickDatum = pieData.find(pieDatum => pieDatum.type === datum.label);

        datum.shape.fill = scale?.scale?.(pickDatum?.value);
        return datum;
      });
    }
  },
  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;

Results

Online demo：：https://www.visactor.io/vchart/demo/pie-chart/linear-color-pie

How does react-vchart achieve on-demand loading?

Siji Chen — Sun, 19 May 2024 08:44:50 +0000

Title

How does react-vchart achieve on-demand loading?

Description

H5 project uses vchart volume limit, can it support on-demand loading now? Currently only one funnel chart is used.

Solution

React-VChart itself supports on-demand loading. When VChart needs to be loaded on demand, it is recommended to use the <VChartSimple /> tag,
The <VChartSimple /> component and the <VChart /> component are used in almost the same way. The only difference is that users need to import the VChart constructor class from @viasctor/vchart and pass it to <VChartSimple />; Reference for on-demand import of VChart related documents

interface VChartSimpleProps extends EventsProps {
  /** the spec of chart */
  spec: any;
  /** the options of chart */
  options?: ChartOptions;
  /** call when the chart is rendered */
  onReady?: (instance: VChart, isInitial: boolean) => void;
  /** throw error when chart run into an error */
  onError?: (err: Error) => void;
  /** 
   * use renderSync
   * @since 1.8.3
   **/
  useSyncRender?: boolean;
  /**
   * skip the difference of all functions
   * @since 1.6.5
   **/
  skipFunctionDiff?: boolean;
  /**
   * the constrouctor class of vchart
   * @since 1.8.3
   **/
  vchartConstrouctor: IVChartConstructor;
}

Code Example

/* @refresh reset */
import React, { useMemo } from "react";

import { VChartSimple } from "@visactor/react-vchart";
import { VChart } from "@visactor/vchart/esm/core" 
import { registerFunnelChart } from "@visactor/vchaart/esm/chart/funnel"

// eslint-disable-next-line react-hooks/rules-off-hooks
VChart.useRegisters([registerFunnelChart])

export const FunnelChart = (props) => {
    const spec = useMemo(() =>{
     // ....
    },[]);

    return (
        <React.Fragment>
          <VChartSimple spec={spec}_vchartConstrouctor={VChart} />
        </React.Fragment>
    );
};

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

Siji Chen — Sun, 12 May 2024 17:04:54 +0000

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;

Results

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

How to configure series zIndex in common chart?

Siji Chen — Sun, 12 May 2024 17:00:58 +0000

Title

How to configure series zIndex in common chart?

Description

How to configure the combination chart hierarchy? When combining line and area series, the point primitive of line is obscured by the area primitive

Solution

For the cascading style of series in the combination diagram, it can be controlled by the declaration order of series. For example, if the line series needs to be above the area series, then the area series needs to be declared first, and then the line series needs to be declared.

Code Example

  const data = [
    { date: "2023-12-01", value: "1776", series: "demand" },
    { date: "2023-12-01", value: 1546, series: "left" },
    { date: "2023-12-01", value: "3322", series: "total" },
    { date: "2023-12-02", value: "3555", series: "demand" },
    { date: "2023-12-02", value: 43638, series: "left" },
    { date: "2023-12-02", value: "47193", series: "total" },
    { date: "2023-12-03", value: "52840", series: "demand" },
    { date: "2023-12-03", value: 6864, series: "left" },
    { date: "2023-12-03", value: "59704", series: "total" },
    { date: "2023-12-04", value: "48566", series: "demand" },
    { date: "2023-12-04", value: 41413, series: "left" },
    { date: "2023-12-04", value: "89979", series: "total" },
    { date: "2023-12-05", value: "17711", series: "demand" },
    { date: "2023-12-05", value: 26783, series: "left" },
    { date: "2023-12-05", value: "44494", series: "total" },
    { date: "2023-12-06", value: "4295", series: "demand" },
    { date: "2023-12-06", value: 363, series: "left" },
    { date: "2023-12-06", value: "4658", series: "total" },
    { date: "2023-12-07", value: "16", series: "demand" },
    { date: "2023-12-07", value: 8757, series: "left" },
    { date: "2023-12-07", value: "8773", series: "total" },
    { date: "2023-12-08", value: "29228", series: "demand" },
    { date: "2023-12-08", value: 29999, series: "left" },
    { date: "2023-12-08", value: "59227", series: "total" },
    { date: "2023-12-09", value: "29092", series: "demand" },
    { date: "2023-12-09", value: 15516, series: "left" },
    { date: "2023-12-09", value: "44608", series: "total" },
    { date: "2023-12-010", value: "4098", series: "demand" },
    { date: "2023-12-010", value: 4946, series: "left" },
    { date: "2023-12-010", value: "9044", series: "total" },
    { date: "2023-12-011", value: "11611", series: "demand" },
    { date: "2023-12-011", value: 64795, series: "left" },
    { date: "2023-12-011", value: "76406", series: "total" },
    { date: "2023-12-012", value: "72517", series: "demand" },
    { date: "2023-12-012", value: 11808, series: "left" },
    { date: "2023-12-012", value: "84325", series: "total" },
    { date: "2023-12-013", value: "15421", series: "demand" },
    { date: "2023-12-013", value: 16839, series: "left" },
    { date: "2023-12-013", value: "32260", series: "total" },
    { date: "2023-12-014", value: "5185", series: "demand" },
    { date: "2023-12-014", value: 18225, series: "left" },
    { date: "2023-12-014", value: "23410", series: "total" },
    { date: "2023-12-015", value: "9034", series: "demand" },
    { date: "2023-12-015", value: 35726, series: "left" },
    { date: "2023-12-015", value: "44760", series: "total" },
    { date: "2023-12-016", value: "20138", series: "demand" },
    { date: "2023-12-016", value: 42747, series: "left" },
    { date: "2023-12-016", value: "62885", series: "total" },
    { date: "2023-12-017", value: "1649", series: "demand" },
    { date: "2023-12-017", value: 6281, series: "left" },
    { date: "2023-12-017", value: "7930", series: "total" },
    { date: "2023-12-018", value: "3687", series: "demand" },
    { date: "2023-12-018", value: 5087, series: "left" },
    { date: "2023-12-018", value: "8774", series: "total" },
    { date: "2023-12-019", value: "49861", series: "demand" },
    { date: "2023-12-019", value: 14074, series: "left" },
    { date: "2023-12-019", value: "63935", series: "total" },
    { date: "2023-12-020", value: "4386", series: "demand" },
    { date: "2023-12-020", value: 33871, series: "left" },
    { date: "2023-12-020", value: "38257", series: "total" },
    { date: "2023-12-021", value: "5066", series: "demand" },
    { date: "2023-12-021", value: 34438, series: "left" },
    { date: "2023-12-021", value: "39504", series: "total" },
    { date: "2023-12-022", value: "3070", series: "demand" },
    { date: "2023-12-022", value: 47549, series: "left" },
    { date: "2023-12-022", value: "50619", series: "total" },
    { date: "2023-12-023", value: "7493", series: "demand" },
    { date: "2023-12-023", value: 83660, series: "left" },
    { date: "2023-12-023", value: "91153", series: "total" },
    { date: "2023-12-024", value: "40735", series: "demand" },
    { date: "2023-12-024", value: 8841, series: "left" },
    { date: "2023-12-024", value: "49576", series: "total" },
    { date: "2023-12-025", value: "15730", series: "demand" },
    { date: "2023-12-025", value: 8965, series: "left" },
    { date: "2023-12-025", value: "24695", series: "total" },
    { date: "2023-12-026", value: "64354", series: "demand" },
    { date: "2023-12-026", value: 31912, series: "left" },
    { date: "2023-12-026", value: "96266", series: "total" },
    { date: "2023-12-027", value: "15469", series: "demand" },
    { date: "2023-12-027", value: 28519, series: "left" },
    { date: "2023-12-027", value: "43988", series: "total" },
    { date: "2023-12-028", value: "249", series: "demand" },
    { date: "2023-12-028", value: 7200, series: "left" },
    { date: "2023-12-028", value: "7449", series: "total" },
    { date: "2023-12-029", value: "9296", series: "demand" },
    { date: "2023-12-029", value: 26689, series: "left" },
    { date: "2023-12-029", value: "35985", series: "total" },
    { date: "2023-12-030", value: "4776", series: "demand" },
    { date: "2023-12-030", value: 368, series: "left" },
    { date: "2023-12-030", value: "5144", series: "total" },
    { date: "2023-12-031", value: "50932", series: "demand" },
    { date: "2023-12-031", value: 2237, series: "left" },
    { date: "2023-12-031", value: "53169", series: "total" },
    { date: "2023-12-032", value: "12191", series: "demand" },
    { date: "2023-12-032", value: 45954, series: "left" },
    { date: "2023-12-032", value: "58145", series: "total" },
    { date: "2023-12-033", value: "1615", series: "demand" },
    { date: "2023-12-033", value: 57757, series: "left" },
    { date: "2023-12-033", value: "59372", series: "total" },
    { date: "2023-12-034", value: "16892", series: "demand" },
    { date: "2023-12-034", value: 23399, series: "left" },
    { date: "2023-12-034", value: "40291", series: "total" },
    { date: "2023-12-035", value: "12452", series: "demand" },
    { date: "2023-12-035", value: 2427, series: "left" },
    { date: "2023-12-035", value: "14879", series: "total" },
    { date: "2023-12-036", value: "86059", series: "demand" },
    { date: "2023-12-036", value: 8673, series: "left" },
    { date: "2023-12-036", value: "94732", series: "total" },
    { date: "2023-12-037", value: "1355", series: "demand" },
    { date: "2023-12-037", value: 23182, series: "left" },
    { date: "2023-12-037", value: "24537", series: "total" },
    { date: "2023-12-038", value: "6865", series: "demand" },
    { date: "2023-12-038", value: 26607, series: "left" },
    { date: "2023-12-038", value: "33472", series: "total" },
    { date: "2023-12-039", value: "63665", series: "demand" },
    { date: "2023-12-039", value: 11211, series: "left" },
    { date: "2023-12-039", value: "74876", series: "total" },
    { date: "2023-12-040", value: "14291", series: "demand" },
    { date: "2023-12-040", value: 62592, series: "left" },
    { date: "2023-12-040", value: "76883", series: "total" },
    { date: "2023-12-041", value: "13291", series: "demand" },
    { date: "2023-12-041", value: 27065, series: "left" },
    { date: "2023-12-041", value: "40356", series: "total" },
    { date: "2023-12-042", value: "33858", series: "demand" },
    { date: "2023-12-042", value: 11867, series: "left" },
    { date: "2023-12-042", value: "45725", series: "total" },
  ];

  const spec = {
    type: "common",
    seriesField: "color",
    data: [
      { id: "id0", values: data.filter((o) => o.series !== "total") },
      { id: "id1", values: data.filter((o) => o.series === "total") },
    ],
    series: [
      {
        type: "area",
        id: "bar",
        dataIndex: 0,
        label: { visible: true },
        dataIndex: 0,
        xField: "date",
        yField: "value",
        seriesField: "series",
        area: { zIndex: -1 },
        line: {
          style: {
            lineDash: [2, 2],
            lineWidth: (data) => (data.series === "left" ? 0 : 1),
          },
        },

        dataZoom: { zIndex: 500 },
        point: {
          style: { size: 0 },
          state: {
            dimension_hover: {
              size: (data) => (data.series === "left" ? 0 : 8),
            },
          },
        },
        label: { visible: false },
        area: {
          style: {
            fillOpacity: (data) => (data.series === "left" ? 0.7 : 0.3),
            textureColor: "#fff",
            fill: (data) => (data.series === "left" ? "#bcc0cd" : "#1AC6FF"),
            textureSize: 4,
            texture: (data) => {
              if (data.series === "left") {
                return "bias-rl";
              }
              return null;
            },
          },
        },
      },
      {
        type: "line",
        id: "line",
        dataIndex: 1,
        label: { visible: true },
        seriesField: "series",
        xField: "date",
        yField: "value",
        stack: false,
        label: { visible: false },
        dataZoom: { zIndex: 1000 },
        line: {
          style: {
            lineDash: [2, 2],
            lineWidth: 1,
          },
        },
        point: {
          style: { size: 0 },
          state: {
            dimension_hover: { size: 8 },
          },
        },
      },
    ],
    axes: [
      { orient: "left", visible: false },
      { orient: "right", visible: false },
      { orient: "bottom", label: { visible: true }, type: "band" },
    ],
    legends: { visible: true, orient: "bottom" },
  };
const vchart = new VChart(spec, { dom: CONTAINER_ID }); vchart.renderAsync(); 
window['vchart'] = vchart;

Results

Online demo：hhttps://codesandbox.io/p/sandbox/zindex-4dtk4g?file=%2Fsrc%2Findex.ts%3A4%2C1-217%2C5

How to set time intervals on the timeline?

Siji Chen — Sun, 12 May 2024 16:51:20 +0000

Title

How to set time intervals on the timeline?

Description

When the x-axis type = time, how is the tick interval configured? I want to customize the time interval, for example: interval in "days".

Solution

You can control the interval between different ticks in the timeline by configuring axes.tickStep. Note: tickStep needs to be configured with a second timestamp.

Code Example

const spec = {
  color: [
    '#3855df',
    '#ffc52b',
    '#5ecf78',
    '#fb7a00',
    '#0acffd',
    '#217dfd',
    '#98dd61',
    '#3150e0',
    '#714efd',
    '#0bcfff',
    '#3d0dde',
    '#ffc527',
    '#f5c13f',
    '#fb7a08',
    '#95d8fd'
  ],
  type: 'rangeColumn',
  direction: 'horizontal',
  yField: 'type',
  minField: 'start_time',
  maxField: 'end_time',
  seriesField: 'color',
  dataZoom: [
    {
      orient: 'bottom',
      height: 20,
      start: 0.1,
      endValue: 1681956000,
      filterMode: 'axis',
      brushSelect: false,
      startText: {
        formatMethod: text => Math.floor(text)
      },
      endText: {
        formatMethod: text => Math.floor(text)
      }
    }
  ],
  axes: [
    { orient: 'left', type: 'band', bandPadding: 0.5, visible: false },
    {
      type: 'time',
      orient: 'bottom',
      layers: [
        {
          tickStep: 28800,
          timeFormat: '%Y%m%d %H:%M'
        }
      ]
    }
  ],
  title: {
    textStyle: {
      character: [
        {
          text: 'Time-Consuming Distribution',
          fontWeight: 400,
          fill: '#222'
        },
        {
          text: 'Show the SQL distribution of TOP 100',
          fontWeight: 200,
          fontSize: 10,
          fill: '#555'
        }
      ]
    }
  },
  tooltip: {
    visible: true,
    dimension: {
      visible: false
    },
    mark: {
      title: {
        key: 'Query ID',
        value: datum => 'Query ID: ' + datum['id']
      },
      content: [
        {
          key: 'Time Consuming',
          value: datum => datum['useTime']
        },
        {
          key: 'start time',
          value: datum => datum['start_time']
        },
        {
          key: 'end time',
          value: datum => datum['end_time']
        }
      ]
    }
  },
  data: [
    {
      id: 'data0',
      values: [
        {
          start_time: 1681926000,
          end_time: 1681927200,
          type: 'TOP 1',
          color: 'A',
          id: 'a90292870-9282',
          useTime: '100ms'
        },
        {
          start_time: 1681926000,
          end_time: 1681959600,
          type: 'TOP 2',
          color: 'B',
          id: 'a90292870-9282',
          useTime: '100ms'
        },
        {
          start_time: 1681925400,
          end_time: 1681974000,
          type: 'TOP 3',
          color: 'C',
          id: 'a90292870-9282',
          useTime: '100ms'
        },
        {
          start_time: 1681924800,
          end_time: 1681933200,
          type: 'TOP 4',
          color: 'D',
          id: 'a90292870-9282',
          useTime: '100ms'
        },
        {
          start_time: 1681959600,
          end_time: 1681963200,
          type: 'TOP 5',
          color: 'E',
          id: 'a90292870-9282',
          useTime: '100ms'
        },
        {
          start_time: 1681970400,
          end_time: 1681971000,
          type: 'TOP 5',
          color: 'F',
          id: 'a90292870-9282',
          useTime: '100ms'
        },
        {
          start_time: 1681992000,
          end_time: 1681992600,
          type: 'TOP 5',
          color: 'G',
          useTime: '100ms'
        },
        {
          start_time: 1681956000,
          end_time: 1681963200,
          type: 'TOP 6',
          color: 'H',
          id: 'a90292870-9282',
          useTime: '100ms'
        },
        {
          start_time: 1681990200,
          end_time: 1681993800,
          type: 'TOP 7',
          color: 'I',
          id: 'a90292870-9282',
          useTime: '100ms'
        },
        {
          start_time: 1681948800,
          end_time: 1681959600,
          type: 'TOP 8',
          color: 'J',
          id: 'a90292870-9282',
          useTime: '100ms'
        },
        {
          start_time: 1681945200,
          end_time: 1681956000,
          type: 'TOP 9',
          color: 'K',
          id: 'a90292870-9282',
          useTime: '100ms'
        }
      ].reverse()
    }
  ]
};

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

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

Results

Online demo：https://www.visactor.io/vchart/demo/data-zoom/state-with-data

Does the primitive shape of dataZoom handler support SVG?

Siji Chen — Sat, 27 Apr 2024 07:41:19 +0000

Title

Does the graphic shape in the chart support custom SVG?

Description

How to customize the start and end icons in datazoom? Tried the configurable items in dataZoom.startHandler.style symbolType and didn't find what I needed

Solution

Configure symbolType in the primitive style. The shape type of symbol supports passing in built-in types, and can also be set to a custom path string and svg image. The same configuration can be done for any symbol type primitive in VChart.

Code Example

const spec = {
  color: [
    '#3855df',
    '#ffc52b',
    '#5ecf78',
    '#fb7a00',
    '#0acffd',
    '#217dfd',
    '#98dd61',
    '#3150e0',
    '#714efd',
    '#0bcfff',
    '#3d0dde',
    '#ffc527',
    '#f5c13f',
    '#fb7a08',
    '#95d8fd'
  ],
  type: 'rangeColumn',
  direction: 'horizontal',
  yField: 'type',
  minField: 'start_time',
  maxField: 'end_time',
  seriesField: 'color',
  dataZoom: [
    {
      orient: 'bottom',
      height: 20,
      start: 0.1,
      endValue: 1681956000,
      filterMode: 'axis',
      brushSelect: false,
      startText: {
        formatMethod: text => Math.floor(text)
      },
      endText: {
        formatMethod: text => Math.floor(text)
      },
      startHandler: {
        style: {
          dy: -12,
          dx: -8,
          symbolType: '<svg t="1714125379383" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20427" width="200" height="200"><path d="M827.505255 195.268312C652.829957 20.593014 369.558335 20.593014 194.883037 195.269335 20.202623 369.94975 20.201599 653.220349 194.876897 827.895647c174.681438 174.681438 457.952037 174.679391 632.632451 0C1002.18567 653.220349 1002.18567 369.94975 827.505255 195.268312zM352.449679 703.530175l-63.700811 0L288.748868 319.832306l63.700811 0L352.449679 703.530175zM543.467177 703.530175l-63.700811 0L479.766366 319.832306l63.700811 0L543.467177 703.530175zM735.848743 703.530175l-63.700811 0L672.147932 319.832306l63.700811 0L735.848743 703.530175z" fill="#272636" p-id="20428"></path></svg>'
        }
      }
    }
  ],
  axes: [
    { orient: 'left', type: 'band', bandPadding: 0.5, visible: false },
    {
      type: 'time',
      orient: 'bottom',
      layers: [
        {
          tickStep: 28800,
          timeFormat: '%Y%m%d %H:%M'
        }
      ]
    }
  ],
  title: {
    textStyle: {
      character: [
        {
          text: 'Time-Consuming Distribution',
          fontWeight: 400,
          fill: '#222'
        },
        {
          text: 'Show the SQL distribution of TOP 100',
          fontWeight: 200,
          fontSize: 10,
          fill: '#555'
        }
      ]
    }
  },
  tooltip: {
    visible: true,
    dimension: {
      visible: false
    },
    mark: {
      title: {
        key: 'Query ID',
        value: datum => 'Query ID: ' + datum['id']
      },
      content: [
        {
          key: 'Time Consuming',
          value: datum => datum['useTime']
        },
        {
          key: 'start time',
          value: datum => datum['start_time']
        },
        {
          key: 'end time',
          value: datum => datum['end_time']
        }
      ]
    }
  },
  data: [
    {
      id: 'data0',
      values: [
        {
          start_time: 1681926000,
          end_time: 1681927200,
          type: 'TOP 1',
          color: 'A',
          id: 'a90292870-9282',
          useTime: '100ms'
        },
        {
          start_time: 1681926000,
          end_time: 1681959600,
          type: 'TOP 2',
          color: 'B',
          id: 'a90292870-9282',
          useTime: '100ms'
        },
        {
          start_time: 1681925400,
          end_time: 1681974000,
          type: 'TOP 3',
          color: 'C',
          id: 'a90292870-9282',
          useTime: '100ms'
        },
        {
          start_time: 1681924800,
          end_time: 1681933200,
          type: 'TOP 4',
          color: 'D',
          id: 'a90292870-9282',
          useTime: '100ms'
        },
        {
          start_time: 1681959600,
          end_time: 1681963200,
          type: 'TOP 5',
          color: 'E',
          id: 'a90292870-9282',
          useTime: '100ms'
        },
        {
          start_time: 1681970400,
          end_time: 1681971000,
          type: 'TOP 5',
          color: 'F',
          id: 'a90292870-9282',
          useTime: '100ms'
        },
        {
          start_time: 1681992000,
          end_time: 1681992600,
          type: 'TOP 5',
          color: 'G',
          useTime: '100ms'
        },
        {
          start_time: 1681956000,
          end_time: 1681963200,
          type: 'TOP 6',
          color: 'H',
          id: 'a90292870-9282',
          useTime: '100ms'
        },
        {
          start_time: 1681990200,
          end_time: 1681993800,
          type: 'TOP 7',
          color: 'I',
          id: 'a90292870-9282',
          useTime: '100ms'
        },
        {
          start_time: 1681948800,
          end_time: 1681959600,
          type: 'TOP 8',
          color: 'J',
          id: 'a90292870-9282',
          useTime: '100ms'
        },
        {
          start_time: 1681945200,
          end_time: 1681956000,
          type: 'TOP 9',
          color: 'K',
          id: 'a90292870-9282',
          useTime: '100ms'
        }
      ].reverse()
    }
  ]
};

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

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

Results

Online demo：https://codesandbox.io/p/sandbox/svg-symbol-8k9tdz?file=%2Fsrc%2Findex.ts%3A208%2C29

How to export images from charts?

Siji Chen — Sat, 27 Apr 2024 07:39:41 +0000

Title

Is there an api for exporting pictures from charts?

Description

Can charts be directly converted into high definition images and saved? Is there a relevant API?

Solution

You have two ways to save a chart as an image:
Right-click directly on the chart to save or copy

If you need to get pictures in a software project, we have different interfaces for different code environments

getDataURL

asynchronous methodReturns a data URI that contains the image display.

getDataURL: () => Promise<any>;

exportImg

asynchronous method Export chart images, only support browser side, and parameters at the same time name Pictures can be named.

/**
 * **Asynchronous method** Export chart pictures, only supports browser side.
 * @param name the saved image name
 * @returns
 */
exportImg: (name?: string) => Promise<void>;

exportCanvas

Exporting canvas with chart content is only supported on the browser side. You can use this canvas for secondary processing, such as adding watermarks, etc.

/**
 * Export the canvas with the chart content drawn
 * @returns HTMLCanvasElement
 * @since 1.5.2
 */
exportCanvas: () => HTMLCanvasElement | undefined;

getImageBuffer

Currently only the node environment is supported for node-side image export.

 getImageBuffer: () => void;

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: 16
      },
      {
        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();

// After waiting for the animation to execute or after closing the animation, exportImg
setTimeout(() => {
  vchart.exportImg('vchart')
}, 1000)

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

Results

Online demo：https://codesandbox.io/p/sandbox/exportimg-2zvg62?file=%2Fsrc%2Findex.ts%3A58%2C26

How to display the entire content of abbreviated text when hovering?

Siji Chen — Fri, 19 Apr 2024 06:59:07 +0000

Title

How to display the entire content of abbreviated text when hovering the mouse?

Description

For the following case, can the hover tag display all the information of the tip?

Solution

You can configure poptip: true when creating a new VChart, and then set the tag style.pickable: true to enable tag interaction, so that the full content poptip can be displayed when hovering over the abbreviated tag.

Code Example

const spec = {
  type: 'pie',
  valueField: 'y',
  categoryField: 'originXData',
  label: {
    visible: true,
    position: 'outside',
    style: {
      pickable: true
    }
  },
  legends: {
    orient: 'right'
  },
  title: {
    visible: true,
    text: 'Distribution of Active Device Usage Time',
    textStyle: {
      fontFamily: 'Times New Roman'
    }
  },
  data: {
    id: 'Others',
    values: [
      {
        x: 0,
        y: 0.14307327905613595,
        originXData: '2022-03-10',
        type: 'Others'
      },
      {
        x: 1,
        y: 0.21429552139096195,
        originXData: '2022-03-11',
        type: 'Others'
      },
      {
        x: 2,
        y: 0.20335734294489136,
        originXData: '2022-03-12',
        type: 'Others'
      },
      {
        x: 3,
        y: 0.2008694831063025,
        originXData: '2022-03-13',
        type: 'Others'
      },
      {
        x: 4,
        y: 0.1971832522288174,
        originXData: '2022-03-14',
        type: 'Others'
      },
      {
        x: 5,
        y: 0.2142196933878632,
        originXData: '2022-03-15',
        type: 'Others'
      },
      {
        x: 6,
        y: 0.2827589869448442,
        originXData: '2022-03-16',
        type: 'Others'
      },
      {
        x: 7,
        y: 0.11448070987270477,
        originXData: '2022-03-17',
        type: 'Others'
      },
      {
        x: 8,
        y: 0.05225580072971028,
        originXData: '2022-03-18',
        type: 'Others'
      },
      {
        x: 9,
        y: 0.14047231243026995,
        originXData: '2022-03-19',
        type: 'Others'
      },
      {
        x: 10,
        y: 0.28277882018816153,
        originXData: '2022-03-20',
        type: 'Others'
      },
      {
        x: 11,
        y: 0.1907366902350664,
        originXData: '2022-03-21',
        type: 'Others'
      },
      {
        x: 12,
        y: 0.09187776153132483,
        originXData: '2022-03-22',
        type: 'Others'
      },
      {
        x: 13,
        y: 0.1865056149692558,
        originXData: '2022-03-23',
        type: 'Others'
      },
      {
        x: 14,
        y: 0.24279307316823684,
        originXData: '2022-03-24',
        type: 'Others'
      },
      {
        x: 15,
        y: 0.021338783251485593,
        originXData: '2022-03-25',
        type: 'Others'
      },
      {
        x: 16,
        y: 0.01933475918339416,
        originXData: '2022-03-26',
        type: 'Others'
      },
      {
        x: 17,
        y: 0.12054221495926994,
        originXData: '2022-03-27',
        type: 'Others'
      },
      {
        x: 18,
        y: 0.21045103303733279,
        originXData: '2022-03-28',
        type: 'Others'
      },
      {
        x: 19,
        y: 0.09510339439959557,
        originXData: '2022-03-29',
        type: 'Others'
      },
      {
        x: 20,
        y: 0.10953268445458815,
        originXData: '2022-03-30',
        type: 'Others'
      },
      {
        x: 21,
        y: 0.033257671235135976,
        originXData: '2022-03-31',
        type: 'Others'
      },
      {
        x: 22,
        y: 0.17596385420505348,
        originXData: '2022-04-01',
        type: 'Others'
      },
      {
        x: 23,
        y: 0.21956883545536887,
        originXData: '2022-04-02',
        type: 'Others'
      },
      {
        x: 24,
        y: 0.10219962878682523,
        originXData: '2022-04-03',
        type: 'Others'
      },
      {
        x: 25,
        y: 0.22559599632037952,
        originXData: '2022-04-04',
        type: 'Others'
      },
      {
        x: 26,
        y: 0.16435385997820343,
        originXData: '2022-04-05',
        type: 'Others'
      },
      {
        x: 27,
        y: 0.1935519088636391,
        originXData: '2022-04-06',
        type: 'Others'
      },
      {
        x: 28,
        y: 0.07335880623323374,
        originXData: '2022-04-07',
        type: 'Others'
      },
      {
        x: 29,
        y: 0.32389684991741824,
        originXData: '2022-04-08',
        type: 'Others'
      },
      {
        x: 30,
        y: 0.10574926398978153,
        originXData: '2022-04-09',
        type: 'Others'
      },
      {
        x: 31,
        y: 0.09551619886403787,
        originXData: '2022-04-10',
        type: 'Others'
      },
      {
        x: 32,
        y: 0.18753913754340706,
        originXData: '2022-04-11',
        type: 'Others'
      },
      {
        x: 33,
        y: 0.07251128093720469,
        originXData: '2022-04-12',
        type: 'Others'
      },
      {
        x: 34,
        y: 0.27187881356101434,
        originXData: '2022-04-13',
        type: 'Others'
      },
      {
        x: 35,
        y: 0.03161092640346868,
        originXData: '2022-04-14',
        type: 'Others'
      },
      {
        x: 36,
        y: 0.08645234316145103,
        originXData: '2022-04-15',
        type: 'Others'
      },
      {
        x: 37,
        y: 0.07186915826544578,
        originXData: '2022-04-16',
        type: 'Others'
      },
      {
        x: 38,
        y: 0.13298789816789602,
        originXData: '2022-04-17',
        type: 'Others'
      },
      {
        x: 39,
        y: 0.002498664507185538,
        originXData: '2022-04-18',
        type: 'Others'
      },
      {
        x: 40,
        y: 0.23047255698181987,
        originXData: '2022-04-19',
        type: 'Others'
      },
      {
        x: 41,
        y: 0.2614287826126477,
        originXData: '2022-04-20',
        type: 'Others'
      },
      {
        x: 42,
        y: 0.1416942415946803,
        originXData: '2022-04-21',
        type: 'Others'
      },
      {
        x: 43,
        y: 0.16875110819471914,
        originXData: '2022-04-22',
        type: 'Others'
      },
      {
        x: 44,
        y: 0.17855071283439228,
        originXData: '2022-04-23',
        type: 'Others'
      },
      {
        x: 45,
        y: 0.19374483996277542,
        originXData: '2022-04-24',
        type: 'Others'
      },
      {
        x: 46,
        y: 0.15310293715544224,
        originXData: '2022-04-25',
        type: 'Others'
      },
      {
        x: 47,
        y: 0.054940671436646556,
        originXData: '2022-04-26',
        type: 'Others'
      },
      {
        x: 48,
        y: 0.15449255983596022,
        originXData: '2022-04-27',
        type: 'Others'
      },
      {
        x: 49,
        y: 0.013363330618058769,
        originXData: '2022-04-28',
        type: 'Others'
      },
      {
        x: 50,
        y: 0.04741482052942758,
        originXData: '2022-04-29',
        type: 'Others'
      },
      {
        x: 51,
        y: 0.20622154823735023,
        originXData: '2022-04-30',
        type: 'Others'
      },
      {
        x: 52,
        y: 0.06582002462369495,
        originXData: '2022-05-01',
        type: 'Others'
      },
      {
        x: 53,
        y: 0.09378151773093113,
        originXData: '2022-05-02',
        type: 'Others'
      },
      {
        x: 54,
        y: 0.020396192047011766,
        originXData: '2022-05-03',
        type: 'Others'
      },
      {
        x: 55,
        y: 0.18516266015947339,
        originXData: '2022-05-04',
        type: 'Others'
      },
      {
        x: 56,
        y: 0.10161741887065481,
        originXData: '2022-05-05',
        type: 'Others'
      },
      {
        x: 57,
        y: 0.1770505715131574,
        originXData: '2022-05-06',
        type: 'Others'
      },
      {
        x: 58,
        y: 0.11339797878184575,
        originXData: '2022-05-07',
        type: 'Others'
      },
      {
        x: 59,
        y: 0.14515252680521537,
        originXData: '2022-05-08',
        type: 'Others'
      },
      {
        x: 60,
        y: 0.26957310267383333,
        originXData: '2022-05-09',
        type: 'Others'
      },
      {
        x: 61,
        y: 0.19599754596225075,
        originXData: '2022-05-10',
        type: 'Others'
      },
      {
        x: 62,
        y: 0.17669944891975334,
        originXData: '2022-05-11',
        type: 'Others'
      },
      {
        x: 63,
        y: 0.1558657621841565,
        originXData: '2022-05-12',
        type: 'Others'
      },
      {
        x: 64,
        y: 0.059105464959508816,
        originXData: '2022-05-13',
        type: 'Others'
      },
      {
        x: 65,
        y: 0.12362337826604534,
        originXData: '2022-05-14',
        type: 'Others'
      },
      {
        x: 66,
        y: 0.15828457651759154,
        originXData: '2022-05-15',
        type: 'Others'
      },
      {
        x: 67,
        y: 0.16477088382957397,
        originXData: '2022-05-16',
        type: 'Others'
      },
      {
        x: 68,
        y: 0.18942277783699418,
        originXData: '2022-05-17',
        type: 'Others'
      },
      {
        x: 69,
        y: 0.09183608563616476,
        originXData: '2022-05-18',
        type: 'Others'
      },
      {
        x: 70,
        y: 0.11050570522075298,
        originXData: '2022-05-19',
        type: 'Others'
      },
      {
        x: 71,
        y: 0.27962609951245393,
        originXData: '2022-05-20',
        type: 'Others'
      },
      {
        x: 72,
        y: 0.03528028179470999,
        originXData: '2022-05-21',
        type: 'Others'
      },
      {
        x: 73,
        y: 0.05384340884433819,
        originXData: '2022-05-22',
        type: 'Others'
      },
      {
        x: 74,
        y: 0.2566109634380092,
        originXData: '2022-05-23',
        type: 'Others'
      },
      {
        x: 75,
        y: 0.04706710842769647,
        originXData: '2022-05-24',
        type: 'Others'
      },
      {
        x: 76,
        y: 0.0690497936642742,
        originXData: '2022-05-25',
        type: 'Others'
      },
      {
        x: 77,
        y: 0.22240850644149432,
        originXData: '2022-05-26',
        type: 'Others'
      },
      {
        x: 78,
        y: 0.25247664377313944,
        originXData: '2022-05-27',
        type: 'Others'
      },
      {
        x: 79,
        y: 0.040225106713192425,
        originXData: '2022-05-28',
        type: 'Others'
      },
      {
        x: 80,
        y: 0.163839716976959,
        originXData: '2022-05-29',
        type: 'Others'
      },
      {
        x: 81,
        y: 0.07390521222877466,
        originXData: '2022-05-30',
        type: 'Others'
      },
      {
        x: 82,
        y: 0.012491096724084544,
        originXData: '2022-05-31',
        type: 'Others'
      },
      {
        x: 83,
        y: 0.10259216712446957,
        originXData: '2022-06-01',
        type: 'Others'
      },
      {
        x: 84,
        y: 0.08823120890048103,
        originXData: '2022-06-02',
        type: 'Others'
      },
      {
        x: 85,
        y: 0.09010761416766332,
        originXData: '2022-06-03',
        type: 'Others'
      },
      {
        x: 86,
        y: 0.04192469399478194,
        originXData: '2022-06-04',
        type: 'Others'
      },
      {
        x: 87,
        y: 0.11732142545122648,
        originXData: '2022-06-05',
        type: 'Others'
      },
      {
        x: 88,
        y: 0.18585780122660603,
        originXData: '2022-06-06',
        type: 'Others'
      },
      {
        x: 89,
        y: 0.0870820363115993,
        originXData: '2022-06-07',
        type: 'Others'
      },
      {
        x: 90,
        y: 0.2826807478126429,
        originXData: '2022-06-08',
        type: 'Others'
      },
      {
        x: 91,
        y: 0.06430150639799394,
        originXData: '2022-06-09',
        type: 'Others'
      },
      {
        x: 92,
        y: 0.16911472425643598,
        originXData: '2022-06-10',
        type: 'Others'
      },
      {
        x: 93,
        y: 0.04418197716587454,
        originXData: '2022-06-11',
        type: 'Others'
      },
      {
        x: 94,
        y: 0.05620634466431073,
        originXData: '2022-06-12',
        type: 'Others'
      },
      {
        x: 95,
        y: 0.09831084516203888,
        originXData: '2022-06-13',
        type: 'Others'
      },
      {
        x: 96,
        y: 0.09479199824809702,
        originXData: '2022-06-14',
        type: 'Others'
      },
      {
        x: 97,
        y: 0.051668527899557275,
        originXData: '2022-06-15',
        type: 'Others'
      },
      {
        x: 98,
        y: 0.058331438549321345,
        originXData: '2022-06-16',
        type: 'Others'
      },
      {
        x: 99,
        y: 0.23034428608925023,
        originXData: '2022-06-17',
        type: 'Others'
      },
      {
        x: 100,
        y: 0.20177663186099093,
        originXData: '2022-06-18',
        type: 'Others'
      },
      {
        x: 101,
        y: 0.18978717005592927,
        originXData: '2022-06-19',
        type: 'Others'
      },
      {
        x: 102,
        y: 0.28782493963004174,
        originXData: '2022-06-20',
        type: 'Others'
      },
      {
        x: 103,
        y: 0.1467829353931672,
        originXData: '2022-06-21',
        type: 'Others'
      },
      {
        x: 104,
        y: 0.128230433126852,
        originXData: '2022-06-22',
        type: 'Others'
      },
      {
        x: 105,
        y: 0.0548449051449372,
        originXData: '2022-06-23',
        type: 'Others'
      },
      {
        x: 106,
        y: 0.13419037997388159,
        originXData: '2022-06-24',
        type: 'Others'
      },
      {
        x: 107,
        y: 0.03650370242329377,
        originXData: '2022-06-25',
        type: 'Others'
      },
      {
        x: 108,
        y: 0.11300795916055194,
        originXData: '2022-06-26',
        type: 'Others'
      },
      {
        x: 109,
        y: 0.2892243111269155,
        originXData: '2022-06-27',
        type: 'Others'
      },
      {
        x: 110,
        y: 0.12881197140544712,
        originXData: '2022-06-28',
        type: 'Others'
      },
      {
        x: 111,
        y: 0.08568882796496745,
        originXData: '2022-06-29',
        type: 'Others'
      },
      {
        x: 112,
        y: 0.1876531712328392,
        originXData: '2022-06-30',
        type: 'Others'
      },
      {
        x: 113,
        y: 0.12802513423936035,
        originXData: '2022-07-01',
        type: 'Others'
      },
      {
        x: 114,
        y: 0.04085275656525246,
        originXData: '2022-07-02',
        type: 'Others'
      },
      {
        x: 115,
        y: 0.11571890266638503,
        originXData: '2022-07-03',
        type: 'Others'
      },
      {
        x: 116,
        y: 0.0506988188387463,
        originXData: '2022-07-04',
        type: 'Others'
      },
      {
        x: 117,
        y: 0.1494689703003086,
        originXData: '2022-07-05',
        type: 'Others'
      },
      {
        x: 118,
        y: 0.27730792196171267,
        originXData: '2022-07-06',
        type: 'Others'
      },
      {
        x: 119,
        y: 0.06055467590069835,
        originXData: '2022-07-07',
        type: 'Others'
      },
      {
        x: 120,
        y: 0.07687827184447993,
        originXData: '2022-07-08',
        type: 'Others'
      },
      {
        x: 121,
        y: 0.2566842936513114,
        originXData: '2022-07-09',
        type: 'Others'
      },
      {
        x: 122,
        y: 0.09887321357707671,
        originXData: '2022-07-10',
        type: 'Others'
      },
      {
        x: 123,
        y: 0.02730324273499053,
        originXData: '2022-07-11',
        type: 'Others'
      },
      {
        x: 124,
        y: 0.06536264665124339,
        originXData: '2022-07-12',
        type: 'Others'
      },
      {
        x: 125,
        y: 0.18847345356749562,
        originXData: '2022-07-13',
        type: 'Others'
      },
      {
        x: 126,
        y: 0.28310751524370814,
        originXData: '2022-07-14',
        type: 'Others'
      },
      {
        x: 127,
        y: 0.04893307176362374,
        originXData: '2022-07-15',
        type: 'Others'
      },
      {
        x: 128,
        y: 0.05023463131640375,
        originXData: '2022-07-16',
        type: 'Others'
      },
      {
        x: 129,
        y: 0.1817991933208958,
        originXData: '2022-07-17',
        type: 'Others'
      },
      {
        x: 130,
        y: 0.041091429149233895,
        originXData: '2022-07-18',
        type: 'Others'
      },
      {
        x: 131,
        y: 0.2152272967544634,
        originXData: '2022-07-19',
        type: 'Others'
      },
      {
        x: 132,
        y: 0.2294092597480583,
        originXData: '2022-07-20',
        type: 'Others'
      },
      {
        x: 133,
        y: 0.04812026594860752,
        originXData: '2022-07-21',
        type: 'Others'
      },
      {
        x: 134,
        y: 0.15062608602077723,
        originXData: '2022-07-22',
        type: 'Others'
      },
      {
        x: 135,
        y: 0.04674341937375404,
        originXData: '2022-07-23',
        type: 'Others'
      },
      {
        x: 136,
        y: 0.004691953334433059,
        originXData: '2022-07-24',
        type: 'Others'
      },
      {
        x: 137,
        y: 0.2347717591286564,
        originXData: '2022-07-25',
        type: 'Others'
      },
      {
        x: 138,
        y: 0.0949449243680592,
        originXData: '2022-07-26',
        type: 'Others'
      },
      {
        x: 139,
        y: 0.0025869855432198155,
        originXData: '2022-07-27',
        type: 'Others'
      },
      {
        x: 140,
        y: 0.16298210425832638,
        originXData: '2022-07-28',
        type: 'Others'
      },
      {
        x: 141,
        y: 0.04294961250823847,
        originXData: '2022-07-29',
        type: 'Others'
      },
      {
        x: 142,
        y: 0.23218888847906793,
        originXData: '2022-07-30',
        type: 'Others'
      },
      {
        x: 143,
        y: 0.13214197196191788,
        originXData: '2022-07-31',
        type: 'Others'
      },
      {
        x: 144,
        y: 0.23639487247464253,
        originXData: '2022-08-01',
        type: 'Others'
      },
      {
        x: 145,
        y: 0.2198732786335028,
        originXData: '2022-08-02',
        type: 'Others'
      },
      {
        x: 146,
        y: 0.09819916842568255,
        originXData: '2022-08-03',
        type: 'Others'
      },
      {
        x: 147,
        y: 0.2115038338762922,
        originXData: '2022-08-04',
        type: 'Others'
      },
      {
        x: 148,
        y: 0.27763124426038616,
        originXData: '2022-08-05',
        type: 'Others'
      },
      {
        x: 149,
        y: 0.2409936721598261,
        originXData: '2022-08-06',
        type: 'Others'
      },
      {
        x: 150,
        y: 0.005052818869306636,
        originXData: '2022-08-07',
        type: 'Others'
      },
      {
        x: 151,
        y: 0.10509982509852842,
        originXData: '2022-08-08',
        type: 'Others'
      },
      {
        x: 152,
        y: 0.14684738504256475,
        originXData: '2022-08-09',
        type: 'Others'
      },
      {
        x: 153,
        y: 0.06986602610353633,
        originXData: '2022-08-10',
        type: 'Others'
      },
      {
        x: 154,
        y: 0.13023043447411542,
        originXData: '2022-08-11',
        type: 'Others'
      },
      {
        x: 155,
        y: 0.12264398311386293,
        originXData: '2022-08-12',
        type: 'Others'
      },
      {
        x: 156,
        y: 0.20382835554590054,
        originXData: '2022-08-13',
        type: 'Others'
      },
      {
        x: 157,
        y: 0.11198492143289837,
        originXData: '2022-08-14',
        type: 'Others'
      },
      {
        x: 158,
        y: 0.07253893276910192,
        originXData: '2022-08-15',
        type: 'Others'
      },
      {
        x: 159,
        y: 0.15861094511518986,
        originXData: '2022-08-16',
        type: 'Others'
      },
      {
        x: 160,
        y: 0.022509784190967996,
        originXData: '2022-08-17',
        type: 'Others'
      },
      {
        x: 161,
        y: 0.07739714475795986,
        originXData: '2022-08-18',
        type: 'Others'
      },
      {
        x: 162,
        y: 0.05940452504975817,
        originXData: '2022-08-19',
        type: 'Others'
      },
      {
        x: 163,
        y: 0.22652737632082653,
        originXData: '2022-08-20',
        type: 'Others'
      },
      {
        x: 164,
        y: 0.09417964564260689,
        originXData: '2022-08-21',
        type: 'Others'
      },
      {
        x: 165,
        y: 0.31222056741049686,
        originXData: '2022-08-22',
        type: 'Others'
      },
      {
        x: 166,
        y: 0.013723402827825214,
        originXData: '2022-08-23',
        type: 'Others'
      },
      {
        x: 167,
        y: 0.1677747137304682,
        originXData: '2022-08-24',
        type: 'Others'
      },
      {
        x: 168,
        y: 0.11204260848132035,
        originXData: '2022-08-25',
        type: 'Others'
      },
      {
        x: 169,
        y: 0.1582346072173578,
        originXData: '2022-08-26',
        type: 'Others'
      },
      {
        x: 170,
        y: 0.1341413906744606,
        originXData: '2022-08-27',
        type: 'Others'
      },
      {
        x: 171,
        y: 0.13629356138973928,
        originXData: '2022-08-28',
        type: 'Others'
      },
      {
        x: 172,
        y: 0.21164869928303595,
        originXData: '2022-08-29',
        type: 'Others'
      },
      {
        x: 173,
        y: 0.013993773801955914,
        originXData: '2022-08-30',
        type: 'Others'
      },
      {
        x: 174,
        y: 0.057582671694496976,
        originXData: '2022-08-31',
        type: 'Others'
      },
      {
        x: 175,
        y: 0.17667401662601473,
        originXData: '2022-09-01',
        type: 'Others'
      },
      {
        x: 176,
        y: 0.1877708486581661,
        originXData: '2022-09-02',
        type: 'Others'
      },
      {
        x: 177,
        y: 0.02921282831170386,
        originXData: '2022-09-03',
        type: 'Others'
      },
      {
        x: 178,
        y: 0.18747152615768573,
        originXData: '2022-09-04',
        type: 'Others'
      },
      {
        x: 179,
        y: 0.03413689752079186,
        originXData: '2022-09-05',
        type: 'Others'
      },
      {
        x: 180,
        y: 0.032656498599706374,
        originXData: '2022-09-06',
        type: 'Others'
      }
    ]
  }
};

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

// Just for the convenience of console debugging, do not copy
window['vchart'] = vchart;

Results

Online demo：https://codesandbox.io/p/sandbox/poptip-qjx6sz?file=%2Fsrc%2Findex.ts%3A12%2C15

DEV Community: Siji Chen

How to configure gradual change colors for discrete data in VChart?

Title

Description

Solution

Code Example

Results

Related Documentation

How does react-vchart achieve on-demand loading?

Title

Description

Solution

Code Example

Related Documentation

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

Title

Description

Solution

Code Example

Results

Related Documentation

How to configure series zIndex in common chart?

Title

Description

Solution

Code Example

Results

Related Documentation

How to set time intervals on the timeline?

Title

Description

Solution

Code Example

Results

Related Documentation

Does the primitive shape of dataZoom handler support SVG?

Title

Description

Solution

Code Example

Results

Related Documentation

How to export images from charts?

Title

Description

Solution

getDataURL

exportImg

exportCanvas

getImageBuffer

Code Example

Results

Related Documentation

How to display the entire content of abbreviated text when hovering?

Title

Description

Solution

Code Example

Results

Related Documentation