Themes fail to apply with ES6 imports

[Otoris]

Following examples in this project, I import the ocean theme as oceanIgnore:

import React from 'react';
import ReactDOM from 'react-dom'
import ReactFC from 'react-fusioncharts';
import Dimensions from 'react-dimensions'
import FusionCharts from 'fusioncharts';
// Load the charts module
import charts from 'fusioncharts/fusioncharts.charts';
import oceanIgnore from'fusioncharts/themes/fusioncharts.theme.ocean';

charts(FusionCharts)

class YearOverYearSalesTrend extends React.Component {

  constructor(props) {
    super(props)

    this.state = {
      data: this.props.yearOverYearSalesTrend,

    }

    this.formatData = this.formatData.bind(this)
    this.formatData(this.props)
  }

  componentWillReceiveProps(nextProps) {
    this.formatData(nextProps)
  }

  componentDidMount() {

  }

  formatData(nextProps) {
    let newDataSet = nextProps.yearOverYearSalesTrend
    let categories = [{category: []}]
    let parent = this
    let dataset = [{seriesname: 'Previous 12 Months', data: []}, {seriesname: 'Current 12 Months', data: []}]
    Promise.resolve(
      newDataSet.map((item, index) => {
        categories[0].category.push({'label': item.month})
        dataset[0].data.push({value: item.totalSaleS1})
        dataset[1].data.push({value: item.totalSaleS2})
        return true
      })
    ).then(() => {
      parent.setState({categories: categories, dataset: dataset})
    })

  }

  render() {
    var barChartConfig = {
        id: 'yearOverYearSalesTrend',
        type: 'mscolumn2d',
        width: this.props.containerWidth,
        height: this.props.containerHeight - 25,
        enableSmartLabels: 1,
        className: "sales-mix-by-account-type-mtd", // ReactJS attribute-name for DOM classes
        dataFormat: "JSON",
        dataSource: {
            chart: {
              numberprefix: "$",
              showvalues: 0,
              paletteColors: "#333333,#73A3E1",
              plotgradientcolor: "",
              divlinecolor: "CCCCCC",
              theme: "ocean",
              showBorder: 0,
              "bgAlpha": 0,
            },
            dataset: this.state.dataset,
            categories: this.state.categories,
          }
        }
    return ( 
      <div className="full-height">
        <h2>Year Over Year Sales Trend</h2>
        <ReactFC {...barChartConfig} />
      </div>
    )
  }
}

export default Dimensions()(YearOverYearSalesTrend) 

However, I only get the default theme:

Is it being applied incorrectly? There are zero error messages or warnings in the console to suggest something isn't working. I've also tried manually including them with script tags, this hasn't worked either.

[Otoris]

Looks like this is completely undocumented according to an email I received from the Fusioncharts team. Documentation needs updating as it appears it's showing older examples.

To use a theme see the following code:

import React from 'react';
import ReactDOM from 'react-dom'
import ReactFC from 'react-fusioncharts';
import FusionCharts from 'fusioncharts';
import charts from 'fusioncharts/fusioncharts.charts';
import theme from 'fusioncharts/themes/fusioncharts.theme.ocean';

charts(FusionCharts)
theme(FusionCharts)

[ashok1994]

import React from 'react';
import ReactDOM from 'react-dom'
import ReactFC from 'react-fusioncharts';
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';
import OceanTheme from 'fusioncharts/themes/fusioncharts.theme.ocean';
ReactFC.fcRoot(FusionCharts, Charts, OceanTheme);

Please refer the updated documentation to resolve dependencies, closing for now