Multiple panes in Vue Chart component

13 Jun 202424 minutes to read

Chart area can be divided into multiple panes using rows and columns.

Rows

To split the chart area vertically into number of rows, use rows property of the chart.

  • You can allocate space for each row by using the height property. The value can be either in percentage or in pixel.
  • To associate a vertical axis to a particular row, specify its index to
    rowIndex property of the axis.
  • To customize each row’s bottom line, use border property.
<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :axes='axes'
      :rows='rows'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Column' xName='x' yName='y' name='Germany'> </e-series>
        <e-series :dataSource='seriesData' type='Line' xName='x' yName='y1' yAxisName='yAxis' name='Japan'
          :marker='marker'> </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, ColumnSeries, LineSeries, Category } from "@syncfusion/ej2-vue-charts";

const seriesData = [
  { x: 'Jan', y: 15, y1: 33 }, { x: 'Feb', y: 20, y1: 31 }, { x: 'Mar', y: 35, y1: 30 },
  { x: 'Apr', y: 40, y1: 28 }, { x: 'May', y: 80, y1: 29 }, { x: 'Jun', y: 70, y1: 30 },
  { x: 'Jul', y: 65, y1: 33 }, { x: 'Aug', y: 55, y1: 32 }, { x: 'Sep', y: 50, y1: 34 },
  { x: 'Oct', y: 30, y1: 32 }, { x: 'Nov', y: 35, y1: 32 }, { x: 'Dec', y: 35, y1: 31 }
];
const primaryXAxis = {
  title: 'Months',
  valueType: 'Category',
  interval: 1
};
const primaryYAxis = {
  minimum: 0, maximum: 90, interval: 20,
  lineStyle: { width: 0 },
  title: 'Temperature (Fahrenheit)',
  labelFormat: '{value}°F'
};
const axes =
  [
    {
      majorGridLines: { width: 0 },
      rowIndex: 1, opposedPosition: true,
      lineStyle: { width: 0 },
      minimum: 24, maximum: 36, interval: 4,
      name: 'yAxis', title: 'Temperature (Celsius)',
      labelFormat: '{value}°C'
    }
  ];
const rows = [
  {
    height: '50%'
  }, {
    height: '50%'
  }
];
const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
const title = "Weather Condition";

provide('chart', [ColumnSeries, LineSeries, Category]);
</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :axes='axes'
      :rows='rows'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Column' xName='x' yName='y' name='Germany'> </e-series>
        <e-series :dataSource='seriesData' type='Line' xName='x' yName='y1' yAxisName='yAxis' name='Japan'
          :marker='marker'> </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, LineSeries, Category } from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",
  components: {
    "ejs-chart": ChartComponent,
    "e-series-collection": SeriesCollectionDirective,
    "e-series": SeriesDirective
  },
  data() {
    return {
      seriesData: [
        { x: 'Jan', y: 15, y1: 33 }, { x: 'Feb', y: 20, y1: 31 }, { x: 'Mar', y: 35, y1: 30 },
        { x: 'Apr', y: 40, y1: 28 }, { x: 'May', y: 80, y1: 29 }, { x: 'Jun', y: 70, y1: 30 },
        { x: 'Jul', y: 65, y1: 33 }, { x: 'Aug', y: 55, y1: 32 }, { x: 'Sep', y: 50, y1: 34 },
        { x: 'Oct', y: 30, y1: 32 }, { x: 'Nov', y: 35, y1: 32 }, { x: 'Dec', y: 35, y1: 31 }
      ],
      primaryXAxis: {
        title: 'Months',
        valueType: 'Category',
        interval: 1
      },
      primaryYAxis: {
        minimum: 0, maximum: 90, interval: 20,
        lineStyle: { width: 0 },
        title: 'Temperature (Fahrenheit)',
        labelFormat: '{value}°F'
      },
      axes:
        [
          {
            majorGridLines: { width: 0 },
            rowIndex: 1, opposedPosition: true,
            lineStyle: { width: 0 },
            minimum: 24, maximum: 36, interval: 4,
            name: 'yAxis', title: 'Temperature (Celsius)',
            labelFormat: '{value}°C'
          }
        ],
      rows: [
        {
          height: '50%'
        }, {
          height: '50%'
        }
      ],
      marker: { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } },
      title: "Weather Condition"
    };
  },
  provide: {
    chart: [ColumnSeries, LineSeries, Category]
  },
};
</script>
<style>
#container {
  height: 350px;
}
</style>

For spanning the vertical axis along multiple row, you can use span property of an axis.

<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :axes='axes'
      :rows='rows'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Column' xName='x' yName='y' name='Germany'> </e-series>
        <e-series :dataSource='seriesData' type='Line' xName='x' yName='y1' yAxisName='yAxis' name='Japan'
          :marker='marker'> </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, ColumnSeries, LineSeries, Category } from "@syncfusion/ej2-vue-charts";

const seriesData = [
  { x: 'Jan', y: 15, y1: 33 }, { x: 'Feb', y: 20, y1: 31 }, { x: 'Mar', y: 35, y1: 30 },
  { x: 'Apr', y: 40, y1: 28 }, { x: 'May', y: 80, y1: 29 }, { x: 'Jun', y: 70, y1: 30 },
  { x: 'Jul', y: 65, y1: 33 }, { x: 'Aug', y: 55, y1: 32 }, { x: 'Sep', y: 50, y1: 34 },
  { x: 'Oct', y: 30, y1: 32 }, { x: 'Nov', y: 35, y1: 32 }, { x: 'Dec', y: 35, y1: 31 }
];
const primaryXAxis = {
  title: 'Months',
  valueType: 'Category',
  interval: 1
};
const primaryYAxis = {
  minimum: 0, maximum: 90, interval: 10,
  lineStyle: { width: 0 },
  title: 'Temperature (Fahrenheit)',
  labelFormat: '{value}°F',
  //Span for chart axis
  span: 2
};
const axes =
  [
    {
      majorGridLines: { width: 0 },
      rowIndex: 1, opposedPosition: true,
      lineStyle: { width: 0 },
      minimum: 24, maximum: 36, interval: 2,
      name: 'yAxis', title: 'Temperature (Celsius)',
      labelFormat: '{value}°C'
    }
  ];
const rows = [
  {
    height: '50%'
  }, {
    height: '50%'
  }
];
const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
const title = "Weather Condition";

provide('chart', [ColumnSeries, LineSeries, Category]);
</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :axes='axes'
      :rows='rows'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Column' xName='x' yName='y' name='Germany'> </e-series>
        <e-series :dataSource='seriesData' type='Line' xName='x' yName='y1' yAxisName='yAxis' name='Japan'
          :marker='marker'> </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, LineSeries, Category } from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",
  components: {
    "ejs-chart": ChartComponent,
    "e-series-collection": SeriesCollectionDirective,
    "e-series": SeriesDirective
  },
  data() {
    return {
      seriesData: [
        { x: 'Jan', y: 15, y1: 33 }, { x: 'Feb', y: 20, y1: 31 }, { x: 'Mar', y: 35, y1: 30 },
        { x: 'Apr', y: 40, y1: 28 }, { x: 'May', y: 80, y1: 29 }, { x: 'Jun', y: 70, y1: 30 },
        { x: 'Jul', y: 65, y1: 33 }, { x: 'Aug', y: 55, y1: 32 }, { x: 'Sep', y: 50, y1: 34 },
        { x: 'Oct', y: 30, y1: 32 }, { x: 'Nov', y: 35, y1: 32 }, { x: 'Dec', y: 35, y1: 31 }
      ],
      primaryXAxis: {
        title: 'Months',
        valueType: 'Category',
        interval: 1
      },
      primaryYAxis: {
        minimum: 0, maximum: 90, interval: 10,
        lineStyle: { width: 0 },
        title: 'Temperature (Fahrenheit)',
        labelFormat: '{value}°F',
        //Span for chart axis
        span: 2
      },
      axes:
        [
          {
            majorGridLines: { width: 0 },
            rowIndex: 1, opposedPosition: true,
            lineStyle: { width: 0 },
            minimum: 24, maximum: 36, interval: 2,
            name: 'yAxis', title: 'Temperature (Celsius)',
            labelFormat: '{value}°C'
          }
        ],
      rows: [
        {
          height: '50%'
        }, {
          height: '50%'
        }
      ],
      marker: { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } },
      title: "Weather Condition"
    };
  },
  provide: {
    chart: [ColumnSeries, LineSeries, Category]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Columns

To split the chart area horizontally into number of columns, use columns property of the chart.

  • You can allocate space for each column by using the width property. The given width can be either in percentage or in pixel.

  • To associate a horizontal axis to a particular column, specify its index to

columnIndex property of the axis.

  • To customize each column’s bottom line, use border

property.

<template>
    <div id="app">
        <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :axes='axes'
            :columns='columns'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='Column' xName='x' yName='y' name='Germany'> </e-series>
                <e-series :dataSource='seriesData' type='Line' xName='x' yName='y1' xAxisName='xAxis' name='Japan'
                    :marker='marker'> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, ColumnSeries, LineSeries, Category } from "@syncfusion/ej2-vue-charts";

const seriesData = [
    { x: 'Jan', y: 15, y1: 33 }, { x: 'Feb', y: 20, y1: 31 }, { x: 'Mar', y: 35, y1: 30 },
    { x: 'Apr', y: 40, y1: 28 }, { x: 'May', y: 80, y1: 29 }, { x: 'Jun', y: 70, y1: 30 },
    { x: 'Jul', y: 65, y1: 33 }, { x: 'Aug', y: 55, y1: 32 }, { x: 'Sep', y: 50, y1: 34 },
    { x: 'Oct', y: 30, y1: 32 }, { x: 'Nov', y: 35, y1: 32 }, { x: 'Dec', y: 35, y1: 31 }
];
const primaryXAxis = {
    title: 'Months',
    valueType: 'Category',
    interval: 1
};
const primaryYAxis = {
    minimum: 0, maximum: 90, interval: 20,
    lineStyle: { width: 0 },
    title: 'Temperature (Fahrenheit)',
    labelFormat: '{value}°F'
};
const columns = [
    {
        width: '50%'
    }, {
        width: '50%'
    }
];
const axes = [
    {
        majorGridLines: { width: 0 },
        columnIndex: 1,
        valueType: 'Category',
        lineStyle: { width: 0 },
        name: 'xAxis'
    }
];
const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
const title = "Weather Condition";

provide('chart', [ColumnSeries, LineSeries, Category]);
</script>
<style>
#container {
    height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :axes='axes'
      :columns='columns'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Column' xName='x' yName='y' name='Germany'> </e-series>
        <e-series :dataSource='seriesData' type='Line' xName='x' yName='y1' xAxisName='xAxis' name='Japan'
          :marker='marker'> </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, LineSeries, Category } from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",
  components: {
    "ejs-chart": ChartComponent,
    "e-series-collection": SeriesCollectionDirective,
    "e-series": SeriesDirective
  },
  data() {
    return {
      seriesData: [
        { x: 'Jan', y: 15, y1: 33 }, { x: 'Feb', y: 20, y1: 31 }, { x: 'Mar', y: 35, y1: 30 },
        { x: 'Apr', y: 40, y1: 28 }, { x: 'May', y: 80, y1: 29 }, { x: 'Jun', y: 70, y1: 30 },
        { x: 'Jul', y: 65, y1: 33 }, { x: 'Aug', y: 55, y1: 32 }, { x: 'Sep', y: 50, y1: 34 },
        { x: 'Oct', y: 30, y1: 32 }, { x: 'Nov', y: 35, y1: 32 }, { x: 'Dec', y: 35, y1: 31 }
      ],
      primaryXAxis: {
        title: 'Months',
        valueType: 'Category',
        interval: 1
      },
      primaryYAxis: {
        minimum: 0, maximum: 90, interval: 20,
        lineStyle: { width: 0 },
        title: 'Temperature (Fahrenheit)',
        labelFormat: '{value}°F'
      },
      columns: [
        {
          width: '50%'
        }, {
          width: '50%'
        }
      ],
      axes: [
        {
          majorGridLines: { width: 0 },
          columnIndex: 1,
          valueType: 'Category',
          lineStyle: { width: 0 },
          name: 'xAxis'
        }
      ],
      marker: { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } },
      title: "Weather Condition"
    };
  },
  provide: {
    chart: [ColumnSeries, LineSeries, Category]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

For spanning the horizontal axis along multiple column, you can use span property of an axis.

<template>
    <div id="app">
        <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :axes='axes'
            :columns='columns'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='Column' xName='x' yName='y' name='Germany'> </e-series>
                <e-series :dataSource='seriesData' type='Line' xName='x' yName='y1' xAxisName='xAxis' name='Japan'
                    :marker='marker'> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, ColumnSeries, LineSeries, Category } from "@syncfusion/ej2-vue-charts";

const seriesData = [
    { x: 'Jan', y: 15, y1: 33 }, { x: 'Feb', y: 20, y1: 31 }, { x: 'Mar', y: 35, y1: 30 },
    { x: 'Apr', y: 40, y1: 28 }, { x: 'May', y: 80, y1: 29 }, { x: 'Jun', y: 70, y1: 30 },
    { x: 'Jul', y: 65, y1: 33 }, { x: 'Aug', y: 55, y1: 32 }, { x: 'Sep', y: 50, y1: 34 },
    { x: 'Oct', y: 30, y1: 32 }, { x: 'Nov', y: 35, y1: 32 }, { x: 'Dec', y: 35, y1: 31 }
];
const primaryXAxis = {
    title: 'Months',
    valueType: 'Category',
    interval: 1,
    span: 2
};
const primaryYAxis = {
    minimum: 0, maximum: 90, interval: 20,
    lineStyle: { width: 0 },
    title: 'Temperature (Fahrenheit)',
    labelFormat: '{value}°F'
};
const columns = [
    {
        width: '50%'
    }, {
        width: '50%'
    }
];
const axes = [
    {
        majorGridLines: { width: 0 },
        columnIndex: 1,
        valueType: 'Category',
        lineStyle: { width: 0 },
        name: 'xAxis'
    }
];
const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
const title = "Weather Condition";

provide('chart', [ColumnSeries, LineSeries, Category]);
</script>
<style>
#container {
    height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :axes='axes'
      :columns='columns'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Column' xName='x' yName='y' name='Germany'> </e-series>
        <e-series :dataSource='seriesData' type='Line' xName='x' yName='y1' xAxisName='xAxis' name='Japan'
          :marker='marker'> </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, LineSeries, Category } from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",
  components: {
    "ejs-chart": ChartComponent,
    "e-series-collection": SeriesCollectionDirective,
    "e-series": SeriesDirective
  },
  data() {
    return {
      seriesData: [
        { x: 'Jan', y: 15, y1: 33 }, { x: 'Feb', y: 20, y1: 31 }, { x: 'Mar', y: 35, y1: 30 },
        { x: 'Apr', y: 40, y1: 28 }, { x: 'May', y: 80, y1: 29 }, { x: 'Jun', y: 70, y1: 30 },
        { x: 'Jul', y: 65, y1: 33 }, { x: 'Aug', y: 55, y1: 32 }, { x: 'Sep', y: 50, y1: 34 },
        { x: 'Oct', y: 30, y1: 32 }, { x: 'Nov', y: 35, y1: 32 }, { x: 'Dec', y: 35, y1: 31 }
      ],
      primaryXAxis: {
        title: 'Months',
        valueType: 'Category',
        interval: 1,
        span: 2
      },
      primaryYAxis: {
        minimum: 0, maximum: 90, interval: 20,
        lineStyle: { width: 0 },
        title: 'Temperature (Fahrenheit)',
        labelFormat: '{value}°F'
      },
      columns: [
        {
          width: '50%'
        }, {
          width: '50%'
        }
      ],
      axes: [
        {
          majorGridLines: { width: 0 },
          columnIndex: 1,
          valueType: 'Category',
          lineStyle: { width: 0 },
          name: 'xAxis'
        }
      ],
      marker: { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } },
      title: "Weather Condition"
    };
  },
  provide: {
    chart: [ColumnSeries, LineSeries, Category]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>