import { __extends } from "tslib";
import * as React from 'react';
import { ChartHoverCard, DonutChart } from '@fluentui/react-charting';
var DonutChartCustomCalloutExample = /** @class */ (function (_super) {
    __extends(DonutChartCustomCalloutExample, _super);
    function DonutChartCustomCalloutExample(props) {
        return _super.call(this, props) || this;
    }
    DonutChartCustomCalloutExample.prototype.render = function () {
        var points = [
            { legend: 'first', data: 20000, color: '#E5E5E5', xAxisCalloutData: '2020/04/30' },
            { legend: 'second', data: 39000, color: '#0078D4', xAxisCalloutData: '2020/04/20' },
        ];
        var chartTitle = 'Stacked Bar chart example';
        var data = {
            chartTitle: chartTitle,
            chartData: points,
        };
        return (React.createElement(DonutChart, { data: data, innerRadius: 55, href: 'https://developer.microsoft.com/en-us/', legendsOverflowText: 'overflow Items', hideLegend: true, height: 220, width: 176, valueInsideDonut: 39000, 
            // eslint-disable-next-line react/jsx-no-bind
            onRenderCalloutPerDataPoint: function (props) {
                return props ? (React.createElement(ChartHoverCard, { XValue: 'Custom XVal', Legend: 'Custom Legend', YValue: (props.yAxisCalloutData || props.data) + " h", color: 'red' })) : null;
            } }));
    };
    return DonutChartCustomCalloutExample;
}(React.Component));
export { DonutChartCustomCalloutExample };
//# sourceMappingURL=DonutChart.CustomCallout.Example.js.map