define(["require", "exports", "tslib", "react", "@uifabric/charting", "office-ui-fabric-react/lib/Styling"], function (require, exports, tslib_1, React, charting_1, Styling_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var GroupedVerticalBarChartStyledExample = /** @class */ (function (_super) {
        tslib_1.__extends(GroupedVerticalBarChartStyledExample, _super);
        function GroupedVerticalBarChartStyledExample() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        GroupedVerticalBarChartStyledExample.prototype.render = function () {
            var data = [
                {
                    name: '2000',
                    series: [
                        {
                            key: 'series1',
                            data: 66,
                            color: Styling_1.DefaultPalette.accent,
                            legend: 'MetaData1',
                        },
                        {
                            key: 'series2',
                            data: 13,
                            color: Styling_1.DefaultPalette.blueMid,
                            legend: 'MetaData2',
                        },
                        {
                            key: 'series3',
                            data: 34,
                            color: Styling_1.DefaultPalette.blueLight,
                            legend: 'MetaData3',
                        },
                    ],
                },
                {
                    name: '2010',
                    series: [
                        {
                            key: 'series1',
                            data: 14,
                            color: Styling_1.DefaultPalette.accent,
                            legend: 'MetaData1',
                        },
                        {
                            key: 'series2',
                            data: 90,
                            color: Styling_1.DefaultPalette.blueMid,
                            legend: 'MetaData2',
                        },
                        {
                            key: 'series3',
                            data: 33,
                            color: Styling_1.DefaultPalette.blueLight,
                            legend: 'MetaData3',
                        },
                    ],
                },
                {
                    name: '2020',
                    series: [
                        {
                            key: 'series1',
                            data: 54,
                            color: Styling_1.DefaultPalette.accent,
                            legend: 'MetaData1',
                        },
                        {
                            key: 'series2',
                            data: 72,
                            color: Styling_1.DefaultPalette.blueMid,
                            legend: 'MetaData2',
                        },
                        {
                            key: 'series3',
                            data: 18,
                            color: Styling_1.DefaultPalette.blueLight,
                            legend: 'MetaData3',
                        },
                    ],
                },
            ];
            return (React.createElement("div", { style: { width: '650px', height: '400px' } },
                React.createElement(charting_1.GroupedVerticalBarChart, { data: data, width: 650, height: 400, showYAxisGridLines: true, yAxisTickCount: 10, barwidth: 43 })));
        };
        return GroupedVerticalBarChartStyledExample;
    }(React.Component));
    exports.GroupedVerticalBarChartStyledExample = GroupedVerticalBarChartStyledExample;
});
//# sourceMappingURL=GroupedVerticalBarChart.Styled.Example.js.map