"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var charting_1 = require("@uifabric/charting");
var Styling_1 = require("office-ui-fabric-react/lib-commonjs/Styling");
var VerticalBarChartStyledExample = /** @class */ (function (_super) {
    tslib_1.__extends(VerticalBarChartStyledExample, _super);
    function VerticalBarChartStyledExample(props) {
        return _super.call(this, props) || this;
    }
    VerticalBarChartStyledExample.prototype.render = function () {
        var points = [
            { x: 'One', y: 20 },
            { x: 'Two', y: 48 },
            { x: 'Three', y: 30 },
            { x: 'Four', y: 40 },
            { x: 'Five', y: 13 },
            { x: 'Six', y: 60 },
            { x: 'Seven', y: 60 },
            { x: 'Eight', y: 57 },
            { x: 'Nine', y: 14 },
            { x: 'Ten', y: 35 },
            { x: 'Elven', y: 20 },
            { x: 'Twelve', y: 44 },
            { x: 'Thirteen', y: 33 },
        ];
        var axisStyle = {
            stroke: Styling_1.DefaultPalette.orange,
        };
        var textStyle = {
            fill: Styling_1.DefaultPalette.orangeLight,
            fontSize: '12px',
        };
        var customStyles = function () {
            return {
                chart: {
                    paddingBottom: '45px',
                },
                chartLabel: tslib_1.__assign({ color: Styling_1.DefaultPalette.orange }, Styling_1.DefaultFontStyles.large),
                xAxisDomain: axisStyle,
                xAxisTicks: axisStyle,
                yAxisDomain: axisStyle,
                yAxisTicks: axisStyle,
                yAxisText: textStyle,
            };
        };
        var customColors = [Styling_1.DefaultPalette.greenLight, Styling_1.DefaultPalette.green, Styling_1.DefaultPalette.greenDark];
        return (React.createElement("div", { style: { width: '800px', height: '400px' } },
            React.createElement(charting_1.VerticalBarChart, { data: points, width: 800, height: 400, barWidth: 20, yAxisTickCount: 6, 
                // eslint-disable-next-line react/jsx-no-bind
                styles: customStyles, colors: customColors, hideLegend: true, hideTooltip: true })));
    };
    return VerticalBarChartStyledExample;
}(React.Component));
exports.VerticalBarChartStyledExample = VerticalBarChartStyledExample;
//# sourceMappingURL=VerticalBarChart.Styled.Example.js.map