VisActor VBI
  • English

      • DualAxis

      Basic DualAxis

      A dual-axis chart combining two different chart types or scales.

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
    chartType: 'dualAxis',
    dataset: [
      {
        date: '2019',
        profit: 20,
        sales: 100,
      },
      {
        date: '2020',
        profit: 30,
        sales: 600,
      },
      {
        date: '2021',
        profit: 30,
        sales: 600,
      },
      {
        date: '2022',
        profit: 50,
        sales: 500,
      },
      {
        date: '2023',
        profit: 10,
        sales: 800,
      },
    ],
    measures: [
      {
        id: 'sales',
        alias: 'Sales',
      },
      {
        id: 'profit',
        alias: 'Profit',
      },
    ],
  }

  return <VSeedRender vseed={vseedConfig} />
}

      Default Dual Axis Chart

      Default Dual Axis Chart

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
    chartType: 'dualAxis',
    measures: [
      {
        id: 'sales',
        alias: 'Sales',
      },
      {
        id: 'profit',
        alias: 'Profit',
      },
    ],
    dataset: [
      {
        date: '2019',
        profit: 10,
        sales: 200,
      },
      {
        date: '2020',
        profit: 30,
        sales: 600,
      },
      {
        date: '2021',
        profit: 30,
        sales: 600,
      },
      {
        date: '2022',
        profit: 50,
        sales: 1000,
      },
      {
        date: '2023',
        profit: 40,
        sales: 800,
      },
    ],
  }

  return <VSeedRender vseed={vseedConfig} />
}

      Dual Axis Chart

      Dual Axis Chart

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
    chartType: 'dualAxis',
    measures: [
      {
        id: 'sales',
        alias: 'Sales',
        encoding: 'primaryYAxis',
      },
      {
        id: 'profit',
        alias: 'Profit',
        encoding: 'secondaryYAxis',
      },
    ],
    dataset: [
      {
        date: '2019',
        profit: 10,
        sales: 200,
      },
      {
        date: '2020',
        profit: 30,
        sales: 600,
      },
      {
        date: '2021',
        profit: 30,
        sales: 600,
      },
      {
        date: '2022',
        profit: 50,
        sales: 1000,
      },
      {
        date: '2023',
        profit: 40,
        sales: 800,
      },
    ],
  }

  return <VSeedRender vseed={vseedConfig} />
}

      Combined Dual Axis Chart

      Combined Dual Axis Chart

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
    chartType: 'dualAxis',
    measures: [
      {
        id: 'profit',
        alias: 'Profit',
        encoding: 'primaryYAxis',
        parentId: 'first',
      },
      {
        id: 'sales',
        alias: 'Sales',
        encoding: 'secondaryYAxis',
        parentId: 'first',
      },
      {
        id: 'ratio',
        alias: 'Ratio',
        encoding: 'primaryYAxis',
        parentId: 'second',
      },
      {
        id: 'returnRatio',
        alias: 'Return Rate',
        encoding: 'secondaryYAxis',
        parentId: 'second',
      },
    ],
    dataset: [
      {
        date: '2019',
        profit: 10,
        sales: 100,
        ratio: 301,
        returnRatio: 301,
      },
      {
        date: '2020',
        profit: 30,
        sales: 3200,
        ratio: 32,
        returnRatio: 30,
      },
      {
        date: '2021',
        profit: 30,
        sales: 300,
        ratio: 103,
        returnRatio: 503,
      },
      {
        date: '2022',
        profit: 50,
        sales: 2400,
        ratio: 30,
        returnRatio: 24,
      },
      {
        date: '2023',
        profit: 40,
        sales: 500,
        ratio: 305,
        returnRatio: 305,
      },
    ],
    dimensions: [
      {
        id: 'date',
        alias: 'Date',
      },
    ],
  }

  return <VSeedRender vseed={vseedConfig} />
}

      Pivot Combined Dual Axis Chart

      Pivot Combined Dual Axis Chart

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
    chartType: 'dualAxis',
    dimensions: [
      {
        id: 'date',
        alias: 'Date',
      },
      {
        id: 'type',
        alias: 'Type',
        encoding: 'row',
      },
      {
        id: 'test',
        alias: 'Tests',
        encoding: 'column',
      },
    ],
    dataset: [
      {
        date: '2019',
        type: 'A',
        test: 'TEST-A',
        profit: 10,
        sales: 100,
        ratio: 1,
        returnRatio: 301,
      },
      {
        date: '2020',
        type: 'A',
        test: 'TEST-A',
        profit: 30,
        sales: 3200,
        ratio: 2,
        returnRatio: 30,
      },
      {
        date: '2021',
        type: 'A',
        test: 'TEST-A',
        profit: 30,
        sales: 300,
        ratio: 3,
        returnRatio: 303,
      },
      {
        date: '2022',
        type: 'A',
        test: 'TEST-A',
        profit: 50,
        sales: 2400,
        ratio: 4,
        returnRatio: 34,
      },
      {
        date: '2023',
        type: 'A',
        test: 'TEST-A',
        profit: 40,
        sales: 500,
        ratio: 5,
        returnRatio: 305,
      },
      {
        date: '2019',
        type: 'A',
        test: 'TEST-D',
        profit: 10,
        sales: 100,
        ratio: 5,
        returnRatio: 30,
      },
      {
        date: '2020',
        type: 'A',
        test: 'TEST-D',
        profit: 30,
        sales: 3200,
        ratio: 4,
        returnRatio: 302,
      },
      {
        date: '2021',
        type: 'A',
        test: 'TEST-D',
        profit: 30,
        sales: 300,
        ratio: 3,
        returnRatio: 30,
      },
      {
        date: '2022',
        type: 'A',
        test: 'TEST-D',
        profit: 50,
        sales: 2400,
        ratio: 2,
        returnRatio: 304,
      },
      {
        date: '2023',
        type: 'A',
        test: 'TEST-D',
        profit: 40,
        sales: 500,
        ratio: 1,
        returnRatio: 35,
      },
      {
        date: '2019',
        type: 'B',
        test: 'TEST-A',
        profit: 10,
        sales: 100,
        ratio: 11,
        returnRatio: 301,
      },
      {
        date: '2020',
        type: 'B',
        test: 'TEST-A',
        profit: 30,
        sales: 3200,
        ratio: 12,
        returnRatio: 30,
      },
      {
        date: '2021',
        type: 'B',
        test: 'TEST-A',
        profit: 30,
        sales: 300,
        ratio: 13,
        returnRatio: 303,
      },
      {
        date: '2022',
        type: 'B',
        test: 'TEST-A',
        profit: 50,
        sales: 2400,
        ratio: 14,
        returnRatio: 34,
      },
      {
        date: '2023',
        type: 'B',
        test: 'TEST-A',
        profit: 40,
        sales: 500,
        ratio: 15,
        returnRatio: 305,
      },
      {
        date: '2019',
        type: 'B',
        test: 'TEST-D',
        profit: 10,
        sales: 100,
        ratio: 51,
        returnRatio: 30,
      },
      {
        date: '2020',
        type: 'B',
        test: 'TEST-D',
        profit: 30,
        sales: 3200,
        ratio: 51,
        returnRatio: 32,
      },
      {
        date: '2021',
        type: 'B',
        test: 'TEST-D',
        profit: 30,
        sales: 300,
        ratio: 52,
        returnRatio: 303,
      },
      {
        date: '2022',
        type: 'B',
        test: 'TEST-D',
        profit: 50,
        sales: 2400,
        ratio: 5,
        returnRatio: 34,
      },
      {
        date: '2023',
        type: 'B',
        test: 'TEST-D',
        profit: 40,
        sales: 500,
        ratio: 1,
        returnRatio: 35,
      },
    ],
    measures: [
      {
        id: 'profit',
        alias: 'Profit',
        encoding: 'primaryYAxis',
        parentId: 'first',
      },
      {
        id: 'sales',
        alias: 'Sales',
        encoding: 'secondaryYAxis',
        parentId: 'first',
      },
      {
        id: 'ratio',
        alias: 'Ratio',
        encoding: 'primaryYAxis',
        parentId: 'second',
      },
      {
        id: 'returnRatio',
        alias: 'Return Rate',
        encoding: 'secondaryYAxis',
        parentId: 'second',
      },
    ],
  }

  return <VSeedRender vseed={vseedConfig} />
}

      Dual Axis Chart

      Dual Axis Chart

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
    chartType: 'dualAxis',
    dataset: [
      {
        date: '2019',
        profit: 20,
        sales: 100,
      },
      {
        date: '2020',
        profit: 30,
        sales: 600,
      },
      {
        date: '2021',
        profit: 30,
        sales: 600,
      },
      {
        date: '2022',
        profit: 50,
        sales: 500,
      },
      {
        date: '2023',
        profit: 10,
        sales: 800,
      },
    ],
    measures: [
      {
        id: 'sales',
        alias: 'Sales',
        encoding: 'primaryYAxis',
        chartType: 'area',
      },
      {
        id: 'profit',
        alias: 'Profit',
        encoding: 'secondaryYAxis',
        chartType: 'column',
      },
    ],
  }

  return <VSeedRender vseed={vseedConfig} />
}

      Combined Dual Axis Chart

      Combined Dual Axis Chart

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
    chartType: 'dualAxis',
    measures: [
      {
        id: 'profit',
        alias: 'Profit',
        encoding: 'primaryYAxis',
        parentId: 'first',
        chartType: 'area',
      },
      {
        id: 'sales',
        alias: 'Sales',
        encoding: 'secondaryYAxis',
        parentId: 'first',
        chartType: 'scatter',
      },
      {
        id: 'ratio',
        alias: 'Ratio',
        encoding: 'primaryYAxis',
        parentId: 'second',
        chartType: 'column',
      },
      {
        id: 'returnRatio',
        alias: 'Return Rate',
        encoding: 'secondaryYAxis',
        parentId: 'second',
        chartType: 'line',
      },
    ],
    dataset: [
      {
        date: '2019',
        profit: 10,
        sales: 100,
        ratio: 301,
        returnRatio: 301,
      },
      {
        date: '2020',
        profit: 30,
        sales: 3200,
        ratio: 32,
        returnRatio: 30,
      },
      {
        date: '2021',
        profit: 30,
        sales: 300,
        ratio: 103,
        returnRatio: 503,
      },
      {
        date: '2022',
        profit: 50,
        sales: 2400,
        ratio: 30,
        returnRatio: 24,
      },
      {
        date: '2023',
        profit: 40,
        sales: 500,
        ratio: 305,
        returnRatio: 305,
      },
    ],
    dimensions: [
      {
        id: 'date',
        alias: 'Date',
      },
    ],
  }

  return <VSeedRender vseed={vseedConfig} />
}

      primaryYAxis & secondaryYAxis

      primaryYAxis & secondaryYAxis

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
    chartType: 'dualAxis',
    primaryYAxis: [
      {
        title: {
          visible: true,
          titleText: 'Profit',
        },
      },
      {
        title: {
          visible: true,
          titleText: 'Ratio',
        },
      },
    ],
    secondaryYAxis: [
      {
        title: {
          visible: true,
          titleText: 'Sales',
        },
      },
      {
        title: {
          visible: true,
          titleText: 'Return Rate',
        },
      },
    ],
    measures: [
      {
        id: 'profit',
        alias: 'Profit',
        encoding: 'primaryYAxis',
        parentId: 'first',
      },
      {
        id: 'sales',
        alias: 'Sales',
        encoding: 'secondaryYAxis',
        parentId: 'first',
      },
      {
        id: 'ratio',
        alias: 'Ratio',
        encoding: 'primaryYAxis',
        parentId: 'second',
      },
      {
        id: 'returnRatio',
        alias: 'Return Rate',
        encoding: 'secondaryYAxis',
        parentId: 'second',
      },
    ],
    dataset: [
      {
        date: '2019',
        profit: 10,
        sales: 100,
        ratio: 301,
        returnRatio: 301,
      },
      {
        date: '2020',
        profit: 30,
        sales: 3200,
        ratio: 32,
        returnRatio: 30,
      },
      {
        date: '2021',
        profit: 30,
        sales: 300,
        ratio: 103,
        returnRatio: 503,
      },
      {
        date: '2022',
        profit: 50,
        sales: 2400,
        ratio: 30,
        returnRatio: 24,
      },
      {
        date: '2023',
        profit: 40,
        sales: 500,
        ratio: 305,
        returnRatio: 305,
      },
    ],
    dimensions: [
      {
        id: 'date',
        alias: 'Date',
      },
    ],
  }

  return <VSeedRender vseed={vseedConfig} />
}