# 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>

# 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