Title

How to solve the problem of the line chart for a stacked line chart and a bidirectional bar chart combination being partially crossed?
Description

After combining a stacked line chart and a bidirectional bar chart, I found that the line chart is partially forked, as shown in the figure below. How can I solve this problem?
Solution

This problem is caused by the fact that the line chart does not sort the data according to the order of the axis by default, but draws it according to the order of the data in the array. Here, you can turn on the sortDataByAxis switch to sort the data according to the order of the axis, and the drawing will be normal.
Code Example


const barMockData = [
  { groupName: 'a', name: 'a_修复', type: 'fixedIssuesObj', time: '2023-09-24', value: 0 },
  { groupName: 'a', name: 'a_新增', type: 'newIssuesObj', time: '2023-09-24', value: 0 },
  { groupName: 'a', name: 'a_修复', type: 'fixedIssuesObj', time: '2023-09-25', value: 209 },
  { groupName: 'a', name: 'a_新增', type: 'newIssuesObj', time: '2023-09-25', value: 0 },
  { groupName: 'a', name: 'a_修复', type: 'fixedIssuesObj', time: '2023-09-26', value: 104 },
  { groupName: 'a', name: 'a_新增', type: 'newIssuesObj', time: '2023-09-26', value: -3 },
  { groupName: 'a', name: 'a_修复', type: 'fixedIssuesObj', time: '2023-09-27', value: 61 },
  { groupName: 'a', name: 'a_新增', type: 'newIssuesObj', time: '2023-09-27', value: -1 },
  { groupName: 'b', name: 'b_修复', type: 'fixedIssuesObj', time: '2023-09-24', value: 0 },
  { groupName: 'b', name: 'b_新增', type: 'newIssuesObj', time: '2023-09-24', value: 0 },
  { groupName: 'b', name: 'b_修复', type: 'fixedIssuesObj', time: '2023-09-25', value: 4 },
  { groupName: 'b', name: 'b_新增', type: 'newIssuesObj', time: '2023-09-25', value: -4 },
  { groupName: 'b', name: 'b_修复', type: 'fixedIssuesObj', time: '2023-09-26', value: 3 },
  { groupName: 'b', name: 'b_新增', type: 'newIssuesObj', time: '2023-09-26', value: -7 },
  { groupName: 'b', name: 'b_修复', type: 'fixedIssuesObj', time: '2023-09-27', value: 4 },
  { groupName: 'b', name: 'b_新增', type: 'newIssuesObj', time: '2023-09-27', value: -8 },
  { groupName: 'c', name: 'c_修复', type: 'fixedIssuesObj', time: '2023-09-24', value: 1 },
  { groupName: 'c', name: 'c_新增', type: 'newIssuesObj', time: '2023-09-24', value: -1 },
  { groupName: 'c', name: 'c_修复', type: 'fixedIssuesObj', time: '2023-09-25', value: 1 },
  { groupName: 'c', name: 'c_新增', type: 'newIssuesObj', time: '2023-09-25', value: -1 },
  { groupName: 'c', name: 'c_修复', type: 'fixedIssuesObj', time: '2023-09-26', value: 1 },
  { groupName: 'c', name: 'c_新增', type: 'newIssuesObj', time: '2023-09-26', value: -1 },
  { groupName: 'c', name: 'c_修复', type: 'fixedIssuesObj', time: '2023-09-27', value: 0 },
  { groupName: 'c', name: 'c_新增', type: 'newIssuesObj', time: '2023-09-27', value: -5 },
  { groupName: 'd', name: 'd_修复', type: 'fixedIssuesObj', time: '2023-09-24', value: 0 },
  { groupName: 'd', name: 'd_新增', type: 'newIssuesObj', time: '2023-09-24', value: 0 },
  { groupName: 'd', name: 'd_修复', type: 'fixedIssuesObj', time: '2023-09-25', value: 177 },
  { groupName: 'd', name: 'd_新增', type: 'newIssuesObj', time: '2023-09-25', value: -1 },
  { groupName: 'd', name: 'd_修复', type: 'fixedIssuesObj', time: '2023-09-26', value: 72 },
  { groupName: 'd', name: 'd_新增', type: 'newIssuesObj', time: '2023-09-26', value: -30 },
  { groupName: 'd', name: 'd_修复', type: 'fixedIssuesObj', time: '2023-09-27', value: 127 },
  { groupName: 'd', name: 'd_新增', type: 'newIssuesObj', time: '2023-09-27', value: -9 },
  { groupName: 'e', name: 'e_修复', type: 'fixedIssuesObj', time: '2023-09-24', value: 0 },
  { groupName: 'e', name: 'e_新增', type: 'newIssuesObj', time: '2023-09-24', value: 0 },
  { groupName: 'e', name: 'e_修复', type: 'fixedIssuesObj', time: '2023-09-25', value: 48 },
  { groupName: 'e', name: 'e_新增', type: 'newIssuesObj', time: '2023-09-25', value: -4 },
  { groupName: 'e', name: 'e_修复', type: 'fixedIssuesObj', time: '2023-09-26', value: 333 },
  { groupName: 'e', name: 'e_新增', type: 'newIssuesObj', time: '2023-09-26', value: -1 },
  { groupName: 'e', name: 'e_修复', type: 'fixedIssuesObj', time: '2023-09-27', value: 26 },
  { groupName: 'e', name: 'e_新增', type: 'newIssuesObj', time: '2023-09-27', value: -3 },
  { groupName: 'f', name: 'f_修复', type: 'fixedIssuesObj', time: '2023-09-24', value: 0 },
  { groupName: 'f', name: 'f_新增', type: 'newIssuesObj', time: '2023-09-24', value: 0 },
  { groupName: 'f', name: 'f_修复', type: 'fixedIssuesObj', time: '2023-09-25', value: 57 },
  { groupName: 'f', name: 'f_新增', type: 'newIssuesObj', time: '2023-09-25', value: -3 },
  { groupName: 'f', name: 'f_修复', type: 'fixedIssuesObj', time: '2023-09-26', value: 1 },
  { groupName: 'f', name: 'f_新增', type: 'newIssuesObj', time: '2023-09-26', value: -11 },
  { groupName: 'f', name: 'f_修复', type: 'fixedIssuesObj', time: '2023-09-27', value: 43 },
  { groupName: 'f', name: 'f_新增', type: 'newIssuesObj', time: '2023-09-27', value: 0 }
];
const mockData = [
  { value: 2360, name: 'a', date: '2023-09-23' },
  { value: 3829, name: 'b', date: '2023-09-23' },
  { value: 1102, name: 'c', date: '2023-09-23' },
  { value: 4856, name: 'd', date: '2023-09-23' },
  { value: 5039, name: 'e', date: '2023-09-23' },
  { value: 2180, name: 'f', date: '2023-09-23' },
  { value: 2360, name: 'a', date: '2023-09-24' },
  { value: 3829, name: 'b', date: '2023-09-24' },
  { value: 1102, name: 'c', date: '2023-09-24' },
  { value: 4856, name: 'd', date: '2023-09-24' },
  { value: 5039, name: 'e', date: '2023-09-24' },
  { value: 2180, name: 'f', date: '2023-09-24' },
  { value: 2140, name: 'a', date: '2023-09-25' },
  { value: 3829, name: 'b', date: '2023-09-25' },
  { value: 1102, name: 'c', date: '2023-09-25' },
  { value: 4670, name: 'd', date: '2023-09-25' },
  { value: 4990, name: 'e', date: '2023-09-25' },
  { value: 2123, name: 'f', date: '2023-09-25' },
  { value: 2028, name: 'a', date: '2023-09-26' },
  { value: 3833, name: 'b', date: '2023-09-26' },
  { value: 1102, name: 'c', date: '2023-09-26' },
  { value: 4621, name: 'd', date: '2023-09-26' },
  { value: 4644, name: 'e', date: '2023-09-26' },
  { value: 2133, name: 'f', date: '2023-09-26' },
  { value: 1967, name: 'a', date: '2023-09-27' },
  { value: 3837, name: 'b', date: '2023-09-27' },
  { value: 1107, name: 'c', date: '2023-09-27' },
  { value: 4498, name: 'd', date: '2023-09-27' },
  { value: 4622, name: 'e', date: '2023-09-27' },
  { value: 2087, name: 'f', date: '2023-09-27' },
  { value: 1911, name: 'a', date: '2023-09-28' },
  { value: 3838, name: 'b', date: '2023-09-28' },
  { value: 1106, name: 'c', date: '2023-09-28' },
  { value: 4042, name: 'd', date: '2023-09-28' },
  { value: 4617, name: 'e', date: '2023-09-28' },
  { value: 2087, name: 'f', date: '2023-09-28' }
];
const spec = {
  type: 'common',
  bar: { state: { hover: { style: { fillOpacity: 0.5 } } }, style: { cursor: 'pointer' } },
  title: {
    visible: true,
    align: 'left',
    verticalAlign: 'top',
    orient: 'top',
    innerPadding: { bottom: 10 },
    text: '每日问题详情',
    subtext: '左Y轴正数为修复数，负数为新增数（可点击柱体查看详情）。右轴为每日总问题数'
  },
  data: [
    { id: 'barData', values: barMockData },
    { id: 'id1', values: mockData }
  ],
  series: [
    {
      type: 'bar',
      id: 'bar',
      dataIndex: 0,
      seriesField: 'name',
      xField: ['time', 'groupName'],
      yField: 'value'
    },
    {
      type: 'line',
      id: 'line',
      dataIndex: 1,
      xField: 'date',
      yField: 'value',
      seriesField: 'name',
      stack: true,
      sortDataByAxis: true
    }
  ],
  axes: [
    { orient: 'left', id: 'bar', seriesId: ['bar'], tick: { tickCount: 6 }, nice: true },
    {
      orient: 'right',
      seriesId: ['line'],
      sync: { axisId: 'bar', tickAlign: true },
      gird: { visible: false },
      nice: true
    },
    { orient: 'bottom', domainLine: { onZero: true } }
  ],
  legends: { visible: true, padding: { top: '2%', right: '10%' } },
  tooltip: {
    mark: {
      content: [
        {
          key: (datum) => datum?.name,
          value: (datum) => (datum?.value < 0 ? 0 - datum?.value : datum?.value)
        }
      ]
    },
    dimension: {
      content: [
        {
          key: (datum) => datum?.name,
          value: (datum) => (datum?.value < 0 ? 0 - datum?.value : datum?.value)
        }
      ]
    }
  }
};
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderAsync();
// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;
Blog

How to solve the problem of the line chart being partially crossed?

Melon

Title

Description

Solution

Code Example

Result

Related documentation

Join Our Newsletter. No Spam, Only the good stuff.

Related
