# Class Chart
A Vue component used for easily switching chart types or rendering multiple series of different chart types.
# Example
An example of using the Chart
component to
plot a bar chart of the Sample Retail data source hosted in a Sisense instance:
<script setup lang="ts">
import { Chart } from '@sisense/sdk-ui-vue';
import type { ChartProps } from '@sisense/sdk-ui-vue';
import * as DM from '../assets/sample-retail-model';
import { measureFactory, filterFactory } from '@sisense/sdk-data';
import { ref } from 'vue';
const dimProductName = DM.DimProducts.ProductName;
const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');
const chartProps = ref<ChartProps>({
chartType: 'bar',
dataSet: DM.DataSource,
dataOptions: {
category: [dimProductName],
value: [{ column: measureTotalRevenue, sortType: 'sortDesc' }],
breakBy: [],
},
filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
styleOptions: {
xAxis: {
title: {
text: 'Product Name',
enabled: true,
},
},
yAxis: {
title: {
text: 'Total Revenue',
enabled: true,
},
},
},
});
</script>
<template>
<Chart
:chartType="chartProps.chartType"
:dataSet="chartProps.dataSet"
:dataOptions="chartProps.dataOptions"
:filters="chartProps.filters"
:styleOptions="chartProps.styleOptions"
/>
</template>
![](/assets/img/vue-chart-example.0b12bb02.png)
# Param
Chart properties
# Properties
# chartType
chartType?:
ChartType
# dataOptions
dataOptions?:
ChartDataOptions
# dataSet
dataSet?:
DataSource
|Data
# filters
filters?:
Filter
[] |FilterRelations
# highlights
highlights?:
Filter
[]
# onBeforeRender
onBeforeRender?:
BeforeRenderHandler
# onDataPointClick
onDataPointClick?:
DataPointEventHandler
|ScatterDataPointEventHandler
|AreamapDataPointEventHandler
|BoxplotDataPointEventHandler
|ScattermapDataPointEventHandler
# onDataPointContextMenu
onDataPointContextMenu?:
DataPointEventHandler
|ScatterDataPointEventHandler
|BoxplotDataPointEventHandler
# onDataPointsSelected
onDataPointsSelected?:
DataPointsEventHandler
|ScatterDataPointsEventHandler
# refreshCounter
refreshCounter?:
number
# styleOptions
styleOptions?:
ChartStyleOptions