import * as React from 'react';
import { MultiStackedBarChart } from '@uifabric/charting';
import { DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
export var MultiStackedBarChartExample = function () {
    var firstChartPoints = [
        {
            legend: 'Debit card numbers (EU and USA)',
            data: 40,
            color: DefaultPalette.red,
            xAxisCalloutData: '2020/04/30',
            yAxisCalloutData: '40%',
        },
        {
            legend: 'Passport numbers (USA)',
            data: 23,
            color: DefaultPalette.green,
            xAxisCalloutData: '2020/04/30',
            yAxisCalloutData: '23%',
        },
        {
            legend: 'Social security numbers',
            data: 35,
            color: DefaultPalette.yellow,
            xAxisCalloutData: '2020/04/30',
            yAxisCalloutData: '35%',
        },
        {
            legend: 'Credit card numbers',
            data: 87,
            color: DefaultPalette.blueLight,
            xAxisCalloutData: '2020/04/30',
            yAxisCalloutData: '87%',
        },
        {
            legend: 'Tax identification numbers (USA)',
            data: 87,
            color: DefaultPalette.black,
            xAxisCalloutData: '2020/04/30',
            yAxisCalloutData: '87%',
        },
    ];
    var firstChartPoints1 = [
        {
            legend: 'Debit card numbers (EU and USA)',
            data: 40,
            color: DefaultPalette.red,
            xAxisCalloutData: '2020/04/30',
            yAxisCalloutData: '40%',
        },
        {
            legend: 'Passport numbers (USA)',
            data: 56,
            color: DefaultPalette.green,
            xAxisCalloutData: '2020/04/30',
            yAxisCalloutData: '56%',
        },
        {
            legend: 'Social security numbers',
            data: 35,
            color: DefaultPalette.yellow,
            xAxisCalloutData: '2020/04/30',
            yAxisCalloutData: '35%',
        },
        {
            legend: 'Credit card numbers',
            data: 92,
            color: DefaultPalette.blueLight,
            xAxisCalloutData: '2020/04/30',
            yAxisCalloutData: '92%',
        },
        {
            legend: 'Tax identification numbers (USA)',
            data: 87,
            color: DefaultPalette.black,
            xAxisCalloutData: '2020/04/30',
            yAxisCalloutData: '87%',
        },
    ];
    var secondChartPoints = [
        {
            legend: 'Phone Numbers',
            data: 40,
            color: DefaultPalette.blue,
            xAxisCalloutData: '2020/04/30',
            yAxisCalloutData: '87%',
        },
        {
            legend: 'Credit card Numbers',
            data: 23,
            color: DefaultPalette.green,
            xAxisCalloutData: '2020/04/30',
            yAxisCalloutData: '87%',
        },
    ];
    var hideRatio = [true, false];
    var hideDenominator = [true, true];
    var data = [
        {
            chartTitle: 'Monitored',
            chartData: firstChartPoints,
        },
        {
            chartTitle: 'Monitored Second Chart',
            chartData: firstChartPoints1,
        },
        {
            chartTitle: 'Unmonitored',
            chartData: secondChartPoints,
        },
    ];
    return (React.createElement(MultiStackedBarChart, { data: data, hideDenominator: hideDenominator, hideRatio: hideRatio, width: 600, href: 'https://developer.microsoft.com/en-us/', focusZonePropsForLegendsInHoverCard: { 'aria-label': 'legends Container' }, legendsOverflowProps: { focusZoneProps: { 'aria-label': 'legends Container' } }, legendsOverflowText: 'OverFlow Items' }));
};
//# sourceMappingURL=MultiStackedBarChart.Example.js.map