Legend in Vue Stock chart component

13 Jun 202424 minutes to read

Legend provides information about the series rendered in the Stock Chart which can be customized using legend properties. Legend can be added to a Stock Chart by enabling the visible option in the legendSettings.

Position and Alignment

By using the position property, legend can be placed at Left, Right, Top, Bottom or Custom of the Stock Chart. The legend is positioned at the bottom of the Stock Chart, by default.

Composition API (~/src/App.vue)

<template>
  <div class="control-section">
    <div>
      <ejs-stockchart id="stockchartcontainer" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis"
        :tooltip="tooltip" :legendSettings="legendSettings" :indicatorType="indicatorType"
        :trendlineType="trendlineType" :crosshair="crosshair" :title="title">
        <e-stockchart-series-collection>
          <e-stockchart-series :dataSource="seriesData" type="Candle" volume='volume' xName='date' low='low' high='high'
            open='open' close='close' name='AAPL'></e-stockchart-series>
        </e-stockchart-series-collection>
      </ejs-stockchart>
    </div>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { chartData } from "./datasource.js";
import {
  StockChartComponent as EjsStockchart, StockChartSeriesCollectionDirective as EStockchartSeriesCollection, StockChartSeriesDirective as EStockchartSeries, DateTime, CandleSeries, RangeTooltip, LineSeries, SplineSeries,
  HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, Tooltip,
  Crosshair, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend
} from "@syncfusion/ej2-vue-charts";


const seriesData = chartData;
const trendlineType = [];
const indicatorType = [];
const primaryXAxis = {
  valueType: "DateTime",
  majorGridLines: { color: "transparent" },
};
const primaryYAxis = {
  majorTickLines: { color: "transparent", width: 0 }
};
const crosshair = {
  enable: true,
};
const tooltip = { enable: true };
const legendSettings = {
  visible: true,
  //Legend position as top
  position: 'Top'
};
const title = 'AAPL Stock Price';

provide('stockChart', [
  DateTime, RangeTooltip, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, Tooltip,
  Crosshair, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend
]);

</script>
<style>
#container {
  height: 350px;
}
</style>

Options API (~/src/App.vue)

<template>
  <div class="control-section">
    <div>
      <ejs-stockchart id="stockchartcontainer" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis"
        :tooltip="tooltip" :legendSettings="legendSettings" :indicatorType="indicatorType"
        :trendlineType="trendlineType" :crosshair="crosshair" :title="title">
        <e-stockchart-series-collection>
          <e-stockchart-series :dataSource="seriesData" type="Candle" volume='volume' xName='date' low='low' high='high'
            open='open' close='close' name='AAPL'></e-stockchart-series>
        </e-stockchart-series-collection>
      </ejs-stockchart>
    </div>
  </div>
</template>
<script>

import { chartData } from "./datasource.js";
import {
  StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, DateTime, CandleSeries, RangeTooltip, LineSeries, SplineSeries,
  HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, Tooltip,
  Crosshair, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend
} from "@syncfusion/ej2-vue-charts";


export default {
  name: "App",
  components: {
    'ejs-stockchart': StockChartComponent,
    'e-stockchart-series-collection': StockChartSeriesCollectionDirective,
    'e-stockchart-series': StockChartSeriesDirective
  },
  data() {
    return {
      seriesData: chartData,
      trendlineType: [],
      indicatorType: [],
      primaryXAxis: {
        valueType: "DateTime",
        majorGridLines: { color: "transparent" },
      },
      primaryYAxis: {
        majorTickLines: { color: "transparent", width: 0 }
      },
      crosshair: {
        enable: true,
      },
      tooltip: { enable: true },
      legendSettings: {
        visible: true,
        //Legend position as top
        position: 'Top'
      },
      title: 'AAPL Stock Price',
    };
  },
  provide: {
    stockChart: [
      DateTime, RangeTooltip, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, Tooltip,
      Crosshair, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend
    ]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

• Custom position is used to position the legend anywhere in the Stock Chart using x, y coordinates.

Composition API (~/src/App.vue)

<template>
  <div class="control-section">
    <div>
      <ejs-stockchart id="stockchartcontainer" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis"
        :tooltip="tooltip" :legendSettings="legendSettings" :indicatorType="indicatorType"
        :trendlineType="trendlineType" :crosshair="crosshair" :title="title">
        <e-stockchart-series-collection>
          <e-stockchart-series :dataSource="seriesData" type="Candle" volume='volume' xName='date' low='low' high='high'
            open='open' close='close' name='AAPL'></e-stockchart-series>
        </e-stockchart-series-collection>
      </ejs-stockchart>
    </div>
  </div>
</template>
<script setup>
import { provide } from "vue";

import { chartData } from "./datasource.js";
import {
  StockChartComponent as EjsStockchart, StockChartSeriesCollectionDirective as EStockchartSeriesCollection, StockChartSeriesDirective as EStockchartSeries, DateTime, CandleSeries, RangeTooltip, LineSeries, SplineSeries,
  HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, Tooltip,
  Crosshair, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend
} from "@syncfusion/ej2-vue-charts";

const seriesData = chartData;
const trendlineType = [];
const indicatorType = [];
const primaryXAxis = {
  valueType: "DateTime",
  majorGridLines: { color: "transparent" },
};
const primaryYAxis = {
  majorTickLines: { color: "transparent", width: 0 }
};
const crosshair = {
  enable: true,
};
const tooltip = { enable: true };
const legendSettings = {
  visible: true,
  //Legend position as custom
  position: 'Custom',
  location: { x: 200, y: 20 }
};
const title = 'AAPL Stock Price';

provide('stockChart', [
  DateTime, RangeTooltip, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, Tooltip,
  Crosshair, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend
]);

</script>
<style>
#container {
  height: 350px;
}
</style>

Options API (~/src/App.vue)

<template>
  <div class="control-section">
    <div>
      <ejs-stockchart id="stockchartcontainer" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis"
        :tooltip="tooltip" :legendSettings="legendSettings" :indicatorType="indicatorType"
        :trendlineType="trendlineType" :crosshair="crosshair" :title="title">
        <e-stockchart-series-collection>
          <e-stockchart-series :dataSource="seriesData" type="Candle" volume='volume' xName='date' low='low' high='high'
            open='open' close='close' name='AAPL'></e-stockchart-series>
        </e-stockchart-series-collection>
      </ejs-stockchart>
    </div>
  </div>
</template>
<script>

import { chartData } from "./datasource.js";
import {
  StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, DateTime, CandleSeries, RangeTooltip, LineSeries, SplineSeries,
  HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, Tooltip,
  Crosshair, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend
} from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",
  components: {
    'ejs-stockchart': StockChartComponent,
    'e-stockchart-series-collection': StockChartSeriesCollectionDirective,
    'e-stockchart-series': StockChartSeriesDirective
  },
  data() {
    return {
      seriesData: chartData,
      trendlineType: [],
      indicatorType: [],
      primaryXAxis: {
        valueType: "DateTime",
        majorGridLines: { color: "transparent" },
      },
      primaryYAxis: {
        majorTickLines: { color: "transparent", width: 0 }
      },
      crosshair: {
        enable: true,
      },
      tooltip: { enable: true },
      legendSettings: {
        visible: true,
        //Legend position as custom
        position: 'Custom',
        location: { x: 200, y: 20 }
      },
      title: 'AAPL Stock Price',
    };
  },
  provide: {
    stockChart: [
      DateTime, RangeTooltip, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, Tooltip,
      Crosshair, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend
    ]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Legend Alignment

The legend can be align as Center, Far or Near to the chart using alignment property.

Composition API (~/src/App.vue)

<template>
  <div class="control-section">
    <div>
      <ejs-stockchart id="stockchartcontainer" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis"
        :tooltip="tooltip" :legendSettings="legendSettings" :indicatorType="indicatorType"
        :trendlineType="trendlineType" :crosshair="crosshair" :title="title">
        <e-stockchart-series-collection>
          <e-stockchart-series :dataSource="seriesData" type="Candle" volume='volume' xName='date' low='low' high='high'
            open='open' close='close' name='AAPL'></e-stockchart-series>
        </e-stockchart-series-collection>
      </ejs-stockchart>
    </div>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { chartData } from "./datasource.js";
import {
  StockChartComponent as EjsStockchart, StockChartSeriesCollectionDirective as EStockchartSeriesCollection, StockChartSeriesDirective as EStockchartSeries, DateTime, CandleSeries, RangeTooltip, LineSeries, SplineSeries,
  HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, Tooltip,
  Crosshair, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend
} from "@syncfusion/ej2-vue-charts";


const seriesData = chartData;
const trendlineType = [];
const indicatorType = [];
const primaryXAxis = {
  valueType: "DateTime",
  majorGridLines: { color: "transparent" }
};
const primaryYAxis = {
  majorTickLines: { color: "transparent", width: 0 }
};
const crosshair = {
  enable: true,
};
const tooltip = { enable: true };
const legendSettings = {
  visible: true,
  position: 'Bottom',
  //Legend alignment as near
  alignment: 'Near'
};
const title = 'AAPL Stock Price';

provide('stockChart', [
  DateTime, RangeTooltip, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, Tooltip,
  Crosshair, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend
]);

</script>
<style>
#container {
  height: 350px;
}
</style>

Options API (~/src/App.vue)

<template>
  <div class="control-section">
    <div>
      <ejs-stockchart
        id="stockchartcontainer"
        :primaryXAxis="primaryXAxis"
        :primaryYAxis="primaryYAxis"
        :tooltip="tooltip"
        :legendSettings="legendSettings"
        :indicatorType="indicatorType"
        :trendlineType="trendlineType"
        :crosshair="crosshair"
        :title="title">
        <e-stockchart-series-collection>
          <e-stockchart-series :dataSource="seriesData" type="Candle"  volume='volume' xName='date' low='low' high='high' open='open' close='close' name='AAPL'></e-stockchart-series>
        </e-stockchart-series-collection>
      </ejs-stockchart>
    </div>
  </div>
</template>
<script>

import { chartData } from "./datasource.js";
import {
  StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, DateTime, CandleSeries, RangeTooltip, LineSeries,SplineSeries,
  HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator,BollingerBands,  TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator,Tooltip,
  Crosshair,AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend
} from "@syncfusion/ej2-vue-charts";

export default {
name: "App",
components: {
    'ejs-stockchart': StockChartComponent,
    'e-stockchart-series-collection': StockChartSeriesCollectionDirective,
    'e-stockchart-series': StockChartSeriesDirective
  },
  data() {
    return {
        seriesData:chartData,
        trendlineType:[],
        indicatorType:[],
        primaryXAxis: {
            valueType: "DateTime",
            majorGridLines: { color: "transparent" }
        },
        primaryYAxis: {
            majorTickLines: { color: "transparent", width: 0 }
        },
        crosshair: {
            enable: true,
        },
        tooltip: { enable: true },
        legendSettings: {
        visible: true,
        position:'Bottom',
        //Legend alignment as near
        alignment: 'Near'
        },
        title: 'AAPL Stock Price',
    };
  },
  provide: {
    stockChart: [
      DateTime, RangeTooltip, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, Tooltip,
  Crosshair,BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator,Export, StockLegend
    ]
  }
};
</script>
<style>
#container {
   height: 350px;
 }
</style>

Customization

To change the legend icon shape, legendShape property in the series can be used. By default legend icon shape is seriesType.

Composition API (~/src/App.vue)

<template>
  <div class="control-section">
    <div>
      <ejs-stockchart id="stockchartcontainer" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis"
        :tooltip="tooltip" :legendSettings="legendSettings" :indicatorType="indicatorType"
        :trendlineType="trendlineType" :crosshair="crosshair" :title="title">
        <e-stockchart-series-collection>
          <e-stockchart-series :dataSource="seriesData" type="Candle" volume='volume' xName='date' low='low' high='high'
            open='open' close='close' name='AAPL' legendShape='Pentagon'></e-stockchart-series>
        </e-stockchart-series-collection>
      </ejs-stockchart>
    </div>
  </div>
</template>
<script setup>
import { provide } from "vue";

import { chartData } from "./datasource.js";
import {
  StockChartComponent as EjsStockchart, StockChartSeriesCollectionDirective as EStockchartSeriesCollection, StockChartSeriesDirective as EStockchartSeries, DateTime, CandleSeries, RangeTooltip, LineSeries, SplineSeries,
  HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, Tooltip,
  Crosshair, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend
} from "@syncfusion/ej2-vue-charts";


const seriesData = chartData;
const trendlineType = [];
const indicatorType = [];
const primaryXAxis = {
  valueType: "DateTime",
  majorGridLines: { color: "transparent" }
};
const primaryYAxis = {
  majorTickLines: { color: "transparent", width: 0 }
};
const crosshair = {
  enable: true,
};
const tooltip = { enable: true };
const legendSettings = { visible: true };
const title = 'AAPL Stock Price';

provide('stockChart', [
  DateTime, RangeTooltip, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, Tooltip,
  Crosshair, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend
]);

</script>
<style>
#container {
  height: 350px;
}
</style>

Options API (~/src/App.vue)

<template>
  <div class="control-section">
    <div>
      <ejs-stockchart id="stockchartcontainer" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis"
        :tooltip="tooltip" :legendSettings="legendSettings" :indicatorType="indicatorType"
        :trendlineType="trendlineType" :crosshair="crosshair" :title="title">
        <e-stockchart-series-collection>
          <e-stockchart-series :dataSource="seriesData" type="Candle" volume='volume' xName='date' low='low' high='high'
            open='open' close='close' name='AAPL' legendShape='Pentagon'></e-stockchart-series>
        </e-stockchart-series-collection>
      </ejs-stockchart>
    </div>
  </div>
</template>
<script>

import { chartData } from "./datasource.js";
import {
  StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, DateTime, CandleSeries, RangeTooltip, LineSeries, SplineSeries,
  HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, Tooltip,
  Crosshair, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend
} from "@syncfusion/ej2-vue-charts";


export default {
  name: "App",
  components: {
    'ejs-stockchart': StockChartComponent,
    'e-stockchart-series-collection': StockChartSeriesCollectionDirective,
    'e-stockchart-series': StockChartSeriesDirective
  },
  data() {
    return {
      seriesData: chartData,
      trendlineType: [],
      indicatorType: [],
      primaryXAxis: {
        valueType: "DateTime",
        majorGridLines: { color: "transparent" },
      },
      primaryYAxis: {
        majorTickLines: { color: "transparent", width: 0 }
      },
      crosshair: {
        enable: true,
      },
      tooltip: { enable: true },
      legendSettings: { visible: true },
      title: 'AAPL Stock Price',
    };
  },
  provide: {
    stockChart: [
      DateTime, RangeTooltip, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, Tooltip,
      Crosshair, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend
    ]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Legend Size

By default, legend takes 20% - 25% of the Stock Chart’s height horizontally, when it is placed on top or bottom position and 20% - 25% of the Stock Chart’s width vertically, when placed on left or right position of the Stock Chart. The default legend size can be changed by using the width and height property of the legendSettings.

Composition API (~/src/App.vue)

<template>
  <div class="control-section">
    <div>
      <ejs-stockchart id="stockchartcontainer" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis"
        :tooltip="tooltip" :legendSettings="legendSettings" :indicatorType="indicatorType"
        :trendlineType="trendlineType" :crosshair="crosshair" :title="title">
        <e-stockchart-series-collection>
          <e-stockchart-series :dataSource="seriesData" type="Candle" volume='volume' xName='date' low='low' high='high'
            open='open' close='close' name='AAPL'></e-stockchart-series>
        </e-stockchart-series-collection>
      </ejs-stockchart>
    </div>
  </div>
</template>
<script setup>
import { provide } from "vue";

import { chartData } from "./datasource.js";
import {
  StockChartComponent as EjsStockchart, StockChartSeriesCollectionDirective as EStockchartSeriesCollection, StockChartSeriesDirective as EStockchartSeries, DateTime, CandleSeries, RangeTooltip, LineSeries, SplineSeries,
  HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, Tooltip,
  Crosshair, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend
} from "@syncfusion/ej2-vue-charts";

const seriesData = chartData;
const trendlineType = [];
const indicatorType = [];
const primaryXAxis = {
  valueType: "DateTime",
  majorGridLines: { color: "transparent" }
};
const primaryYAxis = {
  majorTickLines: { color: "transparent", width: 0 }
};
const crosshair = {
  enable: true,
};
const tooltip = { enable: true };
const legendSettings = {
  visible: true,
  //Legend size for chart
  width: '500', height: '50',
  border: { width: 1, color: 'pink' }
};
const title = 'AAPL Stock Price';

provide('stockChart', [
  DateTime, RangeTooltip, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, Tooltip,
  Crosshair, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend
]);

</script>
<style>
#container {
  height: 350px;
}
</style>

Options API (~/src/App.vue)

<template>
  <div class="control-section">
    <div>
      <ejs-stockchart id="stockchartcontainer" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis"
        :tooltip="tooltip" :legendSettings="legendSettings" :indicatorType="indicatorType"
        :trendlineType="trendlineType" :crosshair="crosshair" :title="title">
        <e-stockchart-series-collection>
          <e-stockchart-series :dataSource="seriesData" type="Candle" volume='volume' xName='date' low='low' high='high'
            open='open' close='close' name='AAPL'></e-stockchart-series>
        </e-stockchart-series-collection>
      </ejs-stockchart>
    </div>
  </div>
</template>
<script>

import { chartData } from "./datasource.js";
import {
  StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, DateTime, CandleSeries, RangeTooltip, LineSeries, SplineSeries,
  HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, Tooltip,
  Crosshair, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend
} from "@syncfusion/ej2-vue-charts";


export default {
  name: "App",
  components: {
    'ejs-stockchart': StockChartComponent,
    'e-stockchart-series-collection': StockChartSeriesCollectionDirective,
    'e-stockchart-series': StockChartSeriesDirective
  },
  data() {
    return {
      seriesData: chartData,
      trendlineType: [],
      indicatorType: [],
      primaryXAxis: {
        valueType: "DateTime",
        majorGridLines: { color: "transparent" },
      },
      primaryYAxis: {
        majorTickLines: { color: "transparent", width: 0 }
      },
      crosshair: {
        enable: true,
      },
      tooltip: { enable: true },
      legendSettings: {
        visible: true,
        //Legend size for chart
        width: '500', height: '50',
        border: { width: 1, color: 'pink' }
      },
      title: 'AAPL Stock Price',
    };
  },
  provide: {
    stockChart: [
      DateTime, RangeTooltip, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, Tooltip,
      Crosshair, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend
    ]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Legend Item Size

The size of the legend items can customized by using the shapeHeight and shapeWidth property.

Composition API (~/src/App.vue)

<template>
  <div class="control-section">
    <div>
      <ejs-stockchart id="stockchartcontainer" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis"
        :tooltip="tooltip" :legendSettings="legendSettings" :indicatorType="indicatorType"
        :trendlineType="trendlineType" :crosshair="crosshair" :title="title">
        <e-stockchart-series-collection>
          <e-stockchart-series :dataSource="seriesData" type="Candle" volume='volume' xName='date' low='low' high='high'
            open='open' close='close' name='AAPL'></e-stockchart-series>
        </e-stockchart-series-collection>
      </ejs-stockchart>
    </div>
  </div>
</template>
<script setup>
import { provide } from "vue";

import { chartData } from "./datasource.js";
import {
  StockChartComponent as EjsStockchart, StockChartSeriesCollectionDirective as EStockchartSeriesCollection, StockChartSeriesDirective as EStockchartSeries, DateTime, CandleSeries, RangeTooltip, LineSeries, SplineSeries,
  HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, Tooltip,
  Crosshair, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend
} from "@syncfusion/ej2-vue-charts";


const seriesData = chartData;
const trendlineType = [];
const indicatorType = [];
const primaryXAxis = {
  valueType: "DateTime",
  majorGridLines: { color: "transparent" },
};
const primaryYAxis = {
  majorTickLines: { color: "transparent", width: 0 }
};
const crosshair = {
  enable: true,
};
const tooltip = { enable: true };
const legendSettings = {
  visible: true,
  //Legend item size for chart
  shapeHeight: 15, shapeWidth: 15
};
const title = 'AAPL Stock Price';

provide('stockChart', [
  DateTime, RangeTooltip, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, Tooltip,
  Crosshair, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend
]);

</script>
<style>
#container {
  height: 350px;
}
</style>

Options API (~/src/App.vue)

<template>
  <div class="control-section">
    <div>
      <ejs-stockchart
        id="stockchartcontainer"
        :primaryXAxis="primaryXAxis"
        :primaryYAxis="primaryYAxis"
        :tooltip="tooltip"
        :legendSettings="legendSettings"
        :indicatorType="indicatorType"
        :trendlineType="trendlineType"
        :crosshair="crosshair"
        :title="title">
        <e-stockchart-series-collection>
          <e-stockchart-series :dataSource="seriesData" type="Candle"  volume='volume' xName='date' low='low' high='high' open='open' close='close' name='AAPL'></e-stockchart-series>
        </e-stockchart-series-collection>
      </ejs-stockchart>
    </div>
  </div>
</template>
<script>

import { chartData } from "./datasource.js";
import {
  StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, DateTime, CandleSeries, RangeTooltip, LineSeries,SplineSeries,
  HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator,BollingerBands,  TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator,Tooltip,
  Crosshair,AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend
} from "@syncfusion/ej2-vue-charts";


export default {
name: "App",
components: {
    'ejs-stockchart': StockChartComponent,
    'e-stockchart-series-collection': StockChartSeriesCollectionDirective,
    'e-stockchart-series': StockChartSeriesDirective
  },
  data() {
    return {
        seriesData:chartData,
        trendlineType:[],
        indicatorType:[],
        primaryXAxis: {
            valueType: "DateTime",
            majorGridLines: { color: "transparent" },
        },
        primaryYAxis: {
            majorTickLines: { color: "transparent", width: 0 }
        },
        crosshair: {
            enable: true,
        },
        tooltip: { enable: true },
        legendSettings: {
        visible: true,
        //Legend item size for chart
        shapeHeight: 15, shapeWidth: 15
        },
        title: 'AAPL Stock Price',
    };
  },
  provide: {
    stockChart: [
      DateTime, RangeTooltip, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, Tooltip,
  Crosshair,BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator,Export, StockLegend
    ]
  }
};
</script>
<style>
#container {
   height: 350px;
 }
</style>

Collapsing Legend Item

By default, series name will be displayed as legend. To skip the legend for a particular series, empty string to the series name can be given.

Composition API (~/src/App.vue)

<template>
  <div class="control-section">
    <div>
      <ejs-stockchart id="stockchartcontainer" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis"
        :tooltip="tooltip" :legendSettings="legendSettings" :indicatorType="indicatorType"
        :trendlineType="trendlineType" :crosshair="crosshair" :title="title">
        <e-stockchart-series-collection>
          <e-stockchart-series :dataSource="seriesData" type="Candle" volume='volume' xName='date' low='low' high='high'
            open='open' close='close'></e-stockchart-series>
        </e-stockchart-series-collection>
      </ejs-stockchart>
    </div>
  </div>
</template>
<script setup>
import { provide } from "vue";

import { chartData } from "./datasource.js";
import {
  StockChartComponent as EjsStockchart, StockChartSeriesCollectionDirective as EStockchartSeriesCollection, StockChartSeriesDirective as EStockchartSeries, DateTime, CandleSeries, RangeTooltip, LineSeries, SplineSeries,
  HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, Tooltip,
  Crosshair, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend
} from "@syncfusion/ej2-vue-charts";



const seriesData = chartData;
const trendlineType = [];
const indicatorType = [];
const primaryXAxis = {
  valueType: "DateTime",
  majorGridLines: { color: "transparent" }
};
const primaryYAxis = {
  majorTickLines: { color: "transparent", width: 0 }
};
const crosshair = {
  enable: true,
};
const tooltip = { enable: true };
const title = 'AAPL Stock Price';
const legendSettings = { visible: true };

provide('stockChart', [
  DateTime, RangeTooltip, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, Tooltip,
  Crosshair, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend
]);

</script>
<style>
#container {
  height: 350px;
}
</style>

Options API (~/src/App.vue)

<template>
  <div class="control-section">
    <div>
      <ejs-stockchart
        id="stockchartcontainer"
        :primaryXAxis="primaryXAxis"
        :primaryYAxis="primaryYAxis"
        :tooltip="tooltip"
        :legendSettings="legendSettings"
        :indicatorType="indicatorType"
        :trendlineType="trendlineType"
        :crosshair="crosshair"
        :title="title">
        <e-stockchart-series-collection>
          <e-stockchart-series :dataSource="seriesData" type="Candle"  volume='volume' xName='date' low='low' high='high' open='open' close='close'></e-stockchart-series>
        </e-stockchart-series-collection>
      </ejs-stockchart>
    </div>
  </div>
</template>
<script>

import { chartData } from "./datasource.js";
import {
  StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, DateTime, CandleSeries, RangeTooltip, LineSeries,SplineSeries,
  HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator,BollingerBands,  TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator,Tooltip,
  Crosshair,AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend
} from "@syncfusion/ej2-vue-charts";

export default {
name: "App",
components: {
    'ejs-stockchart': StockChartComponent,
    'e-stockchart-series-collection': StockChartSeriesCollectionDirective,
    'e-stockchart-series': StockChartSeriesDirective
  },
  data() {
    return {
        seriesData:chartData,
        trendlineType:[],
        indicatorType:[],
        primaryXAxis: {
            valueType: "DateTime",
            majorGridLines: { color: "transparent" },
        },
        primaryYAxis: {
            majorTickLines: { color: "transparent", width: 0 }
        },
        crosshair: {
            enable: true,
        },
        tooltip: { enable: true },
        title: 'AAPL Stock Price',
        legendSettings: { visible: true }
    };
  },
  provide: {
    stockChart: [
      DateTime, RangeTooltip, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, Tooltip,
  Crosshair,BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator,Export, StockLegend
    ]
  }
};
</script>
<style>
#container {
   height: 350px;
 }
</style>

Legend Title

The title for legend can be set using title property in legendSettings. Customize the fontStyle, size, fontWeight, color, textAlignment, fontFamily, opacity and textOverflow of legend title. titlePosition is used to set the legend position in Top, Left and Right position. maximumTitleWidth is used to set the width of the legend title. By default, it will be 100px.

Composition API (~/src/App.vue)

<template>
  <div class="control-section">
    <div>
      <ejs-stockchart id="stockchartcontainer" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis"
        :tooltip="tooltip" :legendSettings="legendSettings" :indicatorType="indicatorType"
        :trendlineType="trendlineType" :crosshair="crosshair" :title="title">
        <e-stockchart-series-collection>
          <e-stockchart-series :dataSource="seriesData" type="Candle" volume='volume' xName='date' low='low' high='high'
            open='open' close='close' name='AAPL'></e-stockchart-series>
        </e-stockchart-series-collection>
      </ejs-stockchart>
    </div>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { chartData } from "./datasource.js";
import {
  StockChartComponent as EjsStockchart, StockChartSeriesCollectionDirective as EStockchartSeriesCollection, StockChartSeriesDirective as EStockchartSeries, DateTime, CandleSeries, RangeTooltip, LineSeries, SplineSeries,
  HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, Tooltip,
  Crosshair, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend
} from "@syncfusion/ej2-vue-charts";

const seriesData = chartData;
const trendlineType = [];
const indicatorType = [];
const primaryXAxis = {
  valueType: "DateTime",
  majorGridLines: { color: "transparent" },
};
const primaryYAxis = {
  majorTickLines: { color: "transparent", width: 0 }
};
const crosshair = {
  enable: true,
};
const tooltip = { enable: true };
const title = 'AAPL Stock Price';
const legendSettings = {
  visible: true,
  title: 'Countries',
  titlePosition: 'Top',
  titleStyle: {
    fontFamily: 'verdana',
    fontStyle: 'Normal',
    fontWeight: 'Normal',
    size: '15px',
    textAlignment: 'Center',
    color: 'blue',
    textOverflow: 'None'
  },
  maximumTitleWidth: 150
};

provide('stockChart', [
  DateTime, RangeTooltip, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, Tooltip,
  Crosshair, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend
]);

</script>
<style>
#container {
  height: 350px;
}
</style>

Options API (~/src/App.vue)

<template>
  <div class="control-section">
    <div>
      <ejs-stockchart id="stockchartcontainer" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis"
        :tooltip="tooltip" :legendSettings="legendSettings" :indicatorType="indicatorType"
        :trendlineType="trendlineType" :crosshair="crosshair" :title="title">
        <e-stockchart-series-collection>
          <e-stockchart-series :dataSource="seriesData" type="Candle" volume='volume' xName='date' low='low' high='high'
            open='open' close='close' name='AAPL'></e-stockchart-series>
        </e-stockchart-series-collection>
      </ejs-stockchart>
    </div>
  </div>
</template>
<script>

import { chartData } from "./datasource.js";
import {
  StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, DateTime, CandleSeries, RangeTooltip, LineSeries, SplineSeries,
  HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, Tooltip,
  Crosshair, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend
} from "@syncfusion/ej2-vue-charts";


export default {
  name: "App",
  components: {
    'ejs-stockchart': StockChartComponent,
    'e-stockchart-series-collection': StockChartSeriesCollectionDirective,
    'e-stockchart-series': StockChartSeriesDirective
  },
  data() {
    return {
      seriesData: chartData,
      trendlineType: [],
      indicatorType: [],
      primaryXAxis: {
        valueType: "DateTime",
        majorGridLines: { color: "transparent" },
      },
      primaryYAxis: {
        majorTickLines: { color: "transparent", width: 0 }
      },
      crosshair: {
        enable: true,
      },
      tooltip: { enable: true },
      title: 'AAPL Stock Price',
      legendSettings: {
        visible: true,
        title: 'Countries',
        titlePosition: 'Top',
        titleStyle: {
          fontFamily: 'verdana',
          fontStyle: 'Normal',
          fontWeight: 'Normal',
          size: '15px',
          textAlignment: 'Center',
          color: 'blue',
          textOverflow: 'None'
        },
        maximumTitleWidth: 150
      }
    };
  },
  provide: {
    stockChart: [
      DateTime, RangeTooltip, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, Tooltip,
      Crosshair, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend
    ]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Note: To use legend feature, we need to inject StockLegend into the Provide.