Need help in using ApexCharts from rescript

Hello All,

I am trying to use ApexCharts from my rescript code. I have read their javascript code and tried to translate it to Rescript by using introp. Here is their example

import React, { Component } from "react";
import Chart from "react-apexcharts";

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      options: {
        chart: {
          id: "basic-bar"
        },
        xaxis: {
          categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
        }
      },
      series: [
        {
          name: "series-1",
          data: [30, 40, 45, 50, 49, 60, 70, 91]
        }
      ]
    };
  } // scroll down
  render() {
    return (
      <div className="app">
        <div className="row">
          <div className="mixed-chart">
            <Chart
              options={this.state.options}
              series={this.state.series}
              type="bar"
              width="500"
            />
          </div>
        </div>
      </div>
    );
  }
}

export default App;

I translated this into Rescript like this (PG Link)

type chart = {
  id: string
}
type xaxis = {
  categories: array<int>
}
type options = {
  chart: chart,
  xaxis: xaxis
}
type series = {
  name: string,
  data: array<int>
}

module Chart = {    
    @module("react-apexcharts") @react.component external make: (~options: options, ~series: array<series>, ~type_: string, ~width: string, ~height: string) => React.element = "Chart"
}

@react.component
let make = () => {
  open ApexCharts
  let options = {
    chart: {
      id: "basic-bar"
    },
  xaxis: {
    categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
  }}
  let series = [{
    name: "series-1",
      data: [30, 40, 45, 50, 49, 60, 70, 91]
  }]

  <div className="app">
    <div className="row">
      <div className="mixedChart">
        <Chart options series type_="bar" width="500px" height="500px" />
      </div>
    </div>
  </div>
}```

As soon as I load my app in the browser. it throws a warning

WARNING in ./src/components/StockDetail/StockChart.bs.js 66:35-56

export ‘Chart’ (imported as ‘ReactApexcharts’) was not found in ‘react-apexcharts’ (possible exports: __esModule, default)


If I click on the link which loads the chart it throws error

ERROR
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.

Check the render method of StockChart.
createFiberFromTypeAndProps@
createFiberFromElement@
reconcileSingleElement@
reconcileChildFibers@
reconcileChildren@
updateHostComponent@
callCallback@
dispatchEvent@[native code]
invokeGuardedCallbackDev@
invokeGuardedCallback@
beginWork$1@
performUnitOfWork@
workLoopSync@
renderRootSync@
performConcurrentWorkOnRoot@
performConcurrentWorkOnRoot@[native code]
workLoop@
flushWork@
performWorkUntilDeadline@


Here is my full source code with all dependencies etc https://github.com/abhsrivastava/tradeking

looks like Chart is a default export so it would be…

module Chart = {    
    @module("react-apexcharts") @react.component external make: (~options: options, ~series: array<series>, ~\"type": string, ~width: string, ~height: string) => React.element = "default"
}

Also…i am not sure if rescript does any magic shuffle around renaming the type var, and if it does I dont count on it, so i would use "type"

A

1 Like

worked like a charm. thanks so much!!