import { __assign, __extends } from "tslib";
import * as React from 'react';
import { VerticalBarChart } from '@uifabric/charting';
import { DefaultPalette, DefaultFontStyles } from 'office-ui-fabric-react/lib/Styling';
var VerticalBarChartStyledExample = /** @class */ (function (_super) {
    __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: DefaultPalette.orange,
        };
        var textStyle = {
            fill: DefaultPalette.orangeLight,
            fontSize: '12px',
        };
        var customStyles = function () {
            return {
                chart: {
                    paddingBottom: '45px',
                },
                chartLabel: __assign({ color: DefaultPalette.orange }, DefaultFontStyles.large),
                xAxisDomain: axisStyle,
                xAxisTicks: axisStyle,
                yAxisDomain: axisStyle,
                yAxisTicks: axisStyle,
                yAxisText: textStyle,
            };
        };
        var customColors = [DefaultPalette.greenLight, DefaultPalette.green, DefaultPalette.greenDark];
        return (React.createElement("div", { style: { width: '800px', height: '400px' } },
            React.createElement(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));
export { VerticalBarChartStyledExample };
//# sourceMappingURL=VerticalBarChart.Styled.Example.js.map