DEV Community: TingLittleKang

How to achieve line break effect for pie chart labels in @visactor/vchart?

TingLittleKang — Fri, 24 May 2024 08:40:45 +0000

Solution

The pie chart label supports the formatting method. In the formatting method, we can switch the label to rich text by setting type: rich in the return object; rich text supports common line breaks, ICONS, and image displays.

Code Examples

const spec = {
  type: 'pie',
  data: [
    {
      id: 'id0',
      values: [
        { type: 'oxygen', value: '26.60' },
        { type: 'silicon', value: '27.72' },
        { type: 'aluminum', value: '8.13' },
        { type: 'iron', value: '5' },
        { type: 'calcium', value: '3.63' },
      ]
    }
  ],
  outerRadius: 0.8,
  innerRadius: 0.5,
  padAngle: 0.6,
  valueField: 'value',
  categoryField: 'type',
  pie: {
    style: {
      cornerRadius: 10
    },
    state: {
      hover: {
        outerRadius: 0.85,
        stroke: '#000',
        lineWidth: 1
      },
      selected: {
        outerRadius: 0.85,
        stroke: '#000',
        lineWidth: 1
      }
    }
  },
  title: {
    visible: true,
    text: 'Statistics of Surface Element Content'
  },
  legends: {
    visible: true,
    orient: 'left'
  },
  label: {
    visible: true,
    formatMethod: (label, datum) => {
      return {
        type: 'rich',
        text: [{
          text: `${label}\n`,
          fontSize: 12,
          fill: '#8a8a8a',
          lineHeight: 20,
          fontWeight: 400
        }, {
          text: `${datum._percent_}%`,
          fill: '#121212',
          fontSize: 14,
          fontWeight: 500,
          lineHeight: 22,
        }]
      }
    }
  },
  tooltip: {
    mark: {
      content: [
        {
          key: datum => datum['type'],
          value: datum => datum['value'] + '%'
        }
      ]
    }
  }
};

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

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

Result Presentation

How to limit the number of lines in Tooltip?

TingLittleKang — Fri, 24 May 2024 08:39:38 +0000

Problem description

When there are too many data items in the Tooltip, it will be automatically categorized as others after more than 20 items. Can I customize this number?

Solution

Tooltip supports setting the maximum number of lines through maxLineCount. It should be noted that vchart's tooltip supports multiple types, and now they need to be set separately.

Code Examples

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

How to bind the click event of the pie chart label in @visactor/vchart?

TingLittleKang — Fri, 24 May 2024 08:37:26 +0000

Problem Description

As shown in the pie chart below, how can I achieve a custom callback when clicking on a label?

Solution

In VChart, the label component does not respond to events by default. This is mainly to avoid affecting the event response of the main chart elements when the labels are dense. To achieve event listening of labels, you need to take two steps:

Enable label event response by setting label.interactive to true
Implement event listening of label components through { level: 'model', type: 'label' }

Code Examples

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

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

vchart.on('click',{ level:'model', type:'label'}, (e) => { 
  console.log('label', e) 
})

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

How to set the maximum number of X-axis and Y-axis labels?

TingLittleKang — Fri, 24 May 2024 08:35:59 +0000

How to set the maximum number of X-axis and Y-axis labels?

Problem Description

In the following chart, the labels on the x-axis are displayed quite densely. Can we limit the maximum number of labels? Make the x-axis labels look better visually, while all points on the line need to be displayed.

Solution

In VChart, the number of axis labels is affected by various configurations. There are two ways to limit the number of axis labels:

Set sampling to true so that sampling will be automatically performed according to the width of the labels.
Set tick.tickCount to specify the number of labels.

Code Examples

const spec = {
  type: 'line',
  data: {
    values: [
      {
        medalType: 'Gold Medals',
        count: 40,
        year: '1952'
      },
      {
        medalType: 'Gold Medals',
        count: 32,
        year: '1956'
      },
      {
        medalType: 'Gold Medals',
        count: 34,
        year: '1960'
      },
      {
        medalType: 'Gold Medals',
        count: 36,
        year: '1964'
      },
      {
        medalType: 'Gold Medals',
        count: 45,
        year: '1968'
      },
      {
        medalType: 'Gold Medals',
        count: 33,
        year: '1972'
      },
      {
        medalType: 'Gold Medals',
        count: 34,
        year: '1976'
      },
      {
        medalType: 'Gold Medals',
        count: null,
        year: '1980'
      },
      {
        medalType: 'Gold Medals',
        count: 83,
        year: '1984'
      },
      {
        medalType: 'Gold Medals',
        count: 36,
        year: '1988'
      },
      {
        medalType: 'Gold Medals',
        count: 37,
        year: '1992'
      },
      {
        medalType: 'Gold Medals',
        count: 44,
        year: '1996'
      },
      {
        medalType: 'Gold Medals',
        count: 37,
        year: '2000'
      },
      {
        medalType: 'Gold Medals',
        count: 35,
        year: '2004'
      },
      {
        medalType: 'Gold Medals',
        count: 36,
        year: '2008'
      },
      {
        medalType: 'Gold Medals',
        count: 46,
        year: '2012'
      },
      {
        medalType: 'Silver Medals',
        count: 19,
        year: '1952'
      },
      {
        medalType: 'Silver Medals',
        count: 25,
        year: '1956'
      },
      {
        medalType: 'Silver Medals',
        count: 21,
        year: '1960'
      },
      {
        medalType: 'Silver Medals',
        count: 26,
        year: '1964'
      },
      {
        medalType: 'Silver Medals',
        count: 28,
        year: '1968'
      },
      {
        medalType: 'Silver Medals',
        count: 31,
        year: '1972'
      },
      {
        medalType: 'Silver Medals',
        count: 35,
        year: '1976'
      },
      {
        medalType: 'Silver Medals',
        count: null,
        year: '1980'
      },
      {
        medalType: 'Silver Medals',
        count: 60,
        year: '1984'
      },
      {
        medalType: 'Silver Medals',
        count: 31,
        year: '1988'
      },
      {
        medalType: 'Silver Medals',
        count: 34,
        year: '1992'
      },
      {
        medalType: 'Silver Medals',
        count: 32,
        year: '1996'
      },
      {
        medalType: 'Silver Medals',
        count: 24,
        year: '2000'
      },
      {
        medalType: 'Silver Medals',
        count: 40,
        year: '2004'
      },
      {
        medalType: 'Silver Medals',
        count: 38,
        year: '2008'
      },
      {
        medalType: 'Silver Medals',
        count: 29,
        year: '2012'
      },
      {
        medalType: 'Bronze Medals',
        count: 17,
        year: '1952'
      },
      {
        medalType: 'Bronze Medals',
        count: 17,
        year: '1956'
      },
      {
        medalType: 'Bronze Medals',
        count: 16,
        year: '1960'
      },
      {
        medalType: 'Bronze Medals',
        count: 28,
        year: '1964'
      },
      {
        medalType: 'Bronze Medals',
        count: 34,
        year: '1968'
      },
      {
        medalType: 'Bronze Medals',
        count: 30,
        year: '1972'
      },
      {
        medalType: 'Bronze Medals',
        count: 25,
        year: '1976'
      },
      {
        medalType: 'Bronze Medals',
        count: null,
        year: '1980'
      },
      {
        medalType: 'Bronze Medals',
        count: 30,
        year: '1984'
      },
      {
        medalType: 'Bronze Medals',
        count: 27,
        year: '1988'
      },
      {
        medalType: 'Bronze Medals',
        count: 37,
        year: '1992'
      },
      {
        medalType: 'Bronze Medals',
        count: 25,
        year: '1996'
      },
      {
        medalType: 'Bronze Medals',
        count: 33,
        year: '2000'
      },
      {
        medalType: 'Bronze Medals',
        count: 26,
        year: '2004'
      },
      {
        medalType: 'Bronze Medals',
        count: 36,
        year: '2008'
      },
      {
        medalType: 'Bronze Medals',
        count: 29,
        year: '2012'
      }
    ]
  },
  xField: 'year',
  yField: 'count',
  seriesField: 'medalType',
  invalidType: 'link',
  axes: [
    {
      orient: 'bottom',
      tick: {
        tickCount: 5
      }
    }
  ]
};

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

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

Result Presentation

How to sort the labels on the x-axis of a combo chart?

TingLittleKang — Wed, 08 May 2024 07:35:23 +0000

Problem Description

In the following combined chart, the x-axis labels are not sorted by time. Can the sorting effect be achieved through sortDataByAxis?

Solution

The function of sortDataByAxis is to sort the data of the series along the axis without affecting the sorting of the axis itself. To display the content on the axis in the desired order, there are two solutions:

Configure the fields in the data to set the domain order of the data to be displayed:

Sort the data in advance according to the display order.

Code Examples

const spec = {
  type: 'common',
  seriesField: 'color',
  data: [
    {
      id: 'id0',
      fields: {
        x: {
          domain: ['2024-03-20', '2024-03-21', '2024-03-22', '2024-03-23', '2024-03-24', '2024-03-25', '2024-03-26'],
          sortIndex: 0
        }
      },
      values: [
        { x: '2024-03-21', type: '需求建议', y: 14 },
        { x: '2024-03-21', type: '功能缺陷', y: 27 },
        { x: '2024-03-21', type: '其他', y: 1 },
        { x: '2024-03-21', type: '操作咨询', y: 16 },
        { x: '2024-03-26', type: '功能缺陷', y: 26 },
        { x: '2024-03-26', type: '需求建议', y: 9 },
        { x: '2024-03-26', type: '操作咨询', y: 17 },
        { x: '2024-03-26', type: '其他', y: 1 },
        { x: '2024-03-25', type: '功能缺陷', y: 23 },
        { x: '2024-03-25', type: '操作咨询', y: 19 },
        { x: '2024-03-25', type: '需求建议', y: 11 },
        { x: '2024-03-22', type: '需求建议', y: 6 },
        { x: '2024-03-22', type: '功能缺陷', y: 22 },
        { x: '2024-03-22', type: '操作咨询', y: 14 },
        { x: '2024-03-22', type: '其他', y: 2 },
        { x: '2024-03-27', type: '功能缺陷', y: 16 },
        { x: '2024-03-27', type: '其他', y: 3 },
        { x: '2024-03-27', type: '需求建议', y: 8 },
        { x: '2024-03-27', type: '操作咨询', y: 8 },
        { x: '2024-03-23', type: '需求建议', y: 2 },
        { x: '2024-03-23', type: '功能缺陷', y: 2 },
        { x: '2024-03-20', type: '操作咨询', y: 2 },
        { x: '2024-03-20', type: '功能缺陷', y: 2 },
        { x: '2024-03-24', type: '需求建议', y: 1 }
      ]
    },
    {
      id: 'id1',
      fields: {
        x: {
          domain: ['2024-03-20', '2024-03-21', '2024-03-22', '2024-03-23', '2024-03-24', '2024-03-25', '2024-03-26'],
          sortIndex: 0
        }
      },
      values: [
        { x: '2024-03-21', type: '负面反馈比例', y: 55 },
        { x: '2024-03-26', type: '负面反馈比例', y: 57 },
        { x: '2024-03-25', type: '负面反馈比例', y: 62 },
        { x: '2024-03-22', type: '负面反馈比例', y: 63 },
        { x: '2024-03-27', type: '负面反馈比例', y: 57 },
        { x: '2024-03-23', type: '负面反馈比例', y: 75 },
        { x: '2024-03-20', type: '负面反馈比例', y: 75 },
        { x: '2024-03-24', type: '负面反馈比例', y: 100 }
      ]
    }
  ],
  stackSort: true,
  series: [
    {
      type: 'bar',
      id: 'bar',
      label: { visible: true },
      seriesField: 'type',
      dataIndex: 0,
      xField: 'x',
      yField: 'y',
      stack: true,
    },
    {
      type: 'line',
      id: 'line',
      dataIndex: 1,
      label: { visible: true },
      seriesField: 'type',
      xField: 'x',
      yField: 'y',
      stack: false,
    }
  ],
  axes: [
    { orient: 'left', seriesIndex: [0] },
    {
      orient: 'right',
      seriesId: ['line'],
      gird: { visible: false },
      min: 0,
      max: 100,
      title: { visible: true, text: '%', position: 'start' }
    },
    { orient: 'bottom', label: { visible: true }, type: 'band' }
  ],
  legends: { visible: true, orient: 'bottom' }
};

Result Presentation

How do I make the x-axis labels stick to the edge of the trend chart?

TingLittleKang — Wed, 08 May 2024 07:33:46 +0000

Problem Description

As shown in the figure, can the label on the leftmost side of the x-axis of the trend chart be aligned with the left border of the chart area, and the label on the rightmost side be aligned with the right border of the chart area?

Solution

When the axis type is band, you can eliminate the padding on the left and right sides by configuring trimPadding: true
The value of label.flush is true, which means the axis label is indented inward and does not exceed the axis range

Code Examples

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

Results Display

How to set different fill colors for different groups in a radar chart?

TingLittleKang — Wed, 08 May 2024 07:31:48 +0000

Question Description

As shown in the figure, the radar chart has multiple groups. Can different fill colors be set for different groups?

Solution

All VChart graphical elements support functional styles, which allow you to define custom functions to return different fill colors based on the data in the style.

Code Examples

const spec = {
  type: 'radar',
  data: [
    {
      values: [
        {
          month: 'Jan.',
          value: 45,
          type: 'A'
        },
        {
          month: 'Feb.',
          value: 61,
          type: 'A'
        },
        {
          month: 'Mar.',
          value: 92,
          type: 'A'
        },
        {
          month: 'Apr.',
          value: 57,
          type: 'A'
        },
        {
          month: 'May.',
          value: 46,
          type: 'A'
        },
        {
          month: 'Jun.',
          value: 36,
          type: 'A'
        },
        {
          month: 'Jul.',
          value: 33,
          type: 'A'
        },
        {
          month: 'Aug.',
          value: 63,
          type: 'A'
        },
        {
          month: 'Sep.',
          value: 57,
          type: 'A'
        },
        {
          month: 'Oct.',
          value: 53,
          type: 'A'
        },
        {
          month: 'Nov.',
          value: 69,
          type: 'A'
        },
        {
          month: 'Dec.',
          value: 40,
          type: 'A'
        },
        {
          month: 'Jan.',
          value: 31,
          type: 'B'
        },
        {
          month: 'Feb.',
          value: 39,
          type: 'B'
        },
        {
          month: 'Mar.',
          value: 81,
          type: 'B'
        },
        {
          month: 'Apr.',
          value: 39,
          type: 'B'
        },
        {
          month: 'May.',
          value: 64,
          type: 'B'
        },
        {
          month: 'Jun.',
          value: 21,
          type: 'B'
        },
        {
          month: 'Jul.',
          value: 58,
          type: 'B'
        },
        {
          month: 'Aug.',
          value: 72,
          type: 'B'
        },
        {
          month: 'Sep.',
          value: 47,
          type: 'B'
        },
        {
          month: 'Oct.',
          value: 37,
          type: 'B'
        },
        {
          month: 'Nov.',
          value: 80,
          type: 'B'
        },
        {
          month: 'Dec.',
          value: 74,
          type: 'B'
        },
        {
          month: 'Jan.',
          value: 90,
          type: 'C'
        },
        {
          month: 'Feb.',
          value: 95,
          type: 'C'
        },
        {
          month: 'Mar.',
          value: 62,
          type: 'C'
        },
        {
          month: 'Apr.',
          value: 52,
          type: 'C'
        },
        {
          month: 'May.',
          value: 74,
          type: 'C'
        },
        {
          month: 'Jun.',
          value: 87,
          type: 'C'
        },
        {
          month: 'Jul.',
          value: 80,
          type: 'C'
        },
        {
          month: 'Aug.',
          value: 69,
          type: 'C'
        },
        {
          month: 'Sep.',
          value: 74,
          type: 'C'
        },
        {
          month: 'Oct.',
          value: 84,
          type: 'C'
        },
        {
          month: 'Nov.',
          value: 94,
          type: 'C'
        },
        {
          month: 'Dec.',
          value: 23,
          type: 'C'
        }
      ]
    }
  ],
  categoryField: 'month',
  valueField: 'value',
  seriesField: 'type',
  area: {
    visible: true,
    style: {
      fill: (datum, ctx) => {
        return datum.type === 'A' ? ctx.seriesColor(datum.type): false;
      }
    }
  },
  axes: [
    {
      orient: 'radius',
      min: 0,
      domainLine: {
        visible: true
      },
      label: {
        visible: true
      },
      grid: {
        smooth: true
      }
    },
    {
      orient: 'angle',
      tick: {
        visible: false
      },
      grid: {
        style: {
          lineDash: [0]
        }
      }
    }
  ],
  legends: {
    visible: true,
    orient: 'top'
  }
};

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

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

Result Presentation

How to align bar chart labels to the left and keep their styles consistent in @visactor/vchart?

TingLittleKang — Fri, 26 Apr 2024 06:34:47 +0000

As shown in the figure, can the labels in the bar chart be aligned to the left? Why are the styles of the labels not exactly the same?

Solution

The position of the label can be configured through label.position. By default, the label of the bar chart is outside the graph, so it is not left-aligned. By setting label.position to inside-left, the left-alignment effect can be achieved.
When the label position of the bar chart is inside-left, smart inversion will be enabled, which may cause style inconsistencies. You can turn off smart inversion manually.

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: true,
    position: 'inside-left',
    smartInvert: false,
  }
};

Result Display

How to format axis labels in @visactor/vchart?

TingLittleKang — Fri, 26 Apr 2024 06:27:54 +0000

Question Description

As shown in the figure, when the axis label value is inaccurate with a very long decimal point, can it be formatted?

Solution

The problem of floating-point precision here is due to the addition operation of floating-point numbers when realizing the alignment of the axis scale. To improve the readability of axis labels, you can format the axis labels through label.formatMethod.

Code Example

const spec = {
  type: 'common',
  seriesField: 'color',
  data: [
    {
      id: 'id0',
      values: [
        { x: 'Monday', type: 'Breakfast', y: 0.1633 },
      ]
    },
    {
      id: 'id1',
      values: [
        { x: 'Monday', type: 'Drink', y: -0.3455 },
      ]
    }
  ],
  series: [
    {
      type: 'line',
      id: 'line',
      dataIndex: 0,
      label: { visible: true },
      seriesField: 'type',
      dataIndex: 0,
      xField: ['x', 'type'],
      yField: 'y'
    },
    {
      type: 'line',
      id: 'line',
      dataIndex: 1,
      label: { visible: true },
      seriesField: 'type',
      xField: 'x',
      yField: 'y',
      stack: false
    }
  ],
  axes: [
    { orient: 'left', seriesIndex: [0], id: 'left' },
    {
      orient: 'right',
      seriesId: ['line'],
      grid: { visible: false },
      label: {
        formatMethod: (label) => {
          return Math.round(label * 100) / 100;
        }
      },
      sync: {
        axisId: 'left',
        tickAlign: true
      }
    },
    { orient: 'bottom', label: { visible: true }, type: 'band' }
  ],
  legends: {
    visible: true,
    orient: 'bottom'
  }
};
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();
// Just for the convenience of console debugging, DO NOT COPY!  
window['vchart'] = vchart;

Result Display

How to sort data by specified fields in @visactor/vchart?

TingLittleKang — Fri, 26 Apr 2024 06:25:12 +0000

For the line chart below, can the time sorting only be done externally?

Solution

When configuring the data, sorting can be done based on fields. Field types are divided into discrete types and continuous types, and sorting order needs to be configured based on field types.

Code Example

const spec = {
  type: 'line',
  data: {
    values: [
      { date: '2023-01-01', type: 'Product A', value: 99.9 },
      { date: '2023-01-02', type: 'Product C', value: 93.4 },
      { date: '2023-01-01', type: 'Product B', value: 96.6 },
      { date: '2023-01-02', type: 'Product A', value: 96.7 },
      { date: '2023-01-02', type: 'Product B', value: 91.1 },
      { date: '2023-01-03', type: 'Product A', value: 100.2 },
      { date: '2023-01-03', type: 'Product B', value: 99.4 },
      { date: '2023-01-03', type: 'Product C', value: 91.7 },
      { date: '2023-01-04', type: 'Product A', value: 104.7 },
      { date: '2023-01-05', type: 'Product B', value: 96 },
      { date: '2023-01-05', type: 'Product C', value: 92.3 },
      { date: '2023-01-06', type: 'Product A', value: 95.6 },
      { date: '2023-01-06', type: 'Product B', value: 89.1 },
      { date: '2023-01-09', type: 'Product B', value: 100.6},
      { date: '2023-01-09', type: 'Product C', value: 103.8},
      { date: '2023-01-04', type: 'Product C', value: 93.1 },
      { date: '2023-01-04', type: 'Product B', value: 108.1 },
      { date: '2023-01-07', type: 'Product A', value: 95.3 },
      { date: '2023-01-07', type: 'Product B', value: 89.2 },
      { date: '2023-01-07', type: 'Product C', value: 95.7 },
      { date: '2023-01-08', type: 'Product A', value: 96.1 },
      { date: '2023-01-08', type: 'Product B', value: 97.6 },
      { date: '2023-01-09', type: 'Product A', value: 96.1 },
      { date: '2023-01-10', type: 'Product A', value: 101.6 },
      { date: '2023-01-10', type: 'Product B', value: 108.3 },
      { date: '2023-01-10', type: 'Product C', value: 108.9 }
    ],
    fields: {
      date: {
        type: 'ordinal', // 数据维度 date 的类型是离散类型
        sortIndex: 1 // 数据会按照 date 进行排序
      },
    }
  },
  xField: 'date',
  yField: 'value',
  seriesField: 'type',
  point: {
    visible: false
  },
  line: {
    style: {
      lineWidth: 2
    }
  },
  legends: { visible: true },
  axes: [
    {
      orient: 'bottom',
      // paddingInner: 1,
      // paddingOuter: 0,
      trimPadding: true
    }
  ]
};

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

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

DEV Community: TingLittleKang

How to achieve line break effect for pie chart labels in @visactor/vchart?

Solution

Code Examples

Result Presentation

Related documents

How to limit the number of lines in Tooltip?

Problem description

Solution

Code Examples

Result Display

Related documents

How to bind the click event of the pie chart label in @visactor/vchart?

Problem Description

Solution

Code Examples

Related documents

How to set the maximum number of X-axis and Y-axis labels?

Problem Description

Solution

Code Examples

Result Presentation

Related Documents

How to sort the labels on the x-axis of a combo chart?

Problem Description

Solution

Code Examples

Result Presentation

Related documents

How do I make the x-axis labels stick to the edge of the trend chart?

Problem Description

Solution

Code Examples

Results Display

Related Documents

How to set different fill colors for different groups in a radar chart?

Question Description

Solution

Code Examples

Result Presentation

Related Documents

How to align bar chart labels to the left and keep their styles consistent in @visactor/vchart?

Solution

Code Example

Result Display

Related Documentation

How to format axis labels in @visactor/vchart?

Question Description

Solution

Code Example

Result Display

Related Documentation

How to sort data by specified fields in @visactor/vchart?

Solution

Code Example

Results

Related documents