DEV Community: SimaQ

How to draw a combination diagram with React

SimaQ — Wed, 26 Jun 2024 07:31:05 +0000

Title

How to draw combo diagrams in React

Description

May I ask how to render the composite image?

Solution

Take a look at this online codesandbox example~ https://codesandbox.io/p/sandbox/visactor-vchart-react-demo-forked-h4dyjl?file=%2Fsrc%2FCommonChart.tsx%3A43%2C29

The combination chart and line chart are blocked, causing the tooltip to not be hover.

SimaQ — Wed, 26 Jun 2024 07:29:28 +0000

Title

The combination chart and line chart are blocked, causing the tooltip to not be hover.

Description

The combination chart and line chart are blocked by the column, causing hover to fail to produce tooltip.

Solution

You can adjust the order of series declaration, declare bar series first and then declare line series, so that the polyline will be displayed above the column.

How to assign different colors to multiple lines in a line chart

SimaQ — Wed, 26 Jun 2024 07:27:49 +0000

Title

How to assign different colors to multiple lines in a line chart

Description

Hello, how to assign different colors to multiple polylines?

Solution

Configure color in spec, you can refer to this demo https://visactor.bytedance.net/vchart/demo/area-chart/stream-graph
Configure the color in the element style, you can refer to https://visactor.bytedance.net/vchart/demo/line-chart/multi-line
Set the color palette by theme, you can refer to the demo https://visactor.bytedance.net/vchart/demo/theme/theme-switch , documentation: https://visactor.bytedance.net/vchart/guide/tutorial_docs/Theme/Color_Theme

Can the tip displayed above be configured to modify the background color and text color when hovering a long label?

SimaQ — Wed, 26 Jun 2024 07:25:50 +0000

Title

Can the tip displayed above be configured to modify the background color and text color when hovering a long label?

Description

Can the tip displayed above be configured to modify the background color and text color when hovering a long label?

Solution

Just configure the poptip property in the theme.

theme:{
    component: {
      poptip: {
        contentStyle: {
          fill: '#fff',
        },
        panel: {
          fill: '#ccc'
        }
      }
    }
  }

Code Example

const spec = {
  type: 'bar',
  data: [
    {
      id: 'barData',
      values: [
        {
          name: 'AppleAppleAppleAppleAppleAppleAppleAppleAppleAppleApple',
          value: 214480
        },
        {
          name: 'Google',
          value: 155506
        },
        {
          name: 'Amazon',
          value: 100764
        },
        {
          name: 'Microsoft',
          value: 92715
        },
        {
          name: 'Coca-Cola',
          value: 66341
        },
        {
          name: 'Samsung',
          value: 59890
        },
        {
          name: 'Toyota',
          value: 53404
        },
        {
          name: 'Mercedes-Benz',
          value: 48601
        },
        {
          name: 'Facebook',
          value: 45168
        },
        {
          name: "McDonald's",
          value: 43417
        },
        {
          name: 'Intel',
          value: 43293
        },
        {
          name: 'IBM',
          value: 42972
        },
        {
          name: 'BMW',
          value: 41006
        },
        {
          name: 'Disney',
          value: 39874
        },
        {
          name: 'Cisco',
          value: 34575
        },
        {
          name: 'GE',
          value: 32757
        },
        {
          name: 'Nike',
          value: 30120
        },
        {
          name: 'Louis Vuitton',
          value: 28152
        },
        {
          name: 'Oracle',
          value: 26133
        },
        {
          name: 'Honda',
          value: 23682
        }
      ]
    }
  ],
  direction: 'horizontal',
  xField: 'value',
  yField: 'name',
  axes: [
    {
      orient: 'bottom',
      visible: false
    }
  ],
  label: {
    visible: true
  },
  theme:{
    component: {
      poptip: {
        contentStyle: {
          fill: '#fff',
        },
        panel: {
          fill: '#ccc'
        }
      }
    }
  }
};

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 remove the axis scale value?

SimaQ — Wed, 26 Jun 2024 07:23:50 +0000

Title

How to remove axis scale values?

Description

How to remove the content in the red box?

Solution

You can configure the label.visible of the bottom axis to false to turn off the axis label.

How to configure tooltip and legend shape as rectangles with rounded corners

SimaQ — Wed, 26 Jun 2024 07:22:03 +0000

Title

How to configure Legend Shape as a rectangle with rounded corners?

Description

As shown below:

Solution

Support configuration as'rectRound 'type

Tooltip: shapeType:"rectRound"

tooltip: {
    mark: {
      content: [
        {
          shapeType: 'rectRound',
          key: datum => datum['type'],
          value: datum => datum['value'] + '%'
        }
      ]
    }
  }

Legend:

legends: {
    visible: true,
    orient: 'right',

    item: {
      width: '15%',
      shape: {
        style: {
          symbolType: 'rectRound'
        }
      }
    }
  },

Code Example


const spec = {
  type: 'pie',
  data: [
    {
      id: 'pie',
      values: [
  { value: 10, category: 'One' },
  { value: 9, category: 'Two' },
  { value: 6, category: 'Three' },
  { value: 5, category: 'Four' },
  { value: 4, category: 'Five' },
  { value: 3, category: 'Six' },
  { value: 1, category: 'Seven' }
]
    }
  ],
  categoryField: 'category',
  valueField: 'value',
  legends: {
    visible: true,
    orient: 'right',

    item: {
      width: '15%',
      shape: {
        style: {
          symbolType: 'rectRound'
        }
      }
    }
  },
  tooltip: {
    mark: {
      content: [
        {
          shapeType: 'rectRound',
          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

Right-aligned bar chart numeric labels

SimaQ — Wed, 26 Jun 2024 07:20:03 +0000

Title

Right-aligned display of bar chart numerical labels

Description

Display the labels uniformly on the right and align them to the right.

Solution

You can use the extensionMarkproperty provided by VChart to implement it through custom graphics.

Code Example

const spec = {
  type: 'bar',
  data: [
    {
      id: 'barData',
      values: [
        {
          name: 'Apple',
          value: 214480
        },
        {
          name: 'Google',
          value: 155506
        },
        {
          name: 'Amazon',
          value: 100764
        },
        {
          name: 'Microsoft',
          value: 92715
        },
        {
          name: 'Coca-Cola',
          value: 66341
        },
        {
          name: 'Samsung',
          value: 59890
        },
        {
          name: 'Toyota',
          value: 53404
        },
        {
          name: 'Mercedes-Benz',
          value: 48601
        },
        {
          name: 'Facebook',
          value: 45168
        },
        {
          name: "McDonald's",
          value: 43417
        },
        {
          name: 'Intel',
          value: 43293
        },
        {
          name: 'IBM',
          value: 42972
        },
        {
          name: 'BMW',
          value: 41006
        },
        {
          name: 'Disney',
          value: 39874
        },
        {
          name: 'Cisco',
          value: 34575
        },
        {
          name: 'GE',
          value: 32757
        },
        {
          name: 'Nike',
          value: 30120
        },
        {
          name: 'Louis Vuitton',
          value: 28152
        },
        {
          name: 'Oracle',
          value: 26133
        },
        {
          name: 'Honda',
          value: 23682
        }
      ]
    }
  ],
  direction: 'horizontal',
  xField: 'value',
  yField: 'name',
  axes: [
    {
      orient: 'bottom',
      visible: false
    }
  ],
  label: {
    visible: false
  },
  extensionMark: [
    {
      type: 'text',
      dataId: 'barData',
      visible: true,
      style: {
        text: datum => datum.value,
        fontSize: 12,
        x: (datum, ctx) => {
          return ctx.getRegion().getLayoutRect().width + 10;
        },
        y: (datum, ctx) => {
          return ctx.valueToY([datum.name]) + ctx.yBandwidth() / 2;
        },
        textBaseline: 'middle',
        textAlign: 'right',
        fill: "#1664FF",
        fontSize: 12
      }
    }
  ]
};

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

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

Result

The content displayed in the line chart is currently all selected by default. Is it possible to have a channel inversion

SimaQ — Wed, 26 Jun 2024 07:17:12 +0000

Title

The content displayed in the line chart is currently all selected and displayed by default. Is it possible to have a channel inversion (for example, there is a button that is not displayed with one click)?

Description

Chart legend can be selected all or not all.

Solution

You can configure the legends.defaultSelectedparameter to an empty array: [], restore to all selected words, delete this parameter or copy the full amount of legend items.

Code Example

const spec = {
  type: 'area',
  data: {
    values: [
      { type: 'Nail polish', country: 'Africa', value: 4229 },
      { type: 'Nail polish', country: 'EU', value: 4376 },
      { type: 'Nail polish', country: 'China', value: 3054 },
      { type: 'Nail polish', country: 'USA', value: 12814 },
      { type: 'Eyebrow pencil', country: 'Africa', value: 3932 },
      { type: 'Eyebrow pencil', country: 'EU', value: 3987 },
      { type: 'Eyebrow pencil', country: 'China', value: 5067 },
      { type: 'Eyebrow pencil', country: 'USA', value: 13012 },
      { type: 'Rouge', country: 'Africa', value: 5221 },
      { type: 'Rouge', country: 'EU', value: 3574 },
      { type: 'Rouge', country: 'China', value: 7004 },
      { type: 'Rouge', country: 'USA', value: 11624 },
      { type: 'Lipstick', country: 'Africa', value: 9256 },
      { type: 'Lipstick', country: 'EU', value: 4376 },
      { type: 'Lipstick', country: 'China', value: 9054 },
      { type: 'Lipstick', country: 'USA', value: 8814 },
      { type: 'Eyeshadows', country: 'Africa', value: 3308 },
      { type: 'Eyeshadows', country: 'EU', value: 4572 },
      { type: 'Eyeshadows', country: 'China', value: 12043 },
      { type: 'Eyeshadows', country: 'USA', value: 12998 },
      { type: 'Eyeliner', country: 'Africa', value: 5432 },
      { type: 'Eyeliner', country: 'EU', value: 3417 },
      { type: 'Eyeliner', country: 'China', value: 15067 },
      { type: 'Eyeliner', country: 'USA', value: 12321 },
      { type: 'Foundation', country: 'Africa', value: 13701 },
      { type: 'Foundation', country: 'EU', value: 5231 },
      { type: 'Foundation', country: 'China', value: 10119 },
      { type: 'Foundation', country: 'USA', value: 10342 },
      { type: 'Lip gloss', country: 'Africa', value: 4008 },
      { type: 'Lip gloss', country: 'EU', value: 4572 },
      { type: 'Lip gloss', country: 'China', value: 12043 },
      { type: 'Lip gloss', country: 'USA', value: 22998 },
      { type: 'Mascara', country: 'Africa', value: 18712 },
      { type: 'Mascara', country: 'EU', value: 6134 },
      { type: 'Mascara', country: 'China', value: 10419 },
      { type: 'Mascara', country: 'USA', value: 11261 }
    ]
  },
  title: {
    visible: true,
    text: '100% stacked area chart of cosmetic products sales'
  },
  percent: true,
  xField: 'type',
  yField: 'value',
  seriesField: 'country',
  legends: [
    { 
      visible: true, 
      position: 'middle', 
      orient: 'bottom',
      defaultSelected: []
    }
    ],
  axes: [
    {
      orient: 'left',
      label: {
        formatMethod(val) {
          return `${(val * 100).toFixed(2)}%`;
        }
      }
    }
  ]
};

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 modify the tag graphic of the tooltip content item

SimaQ — Wed, 26 Jun 2024 07:15:36 +0000

Title

How to modify the tag graphic of the tooltip content item?

Description

I want to change the shape in the tooltip to linear for line charts. Is there a good implementation?

Solution

Modify shapeTypeto 'rect '.

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 }
        ]
      }
    ],
    tooltip: {
      mark: { 
        content: 
        [{ key: datum => datum['month'], value: datum => datum['sales'], shapeType: 'rect' }] 
      }
    },
    xField: 'month',
    yField: 'sales'
  };
  const vchart = new VChart(spec, { dom: CONTAINER_ID });
  vchart.renderSync();

Results show

How the word cloud fills the outer container display

SimaQ — Wed, 26 Jun 2024 07:13:03 +0000

Title

How to display a word cloud on top of the outer container?

Description

We have a relatively small scene displaying word clouds, hoping to make the word cloud fill the entire container as much as possible. I tried the official website, but it seems that it cannot fill the container

Solution

This is because in VChart, the word cloud is defaulted to use 'circle 'circular markShape mask graphics, if you want to fill the container as much as possible, you can use 'rect'shape.

Code example


const spec = {
  type: 'wordCloud',
  nameField: 'Keyword',
  valueField: 'Score',
  data: {
    name: 'baseData',
    values: [ { "Keyword": "预期寿命", "Score": 0.8571 }, { "Keyword": "心率", "Score": 0.8571 }, { "Keyword": "疾病", "Score": 0.7597 }, { "Keyword": "心跳快慢", "Score": 0.5714 }, { "Keyword": "心跳", "Score": 0.5714 }, { "Keyword": "郭艺芳", "Score": 0.5624 }, { "Keyword": "陈清勇", "Score": 0.5624 }, { "Keyword": "风险因素", "Score": 0.4874 }, { "Keyword": "心动过速", "Score": 0.4874 }, { "Keyword": "寿命", "Score": 0.3849 }, { "Keyword": "快慢", "Score": 0.3844 }, { "Keyword": "生活习惯", "Score": 0.2857 }, { "Keyword": "河北省人民医院", "Score": 0.2857 }, { "Keyword": "四川大学华西医院", "Score": 0.2186 }, { "Keyword": "华西医院", "Score": 0.2121 }, { "Keyword": "阿尔茨海默病", "Score": 0.2067 }, { "Keyword": "人群", "Score": 0.1984 }, { "Keyword": "痴呆", "Score": 0.19 }, { "Keyword": "研究", "Score": 0.1761 }, { "Keyword": "健康", "Score": 0.1754 }, { "Keyword": "习惯", "Score": 0.1709 }, { "Keyword": "医院", "Score": 0.1664 }, { "Keyword": "风险", "Score": 0.1647 }, { "Keyword": "心内科", "Score": 0.16 }, { "Keyword": "生活", "Score": 0.158 }, { "Keyword": "工作", "Score": 0.1554 }, { "Keyword": "心血管疾病", "Score": 0.1299 }, { "Keyword": "咖啡", "Score": 0.0974 }, { "Keyword": "志飞", "Score": 0.0974 }, { "Keyword": "中国妇女报", "Score": 0.0974 }, { "Keyword": "人民医院", "Score": 0.0913 } ]
  },
  maskShape: 'rect',
  width: 400,
  height: 300,
  background: '#cccc',
  padding: 10
};
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();

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

Results show

How to disable the display of abbreviated tooltips. Customized tooltips do not need to be displayed again

SimaQ — Fri, 10 May 2024 06:26:04 +0000

Title

How to disable the display of abbreviated tooltips. Customized tooltips do not need to be displayed again?

Description

How to disable the display of abbreviated tooltips? Customized tooltips do not need to be displayed repeatedly, as shown below:

Solution

VChart will automatically omit long text and provide an interactive floating display poptip to display the complete text by default. If you want to turn it off, you can set poptip: false in the parameter of the constructor function when initializing the chart, as follows:

const vchart = new VChart(spec, { 
  // ...
  poptip: false, // Close poptip for omitted text
});

Code Example

const spec = {
  type: 'bar',
  width: 300,
  height: 250,
  data: [
    {
      id: 'barData',
      values: [
        {
          name: 'AppleAppleAppleApple',
          value: 214480
        },
        {
          name: 'Google',
          value: 155506
        },
        {
          name: 'Amazon',
          value: 100764
        },
        {
          name: 'Microsoft',
          value: 92715
        },
        {
          name: 'Coca-Cola',
          value: 66341
        },
        {
          name: 'Samsung',
          value: 59890
        },
        {
          name: 'Toyota',
          value: 53404
        },
        {
          name: 'Mercedes-Benz',
          value: 48601
        },
        {
          name: 'Facebook',
          value: 45168
        },
        {
          name: "McDonald's",
          value: 43417
        },
        {
          name: 'Intel',
          value: 43293
        },
        {
          name: 'IBM',
          value: 42972
        },
        {
          name: 'BMW',
          value: 41006
        },
        {
          name: 'Disney',
          value: 39874
        },
        {
          name: 'Cisco',
          value: 34575
        },
        {
          name: 'GE',
          value: 32757
        },
        {
          name: 'Nike',
          value: 30120
        },
        {
          name: 'Louis Vuitton',
          value: 28152
        },
        {
          name: 'Oracle',
          value: 26133
        },
        {
          name: 'Honda',
          value: 23682
        }
      ]
    }
  ],
  direction: 'horizontal',
  xField: 'value',
  yField: 'name',
  axes: [
    {
      orient: 'bottom',
      visible: false
    }
  ],
  label: {
    visible: true
  }
};

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

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

When using stacked bar charts, how to get all data in the same dimension as the clicked bar in the click event

SimaQ — Fri, 10 May 2024 06:25:04 +0000

Title

When using stacked bar charts, how to get all data in the same dimension as the clicked bar in the click event?

Description

When using a stacked bar chart, how to get all the data in the same dimension as the clicked bar in the click event? For example, clicking on the first bar returns four pieces of data represented by the blue, cyan, red, and green legends.

Solution

In VChart, you can first obtain the x-axis dimension information of the clicked column by listening to the click event of the column, then obtain the data of the current chart through the API or directly using the original data source (if you can get it), and then filter out the column data with the same x-axis dimension information. As follows:

// Listen to the click event of the bar primitive
vchart.on('click', { markName: 'bar', level: 'mark' }, (e: any) => {
  const datum = e.datum as any; // Get information about the clicked column
  const chartSpec = e.chart?.getSpec(); // If you can't get the current spec, you can get the original spec in this way.
  const xDimensionValue = datum[chartSpec.xField];
  const chartData = e.chart.chartData.getSeriesData().latestData; // If you can get the original data source, you can also get the original data source directly.
  const filterData = chartData.filter(chartDatum => chartDatum[chartSpec.xField] === xDimensionValue);

  console.log(filterData);
});

Code Example

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

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


// 监听 bar 图元的 click 事件
vchart.on('click', { markName: 'bar', level: 'mark' }, (e: any) => {
  const datum = e.datum as any; // 获取被点击的柱子的信息
  const chartSpec = e.chart?.getSpec(); // 如果你无法获取当前的 spec，可以通过该方式获取原始 spec
  const xDimensionValue = datum[chartSpec.xField];
  const chartData = e.chart.chartData.getSeriesData().latestData; // 如果可以拿到原始数据，也可以直接拿原始数据
  const filterData = chartData.filter(chartDatum => chartDatum[chartSpec.xField] === xDimensionValue);

  console.log(filterData);
});

DEV Community: SimaQ

How to draw a combination diagram with React

Title

Description

Solution

Related Documents

The combination chart and line chart are blocked, causing the tooltip to not be hover.

Title

Description

Solution

Related Documents

How to assign different colors to multiple lines in a line chart

Title

Description

Solution

Related Documents

Can the tip displayed above be configured to modify the background color and text color when hovering a long label?

Title

Description

Solution

Code Example

Result

Related Documents

How to remove the axis scale value?

Title

Description

Solution

Related Documents

How to configure tooltip and legend shape as rectangles with rounded corners

Title

Description

Solution

Code Example

Result

Related Documents

Right-aligned bar chart numeric labels

Title

Description

Solution

Code Example

Result

Related Documents

The content displayed in the line chart is currently all selected by default. Is it possible to have a channel inversion

Title

Description

Solution

Code Example

Result

Related Documents

How to modify the tag graphic of the tooltip content item

Title

Description

Solution

Code Example

Results show

Related Documents

How the word cloud fills the outer container display

Title

Description

Solution

Code example

Results show

Related Documents

How to disable the display of abbreviated tooltips. Customized tooltips do not need to be displayed again

Title

Description

Solution

Code Example

Related Documents

When using stacked bar charts, how to get all data in the same dimension as the clicked bar in the click event

Title

Description

Solution

Code Example

Results

Related Documents