react - fusioncharts example with typescript (stackedcolumn2d)

import React from 'react';
import FusionCharts from 'fusioncharts';
import charts from 'fusioncharts/fusioncharts.charts';
import ReactFC from 'react-fusioncharts';

// add this line if you have licence:  FusionCharts.options['creditLabel'] = false;

charts(FusionCharts);

interface IOwnProps {
  myData: any;
}

type IProp = IOwnProps;

class StackedChart extends React.PureComponent<IProp> {
  constructor(props: IProp) {
    super(props);
    this.getToolText = this.getToolText.bind(this);
  }

  getToolText(label: string, customData: string) {
    return (
      `${label}` +
      ' | ' +
      `${customData}` +
      '<br/>' +
      '<div style="width:110px;color:red;margin-left:1px;margin-top:2px;"> ' +
        'Custom Tooltip' +
      '</div>'
    );
  }

  render() {
    // const { myData } = this.props;

    const dataSource = {
      chart: {
        theme: 'fusion',
        bgColor: '#FFFFFF',
        alternateHGridColor:'#FFFFFF',
        formatNumberScale: 1,
        numberPrefix: '$',
        numDivLines: 6,
        textOutline:0,

/*      decimalSeperator: ',',
        decimals: 0,
        forceDecimals: 0,
        yAxisValueDecimals: 0,*/

        divLineThickness: 1,
        divLineAlpha: 10,

        useRoundEdges: 0,
        usePlotGradientColor: 0,

        showSum: '1',
        showLegend: 1,
        showcanvasborder: 0,
        showPlotBorder: 0,

        baseFont:'Arial, "Helvetica Neue", Helvetica, sans-serif',
        baseFontSize: 14,
        baseFontColor: '#000000',

        labelFont:'Arial, "Helvetica Neue", Helvetica, sans-serif',
        labelFontSize: 14,
        labelFontColor: '#000000',

        valueFont:'Arial, "Helvetica Neue", Helvetica, sans-serif',
        valueFontSize: 14,
        valueFontColor: '#000000',

        outCnvBaseFont:'Arial, "Helvetica Neue", Helvetica, sans-serif',
        outCnvBaseFontSize: 14,
        outCnvBaseFontColor: '#000000',

        legendItemFont:'Arial, "Helvetica Neue", Helvetica, sans-serif',
        legendItemFontSize: 14,
        legendItemFontColor: '#000000',
        legendIconScale: 1,
        legendBorderThickness: 0,
        legendShadow: 0,

      },
      categories: [
        {
          category: [
            {
              label: 'Label1',
            },
            {
              label: 'Label2',
            },
            {
              label: 'Label3',
            },
            {
              label: 'Label4',
            },
          ],
        },
      ],
      dataset: [
        {
          seriesname: 'Serie 1',
          showValues: false,
          color: '#003f5ec',
          data: [
            {
              value: 1000,
              toolText: this.getToolText(
                '$label',
                'my custom text 1'
              ),
            },
            {
              value: 2000,
              toolText: this.getToolText(
                '$label',
                'my custom text 2'
              ),
            },
            {
              value: 50,
              toolText: this.getToolText(
                '$label',
                'my custom text 3'
              ),
            },
            {
              value: 3000,
              toolText: this.getToolText(
                '$label',
                'my custom text 4'
              ),
            },
          ],
        },
        {
          seriesname: 'Serie 2',
          showValues: false,
          color: '#ffe600',
          data: [
            {
              value: 4000,
              toolText: this.getToolText(
                '$label',
                'my custom text 5'
              ),
            },
            {
              value: 2000,
              toolText: this.getToolText(
                '$label',
                'my custom text 6'
              ),
            },
            {
              value: 800,
              toolText: this.getToolText(
                '$label',
                'my custom text 7'
              ),
            },
            {
              value: 6600,
              toolText: this.getToolText(
                '$label',
                'my custom text 8'
              ),
            },
          ],
        },
      ],
    }

    return (
      <div id="my-chart-container">
        <ReactFC
          type="stackedcolumn2d"
          width="100%"
          height="250"
          dataFormat="JSON"
          dataSource={dataSource}
        />
      </div>
    );
  }
}

export default StackedChart;

react - fusioncharts example with typescript (linear-scale-gauge)

npm install fusioncharts --save
npm install react-fusioncharts --save

chartWithParameters.tsx

import React from 'react';
import LinearChart from './linearChart';

class ChartWithParameters extends React.PureComponent {
  render() {
    return (
      <LinearChart
        belowAverageValue={"3"}
        averageValue={"7"}
        highValue={"8"}
        existingValue={"5"}
      />
    );
  }
}

export default ChartWithParameters;

linearChart.tsx

import React from 'react';
import ReactFC from 'react-fusioncharts';
import FusionCharts from 'fusioncharts';
import Widgets from 'fusioncharts/fusioncharts.widgets';

ReactFC.fcRoot(FusionCharts, Widgets);

interface IOwnProps {
  belowAverageValue: string;
  averageValue: string;
  highValue: string;
  existingValue: string;
}

type IProp = IOwnProps;

class LinearChart extends React.PureComponent<IProp> {
  render() {
    const linearChartConfigs = {
      type : 'hlineargauge',
      width : '700',
      height : '150',
      dataFormat : 'json',
      dataSource : {
        chart: {
          caption: "Example Flow Chart",
          bgColor: '#f7fcff',
          upperLimit: this.props.highValue,
          chartTopMargin: '20',
          chartBottomMargin: '20',
          valueFontSize: '12',
          gaugeFillMix: '{light-30}',
          showValue: '1',
          majorTMNumber: '11',
          majorTMColor: '#1e5779',
          showBorder: '0',
        },
        colorRange: {
          color: [
            {
              maxValue: this.props.averageValue,
              code: '#FFC533',
              label: "averageValue",
            },
            {
              maxValue: this.props.belowAverageValue,
              code: '#F2726F',
              label: "belowAverageValue",
            },
            {
              maxValue: this.props.highValue,
              code: '#62B58F',
              label: "highValue",
            },
          ],
        },
        pointers: {
          pointer: [
            {
              value: this.props.existingValue,
              showValue: '0',
              radius: '10',
              bgColor: '#6400ff',
              BorderColor: '#6400ff',
            },
          ],
        },
        trendPoints: {
          point: [
            {
              startValue: this.props.existingValue,
              endValue: this.props.highValue,
              thickness: '1',
              markerColor: '#0075c2',
              markerBorderColor: '#666666',
              markerRadius: '5',
              alpha: '30',
              displayValue: ' ',
            },
            {
              startValue: this.props.averageValue,
              thickness: '1',
              useMarker: '1',
              markerColor: '#87dc9',
              markerBorderColor: '#fff',
              markerRadius: '5',
              displayValue: ('average' + '<br/>' + 'count:' + this.props.averageValue + '<br/>'),
            },
            {
              startValue: this.props.belowAverageValue,
              thickness: '1',
              useMarker: '1',
              markerColor: '#f5be416',
              markerBorderColor: '#fff',
              markerRadius: '5',
              displayValue: ('below average' + '<br/>' + 'count:' +this.props.belowAverageValue + '<br/>'),
            },
          ],
        },
      },
    };

    return <ReactFC {...linearChartConfigs} />;
  }
}

export default LinearChart;

references:
https://www.fusioncharts.com/react-charts
https://www.fusioncharts.com/charts/gauges/linear-scale-gauge