visactor/vchart

VChart, more than just a cross-platform charting library, but also an expressive data storyteller.

VChart

VChart, more than just a cross-platform charting library, but also an expressive data storyteller.

Introduction • Demo • Tutorial • API• Cross-Platform

English| 简体中文

（video）

Introduction

VChart is a charting component library in VisActor visualization system. It wraps the charting logic based on visual grammar library VGrammar and the component encapsulation based on visual rendering engine VRender. The core capabilities are as follows:

1. Cross-platform: Automatically adapt to desktop, H5, and multiple small program environments
2. Storytelling: Comprehensive annotation, animation, flow control, narrative templates, and other enhanced features for visual storytelling
3. Scenes: Deliver visual storytelling capabilities to end-users, unlock developer productivity

Repository Introduction

This repository includes the following packages:

1. vchart: The core code repository of VChart
2. react-vchart: The VChart component encapsulated based on React
3. taro-vchart: The VChart component encapsulated based on Taro
4. lark-vchart: The VChart component encapsulated based on Lark miniAPP
5. tt-vchart: The VChart component encapsulated based on TikTok miniAPP
6. block-vchart: The VChart component encapsulated based on Lark Block
7. wx-vchart：The VChart component encapsulated based on Wx miniAPP
8. docs: VChart site source code, and also contains all Chinese and English documents, chart sample codes, etc. of the site.

🔨 Usage

📦 Installation

# npm
$ npm install @visactor/vchart

# yarn
$ yarn add @visactor/vchart

📊 A Chart Example

import VChart from '@visactor/vchart';

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',
  crosshair: {
    xField: { visible: true }
  }
};

// 'chart' is the id of your dom container, such as <div id="chart"></chart>
const vchart = new VChart(spec, { dom: 'chart' });
vchart.renderAsync();

⌨️ Development

First of all, please install @microsoft/rush

$ npm i --global @microsoft/rush

Then clone locally:

# clone
$ git clone [email protected]:VisActor/VChart.git
$ cd VChart
# install dependencies
$ rush update
# start vchart development server
$ rush start
# start react-vchart development server
$ rush react
# start site development server
$ rush docs

📖 Documents

After installation & clone & update, run docs to preview documents locally.

# start vchart document server
$ rush docs

🔗 Related Links

• Homepage
• VCharts Gallery
• VChart Tutorials
• VChart Options
• VChart API
• VGrammar
• VRender
• FAQ
• CodeSandbox Template for bug reports

💫 Ecosystem

Project	Description
React-VChart	React interface for @VisActor/VChart
OpenInula-VChart	OpenInula VChart Components
OMI	Web Components Framework

🤝 Contribution

If you would like to contribute, please read the Code of Conduct and our contributing guide first。

Small streams converge to make great rivers and seas!

vchart's Issues

vchart demo website development

[Feature] Chart level extension for custom chart like VGrammar

[Feature] support image mark

What problem does this feature solve?

Support image mark. Image mark is required in extended and narrative scenarios

What does the proposed API look like?

export inerface IImageMarkSpec extends IFillMarkSpec{
      width: number;
      height: number;
      repeatX: IRepeatType;
      repeatY: IRepeatType;
      image: string | HTMLImageElement | HTMLCanvasElement;
}

3d chart bugfix

1. 3d scatter support series
2. 3d pie chart outside label support
3. 3d scatter enableView3dTranform bugfix
4. 3d chart z axis layout bugfix

[Document]Supplement React VChart documents

[Feature] Tooltip support group level

[Feature] increased page turner interaction range of the discrete legend

What problem does this feature solve?

The page-turner interaction range of the discrete legend on the mobile terminal is too small and difficult to click

What does the proposed API look like?

change the default of the page-turner interaction range or add a switch to toggle precise interaction

[Feature] tooltip supports adaptive key

What problem does this feature solve?

Users want to achieve the effect shown in the figure below by configuring the first line title as the shape / key of the content line.

But under the current logic, the layout will become like this:

It is expected to support setting the key column of a certain content row not to participate in the overall column alignment, achieving the effect of adapting to text content. Just like this:

What does the proposed API look like?

Add a new api in IToolTipLinePattern:

interface IToolTipLinePattern extends ITooltipShapePattern {
  /** 该 pattern 属于哪个系列id（用户不需要设置） */
  seriesId?: number;
  /** tooltip key 值内容 */
  key?: TooltipContentProperty<string>;
  /** tooltip value 值内容 */
  value?: TooltipContentProperty<string>;
  /** 该行是否可见 */
  visible?: TooltipContentProperty<boolean>;

  // new api
  /** Does the key column in this row fit the content */
  isKeyAdaptive?: TooltipContentProperty<boolean>;
}

If isKeyAdaptive of a certain content line is set to true, then:

• The key column in this row will not participate in the overall alignment of the key and value columns.
• The content of the key column in this row will not be abbreviated.

[Type Definition] component spec upgrade

[Bug] Tooltip is displayed incorrectly when scrolling on mobile

Version

1.0.0

Link to Minimal Reproduction

null

Steps to Reproduce

trigger dimension tooltip and then scroll page

Current Behavior

1.mp4

Expected Behavior

tooltip is displayed incorrectly in this case

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

[demo] legend custom-ui does not work

demo: legend/cutsom-ui

[Feature] access line mark label and enhance label overlap

• access line label
• label.overlap not work
• symbol label position center not work
• strange animation of scatter label case

[Bug] The line chart throws an error when the xField and yField fields are the same

Version

1.0.0

Link to Minimal Reproduction

none

Steps to Reproduce

Just run the spec:

const spec = {
  type: 'line',
  data: [
    {
      id: 'line',
      values: [
        { x: '周一', y: 12 },
        { x: '周二', y: 13 },
        { x: '周三', y: 11 },
        { x: '周四', y: 10 },
        { x: '周五', y: 12 },
        { x: '周六', y: 14 },
        { x: '周日', y: 17 }
      ]
    }
  ],
  xField: 'y',
  yField: 'y',
  axes: [
    {
      zIndex: 100,
      orient: 'bottom'
    },
    {
      zIndex: 100,
      orient: 'left',
      inverse: true, // 左轴开启反转， inverse the left axis
      domainLine: {
        visible: true,
        // 开启末端箭头标记，show the endSymbol
        endSymbol: {
          visible: true,
          style: {
            fill: '#000'
          }
        }
      }
    }
  ]
};

Current Behavior

throw the following error:

Expected Behavior

It should support this situation.

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

[Bug] The "label.visible" is not effect in RangeColumn Chart

Version

1.0.0

Link to Minimal Reproduction

https://codepen.io/xuanhun/pen/BaGZRYb

Steps to Reproduce

1. key option :

 direction: 'horizontal',
  yField: 'type',
  xField: ['min', 'max'],
  label: {
    visible: false,
    position: 'bothEnd', // 两端
    // position: 'start', // 起点
    // position: 'end', // 终点
    // position: 'middle', // 中间
  },

Current Behavior

set "label.visible" as "false",but it is not effect.

Expected Behavior

The labels are hidden.

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

disable morph when animation is disabled

currently, if you configured animation: false in spec, and then use updateSpec API to rerender chart, the morphing animation will still run. This might be confusing.

[Feature] Simple Indicator

What problem does this feature solve?

New 4.x indicator chart, which includes 3.x's features.

What does the proposed API look like?

interface IIndicatorChartSpec {
  data: ...
  title: MaybeArray<{
    key: ITextMarkSpec;
    value: ITextMarkSpec;
    symbol: ISymbolMarkSpec;
  }>;
  content: MaybeArray<{
    key: ITextMarkSpec;
    value: ITextMarkSpec;
    symbol: ISymbolMarkSpec;
  }>;
  layoutMode: 'normal' | 'comparative';
}

[Feature] dimension tooltip supports linear axis

[Bug] The tootlip shape's style will be affected by parent's lineHight

Version

1.1.0-beta.0

Link to Minimal Reproduction

none

Steps to Reproduce

just run the following spec, and set vchart-tooltip-element line-height to 18px， you can reproduce the bug.

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

Current Behavior

The tooltip's shape can not be vertical aligned.

Expected Behavior

The tooltip's shape should be vertical aligned.

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

[Feature] provide support for group interactions for grouped charts

What problem does this feature solve?

Support a new built-in interaction mode that allows selecting data for a specific group

What does the proposed API look like?

add build-in state:

• group_hover
• group_hover_reverse

[demo] The animation of point is werid in scrollbar-line-chart demo

reproduce spec:

const spec = {
  type: 'line',
  data: {
    values: [
      {
        time: '0:05',
        value: 10
      },
      {
        time: '0:10',
        value: 18
      },
      {
        time: '0:15',
        value: 20
      },
      {
        time: '0:20',
        value: 18
      },
      {
        time: '0:25',
        value: 20
      },
      {
        time: '0:30',
        value: 18
      },
      {
        time: '0:35',
        value: 20
      },
      {
        time: '0:40',
        value: 18
      },
      {
        time: '0:45',
        value: 20
      },
      {
        time: '0:50',
        value: 18
      },
      {
        time: '0:55',
        value: 10
      },
      {
        time: '1:00',
        value: 28
      },
      {
        time: '1:05',
        value: 18
      },
      {
        time: '1:10',
        value: 14
      },
      {
        time: '1:15',
        value: 12
      },
      {
        time: '1:20',
        value: 9
      },
      {
        time: '1:25',
        value: 20
      },
      {
        time: '1:30',
        value: 3
      },
      {
        time: '1:35',
        value: 4
      },
      {
        time: '1:40',
        value: 5
      },
      {
        time: '1:45',
        value: 10
      },
      {
        time: '1:50',
        value: 16
      },
      {
        time: '1:55',
        value: 10
      },
      {
        time: '2:00',
        value: 8
      },
      {
        time: '2:05',
        value: 18
      },
      {
        time: '2:10',
        value: 14
      },
      {
        time: '2:15',
        value: 12
      },
      {
        time: '2:20',
        value: 9
      },
      {
        time: '2:25',
        value: 20
      },
      {
        time: '2:30',
        value: 3
      },
      {
        time: '2:35',
        value: 4
      },
      {
        time: '2:40',
        value: 5
      },
      {
        time: '2:45',
        value: 10
      },
      {
        time: '2:50',
        value: 16
      },
      {
        time: '2:55',
        value: 10
      },
      {
        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',
  crosshair: {
    xField: { visible: true }
  },
  scrollBar: [
    {
      orient: 'bottom',
      start: 0.8,
      end: 1,
      roam: true,
      filterMode: 'axis'
    }
  ]
};

[Bug] map zoom interaction issue

• interaction now need to hold down Ctrl key
• zoomLimit didn't work in map mark

---

vRender problem:

• consume config in event did not work as expected
• waiting for new vrender version. see: VisActor/VRender#92

Who use VChart

If you use VChart, don't be shy edit this wiki page.

Modify the label smart invert to adapt to the modification of the fill and stroke of canopus

marker component coordinateLayout performance optimization

dataZoom color theme

`borderRadius` rename to `cornerRadius`

Related VisActor/VRender#20

datazoom component extra stroke

[Feature] PieChart support `radiusOffset` property

What problem does this feature solve?

The radiusOffset should be a specific pixel value, which makes it convenient for users to configure the hover style of the pie chart sector. You can refer to ChartSpace@v3.

What does the proposed API look like?

pie: {
  state: {
    hover: {
      radiusOffset: 20
    }
  }
}

[Feature] support image mark for custom mark

[Bug] The custom UI legend has caused layout issues.

Version

1.0.0

Link to Minimal Reproduction

https://jsfiddle.net/785wxezc/3/

Steps to Reproduce

see: https://jsfiddle.net/785wxezc/3/

Current Behavior

axis disappear

Expected Behavior

axis should not disappear

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

[Bug] Histogram chart can not render crosshair

Version

0.0.1-alpha.1

Link to Minimal Reproduction

none

Steps to Reproduce

reproduce spec:

const spec = {
  data: [
    {
      name: 'data1',
      values: [
        {
          x0: -400,
          x1: -380,
          frequency: 0
        },
        {
          x0: -380,
          x1: -360,
          frequency: 4
        },
        {
          x0: -360,
          x1: -340,
          frequency: 7
        },
        {
          x0: -340,
          x1: -320,
          frequency: 7
        },
        {
          x0: -320,
          x1: -300,
          frequency: 18
        },
        {
          x0: -300,
          x1: -280,
          frequency: 30
        },
        {
          x0: -280,
          x1: -260,
          frequency: 33
        },
        {
          x0: -260,
          x1: -240,
          frequency: 80
        },
        {
          x0: -240,
          x1: -220,
          frequency: 98
        },
        {
          x0: -220,
          x1: -200,
          frequency: 124
        },
        {
          x0: -200,
          x1: -180,
          frequency: 161
        },
        {
          x0: -180,
          x1: -160,
          frequency: 176
        },
        {
          x0: -160,
          x1: -140,
          frequency: 227
        },
        {
          x0: -140,
          x1: -120,
          frequency: 276
        },
        {
          x0: -120,
          x1: -100,
          frequency: 321
        },
        {
          x0: -100,
          x1: -80,
          frequency: 452
        },
        {
          x0: -80,
          x1: -60,
          frequency: 441
        },
        {
          x0: -60,
          x1: -40,
          frequency: 505
        },
        {
          x0: -40,
          x1: -20,
          frequency: 521
        },
        {
          x0: -20,
          x1: 0,
          frequency: 733
        },
        {
          x0: 0,
          x1: 20,
          frequency: 892
        },
        {
          x0: 20,
          x1: 40,
          frequency: 362
        },
        {
          x0: 40,
          x1: 60,
          frequency: 267
        },
        {
          x0: 60,
          x1: 80,
          frequency: 223
        },
        {
          x0: 80,
          x1: 100,
          frequency: 157
        },
        {
          x0: 100,
          x1: 120,
          frequency: 170
        },
        {
          x0: 120,
          x1: 140,
          frequency: 124
        },
        {
          x0: 140,
          x1: 160,
          frequency: 112
        },
        {
          x0: 160,
          x1: 180,
          frequency: 73
        },
        {
          x0: 180,
          x1: 200,
          frequency: 80
        },
        {
          x0: 200,
          x1: 220,
          frequency: 49
        },
        {
          x0: 220,
          x1: 240,
          frequency: 33
        },
        {
          x0: 240,
          x1: 260,
          frequency: 30
        },
        {
          x0: 260,
          x1: 280,
          frequency: 21
        },
        {
          x0: 280,
          x1: 300,
          frequency: 9
        },
        {
          x0: 300,
          x1: 320,
          frequency: 13
        },
        {
          x0: 320,
          x1: 340,
          frequency: 11
        },
        {
          x0: 340,
          x1: 360,
          frequency: 5
        },
        {
          x0: 360,
          x1: 380,
          frequency: 4
        },
        {
          x0: 380,
          x1: 400,
          frequency: 4
        },
        {
          x0: 400,
          x1: 420,
          frequency: 2
        },
        {
          x0: 420,
          x1: 440,
          frequency: 8
        },
        {
          x0: 440,
          x1: 460,
          frequency: 2
        },
        {
          x0: 460,
          x1: 480,
          frequency: 3
        },
        {
          x0: 480,
          x1: 500,
          frequency: 10
        },
        {
          x0: 500,
          x1: 520,
          frequency: 7
        },
        {
          x0: 520,
          x1: 540,
          frequency: 14
        },
        {
          x0: 540,
          x1: 560,
          frequency: 6
        },
        {
          x0: 560,
          x1: 580,
          frequency: 1
        },
        {
          x0: 580,
          x1: 600,
          frequency: 3
        },
        {
          x0: 600,
          x1: 620,
          frequency: 0
        },
        {
          x0: 620,
          x1: 640,
          frequency: 6
        },
        {
          x0: 640,
          x1: 660,
          frequency: 5
        },
        {
          x0: 660,
          x1: 680,
          frequency: 3
        },
        {
          x0: 680,
          x1: 700,
          frequency: 2
        },
        {
          x0: 700,
          x1: 720,
          frequency: 0
        }
      ]
    }
  ],
  type: 'histogram',
  xField: 'x0',
  x2Field: 'x1',
  yField: 'frequency',
  bar: {
    style: {
      stroke: 'white',
      lineWidth: 1
    }
  },
  title: {
    text: 'Arrival Time Histogram',
    textStyle: {
      height: 50,
      lineWidth: 3,
      fill: '#333',
      fontSize: 25,
      fontFamily: 'Times New Roman'
    },
    subtextStyle: {
      character: [
        {
          text: 'This histogram details the distribution of the number of seconds the arrival of tram line 1 of Amsterdam on 2 October 2017 deviated from the planning on each stop in each trip.\nThe data was filtered to remove 4 extreme measurements from ~7000 datapoints that caused significant skewing.',
          fontFamily: 'Times New Roman',
          fontSize: 14,
          fill: '#333'
        },
        {
          text: '\ndata source: https://observablehq.com/@nickrttn/departure-time-histogram',
          fontSize: 10,
          fill: '#333',
          fillOpacity: 0.5
        }
      ]
    }
  },
  tooltip: {
    visible: true,
    mark: {
      title: {
        key: 'title',
        value: 'frequency'
      },
      content: [
        {
          key: datum => datum['x0'] + '～' + datum['x1'],
          value: datum => datum['frequency']
        }
      ]
    }
  },
  crosshair: {
    xField: { visible: true } 
  }
};

Current Behavior

the line of crosshair can not render.

Expected Behavior

show the rect of crosshair

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

write tutorials of VChart

[Feature] discrete legend support set custom field

What problem does this feature solve?

In some chart scenarios, users expect to use multiple discrete legends corresponding to different dimension mappings, such as a color legend and a shape legend, which require the legends to correspond to different dimensions

What does the proposed API look like?

spec: {
legends: {
type: "discrete",
field: 'shape'
}
}

[demo] add demo of VisActor

[demo] when axis label rotate(such as 90 degree), the sample algorithm does not work correctly

It should display all the label on the bottom axis.

preproduce spec:

const items = [
  '资产负债率',
  '剔除预收款项后的资产负债率',
  '长期资本负债率',
  '长期资产适合率',
  '权益乘数',
  '流动负债权益比率',
  '带息债务/全部投入资本',
  '流动负债/负债合计',
  '资本固定化比率',
  '期望违约频率EDF'
];
const rawData = [
  1.0, 0.594527, 0.492963, -0.160995, 0.723664, 0.658646, -0.857474, 0.320706, -0.284634, -0.091423, 0.594527, 1.0,
  0.724546, -0.099318, 0.540639, 0.49214, -0.554039, 0.17127, -0.265259, 0.068577, 0.492963, 0.724546, 1.0, -0.091338,
  0.450542, 0.375839, -0.524955, 0.300627, -0.198362, 0.033209, -0.160995, -0.099318, -0.091338, 1.0, -0.049872,
  -0.028452, 0.157157, 0.009742, -0.162374, 0.155095, 0.723664, 0.540639, 0.450542, -0.049872, 1.0, 0.951933, -0.651767,
  0.079052, -0.535984, 0.00798, 0.658646, 0.49214, 0.375839, -0.028452, 0.951933, 1.0, -0.543147, -0.106139, -0.52232,
  0.011466, -0.857474, -0.554039, -0.524955, 0.157157, -0.651767, -0.543147, 1.0, -0.595016, 0.310521, 0.066397,
  0.320706, 0.17127, 0.300627, 0.009742, 0.079052, -0.106139, -0.595016, 1.0, -0.105199, -0.064886, -0.284634,
  -0.265259, -0.198362, -0.162374, -0.535984, -0.52232, 0.310521, -0.105199, 1.0, -0.080153, -0.091423, 0.068577,
  0.033209, 0.155095, 0.00798, 0.011466, 0.066397, -0.064886, -0.080153, 1.0
];
const data = [];
for (let i = 0; i < items.length; i++) {
  for (let j = 0; j < items.length; j++) {
    data.push({
      var1: items[i],
      var2: items[j],
      value: rawData[i * items.length + j]
    });
  }
}

const spec = {
  type: 'common',
  padding: 12,
  data: [
    {
      id: 'data0',
      values: data
    }
  ],
  series: [
    {
      type: 'heatmap',
      regionId: 'region0',
      xField: 'var1',
      yField: 'var2',
      valueField: 'value',
      cell: {
        style: {
          fill: {
            field: 'value',
            scale: 'color'
          }
        }
      }
    }
  ],
  region: [
    {
      id: 'region0',
      width: 300, // 限定 region 的宽度
      height: 300 // 限定 region 的高度
    }
  ],
  color: {
    type: 'linear',
    domain: [
      {
        dataId: 'data0',
        fields: ['value']
      }
    ],
    range: ['#feedde', '#fdbe85', '#fd8d3c', '#e6550d', '#a63603']
  },
  axes: [
    {
      orient: 'bottom',
      type: 'band',
      grid: {
        visible: false
      },
      domainLine: {
        visible: false
      },
      label: {
        space: 10,
        style: {
          textAlign: 'left',
          textBaseline: 'middle',
          angle: 90
        }
      },
      bandPadding: 0,
      height: layoutRect => {
        // 将底部轴的高度设置为画布的高度 - region 高度 - paddingTop - paddingBottom
        return layoutRect.height - 324;
      }
    },
    {
      orient: 'left',
      type: 'band',
      grid: {
        visible: false
      },
      domainLine: {
        visible: false
      },
      label: {
        space: 10
      },
      bandPadding: 0
    }
  ],
  legends: {
    visible: true,
    orient: 'right',
    type: 'color',
    field: 'value',
    title: {
      visible: true,
      text: `Correlation Coefficient`
    }
  }
};

[Feature] provide `crosshair` by default for some charts

What problem does this feature solve?

Like lineChart, barChart, we should provide crosshair component by default.

What does the proposed API look like?

none

[Feature] mark tooltip supports setting based on mark type

What problem does this feature solve?

Users hope to more conveniently configure different tooltip content for different mark types.

What does the proposed API look like?

There are 2 ways to implement:

1. add tooltip api to mark spec, like this:

// series spec
{
  funnel: {
    style: { ... },
    state: { ... },
    tooltip: { ... } // ITooltipPattern
  },
  transform: {
    style: { ... },
    state: { ... },
    tooltip: { ... } // ITooltipPattern
  },
}

ITooltipPattern declaration:

interface ITooltipPattern {
  visible?: boolean;
  title?: IToolTipLinePattern;
  content?: IToolTipLinePattern[];
  position?: TooltipPosition;
  hasShape?: boolean;
  shapeType?: ShapeType | TooltipContentCallback;
  shapeColor?: string | TooltipContentCallback;
  shapeHollow?: boolean;
  updateTitle?: (prev: IToolTipLineActual | undefined, data: TooltipData) => IToolTipLineActual | undefined;
  updateContent?: (prev: IToolTipLineActual[] | undefined, data: TooltipData) => IToolTipLineActual[] | undefined;
  updatePosition?: (prev: ITooltipPositionActual | undefined, data: TooltipData) => ITooltipPositionActual | undefined;

  // new api, same to the property in ITooltipSpec
  style?: Omit<ITooltipTheme, 'maxWidth' | 'minWidth' | 'offset'>;
}

This method is very intuitive but difficult to implement.

2. ITooltipPattern.visible, ITooltipPattern.title and ITooltipPattern.content support custom callback:

interface ITooltipPattern {
  visible?: boolean | ((data: TooltipData, mark: IMark) => boolean);
  title?: IToolTipLinePattern | ((data: TooltipData, mark: IMark) => IToolTipLinePattern);
  content?: IToolTipLinePattern[] | ((data: TooltipData, mark: IMark) => IToolTipLinePattern[]);
}

This method is less flexible and scalable.

[Feature] spec.theme can be a string(which means the name of a theme)

What problem does this feature solve?

It will be convenient for users to switch chart themes through specification.

What does the proposed API look like?

{
  theme: 'myThemeName'
}

[Bug] The left axis does not display correctly when the data is all negative

Version

1.0.0-alpha.0

Link to Minimal Reproduction

https://codesandbox.io/s/fervent-fermi-6pllny?file=/src/index.ts

Steps to Reproduce

1. Make a line chart with all negative values

Current Behavior

after setting all values to negative, the left axis has disappears

Expected Behavior

when setting all values to negative, the left axis work well

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

remove deparated graphic properties.

• fillColor -> fill
• strokeColor -> stroke
• refactor boxPlot mark style name
• update site examples

[Feature] standardization of theme semantic color palette

What problem does this feature solve?

The default semantic color palette is not completed then.

What does the proposed API look like?

[Feature] funnel label support smart invert

[Bug] Running in a node environment, an error will be reported because of the use of cjs

Version

0.0.1-alpha.0

Link to Minimal Reproduction

null

Steps to Reproduce

const VChart = require("@visactor/vchart");

Current Behavior

In the node environment, use the cjs method to run, and get an error：

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/bytedance/Downloads/node-canvas/node_modules/@visactor/vdataset/node_modules/d3-geo/src/index.js from /Users/bytedance/Downloads/node-canvas/node_modules/@visactor/vdataset/cjs/utils/geo.js not supported.
Instead change the require of index.js in /Users/bytedance/Downloads/node-canvas/node_modules/@visactor/vdataset/cjs/utils/geo.js to a dynamic import() which is available in all CommonJS modules.

Expected Behavior

normal operation

Environment

- node v16.16.0

Any additional comments?

No response

Optimize the way of Shrinking Bundle Size

目前按需引入的方式如下：

import { VChart } from "@visactor/vchart/esm/core/vchart";
import { Factory } from "@visactor/vchart/esm/core/factory";
import { Region } from "@visactor/vchart/esm/region/region";
import { Layout } from "@visactor/vchart/esm/layout/index";
import { RectMark } from "@visactor/vchart/esm/mark/rect";
import { ComponentMark } from "@visactor/vchart/esm/mark/component";
import { GroupMark } from "@visactor/vchart/esm/mark/group";
import {
  CartesianAxis,
  CartesianLinearAxis,
  CartesianBandAxis
} from "@visactor/vchart/esm/component/axis/cartesian/index";
import { Tooltip } from "@visactor/vchart/esm/component/tooltip";
import { CartesianCrossHair } from "@visactor/vchart/esm/component/crosshair/cartesian";
import { BarSeries } from "@visactor/vchart/esm/series/bar/bar";
import { BarChart } from "@visactor/vchart/esm/chart/bar/bar";
// charts
VChart.useChart([BarChart]);
// series
VChart.useSeries([BarSeries]);
// marks
VChart.useMark([RectMark, ComponentMark, GroupMark]);
// components
VChart.useComponent([
  CartesianAxis as any,
  CartesianLinearAxis,
  CartesianBandAxis,
  Tooltip,
  CartesianCrossHair
]);
// region
Factory.registerRegion("region", Region as any);
// layout
Factory.registerLayout("base", Layout as any);

存在如下问题：

1. 缺乏核心包，比如 Region、Layout、GroupMark 这三个元素应该是必须引入的，也就是不需要用户手动引入
2. 目前的引入方式依赖代码的文件路径，存在更改风险，内部结构变化很容易导致用户侧报错

[demo] linear progress can not group correctly

support DSL check

[Bug] Event handler not work when react-vchart component is repeatedly rendered.

Version

@visactor/[email protected]

Link to Minimal Reproduction

none

Steps to Reproduce

if add a random key for the component, this problem can be avoided.

Current Behavior

onPointerUp onClick not triggered

Expected Behavior

event handler works if rerender.

Environment

- OS: Mac
- Browser: Chrome
- Framework: React

Any additional comments?

No response

[Feature] common theme api by series mark name

What problem does this feature solve?

common theme properties in ITheme

What does the proposed API look like?

export interface ITheme {
  /** 全局 mark 样式属性，按 mark 名称区分 */
  markByName?: IGlobalMarkThemeByName;
}

export interface IGlobalMarkThemeByName {
  /** used in lineSeries, areaSeries, radarSeries, etc. */
  line?: Partial<IMarkTheme<ILineMarkSpec>>;
  /** used in lineSeries, areaSeries, radarSeries, scatterSeries etc. */
  point?: Partial<IMarkTheme<ISymbolMarkSpec>>;
  /** used in lineSeries, areaSeries, radarSeries, etc. */
  area?: Partial<IMarkTheme<IAreaMarkSpec>>;
  /** used in barSeries, rangeColumnSeries etc. */
  bar?: Partial<IMarkTheme<IRectMarkSpec>>;
  /** used in many series */
  label?: Partial<IMarkTheme<ITextMarkSpec>>;

  [markName: string]: Partial<IMarkTheme<any>>;
}

[Bug] The tooltip can not work correctly in common chart, when series do not have the same yField

Version

1.0.0

Link to Minimal Reproduction

https://jsfiddle.net/4otquy30/1/

Steps to Reproduce

I made a reproduction in this jsfiddle link: https://jsfiddle.net/4otquy30/1/

Current Behavior

The area value cannot be displayed, just like the following snapshot:

Expected Behavior

The area values should be displayed, and the shape should be circle.

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

marker component pickable not effect