Giter VIP home page Giter VIP logo

Comments (2)

Pauan avatar Pauan commented on August 16, 2024

@foodaka You have to add amstock3 to your package.json, like this:

{
  "dependencies": {
    "amstock3": "amcharts/amstock3"
  }
}

Then you have to require the AmStock library, like this:

var React = require("react");
var ReactDOM = require("react-dom");
var AmCharts = require("amcharts3-react");
require("amstock3/amcharts/amstock");

Note: It has to be after the require("amcharts3-react")

from amcharts3-react.

efillman avatar efillman commented on August 16, 2024

I am guessing from your code you were trying to do this in React and this is the only way I got it to work.

  1. check your package.json and install as applicable, ensure that all three made it into your node modules folder.
"dependencies": {
    "@amcharts/amcharts3-react": "^3.1.0",
    "amcharts3": "^3.21.15",    
    "amstock3": "^3.21.15",
} etc...
  1. In your bootstrap or wherever you setup required code in your app require all the amcharts and amstock codebase.
require('amcharts3/amcharts/amcharts');
require('amcharts3/amcharts/gauge');
require('amcharts3/amcharts/serial');
require("@amcharts/amcharts3-react");
require('amstock3/amcharts/amstock');
require('amcharts3/amcharts/plugins/dataloader/dataloader.min.js');
require('amcharts3/amcharts/themes/dark.js');
require('amcharts3/amcharts/themes/light.js');
  1. add all of these imports to your react component. The order of imports matters,
import 'amcharts3';
import 'amcharts3/amcharts/serial';
import 'amcharts3/amcharts/gauge';
import AmCharts from '@amcharts/amcharts3-react';
import 'amstock3/amcharts/amstock';
import 'amcharts3/amcharts/plugins/dataloader/dataloader.min.js';
import 'amcharts3/amcharts/themes/dark.js';
import 'amcharts3/amcharts/themes/light.js';

  1. Compile and check that you have an object available called AmCharts in your DOM window. From here you should see all the chart types as well such as AmChart.AmStockChart. If you are able to access this type then you know all the amcharts and amstocks codebase is there and can narrow it down to "your" code.

  2. Read the AmCharts.React documentation and check out the examples to build an easy chart. Once you are ready to switch to "stock" type you don't change the constructor, just switch the "type" to stock.

render: function () {
    // Render the chart
    return React.createElement(AmCharts.React, {
      style: {
        width: "100%",
        height: "500px"
      },
      options: {
        "type": "stock",
        "theme": "light",
        // "color": "#fff",
        "dataSets": [{

from amcharts3-react.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.