ZingChart-react with the selection-tool module

Asked
Active3 hr before
Viewed126 times

8 Answers

reactmodule
90%

I am able to render a ZingChart chart inside a React Component, but not sure how to do it with the selection-tool module.,The documentation on ZingChart website (https://www.zingchart.com/docs/tutorials/features/selection) is not mentioning how to do it from a React Component.,Connect and share knowledge within a single location that is structured and easy to search.

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      config: {
        type: 'bar',
        series: [{
          values: [4,5,3,4,5,3,5,4,11]
        }]
      }
    }
  }
  render() {
    return (
      <div >
        <ZingChart data={this.state.config}/>
      </div>
    );
  }

}
load more v
88%

This module will allow you to drag and highlight nodes on your chart. Because it's a module, it won't take up any KB on your page unless you are using it. Let's get to why you came here and tell you how it all works.,For bar charts, you would style something similar to this:,For line charts, you would style something similar to this:

<script src="cdn.zingchart.com/zingchart.min.js"></script>
<script>
   zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
</script>
load more v
72%

Pretag
 Pretag team - issue, fix, solve, resolve
65%

dist/modules/zingchart-selection-tool.min.js (removed),dist/modules/zingchart-svg-simple-selection.min.js (removed),dist/modules/zingchart-toolbar3d.min.js (removed)

test: fix test
for new build

No longer need to test modules folder output and no longer need to output modules to the dist folder
load more v
75%

List of NPM, Yarn or Github Commands and Packages details.

Pretag
 Pretag team - issue, fix, solve, resolve
40%

With Webpack, using static assets like images and fonts works similarly to CSS.,It is not required for React but many people enjoy it (and React Native uses a similar mechanism for images). An alternative way of handling static assets is described in the next section.,This ensures that when the project is built, Webpack will correctly move the images into the build folder, and provide us with correct paths.

my - app /
   README.md
node_modules /
   package.json
public /
   index.html
favicon.ico
src /
   App.css
App.js
App.test.js
index.css
index.js
logo.svg
load more v
22%

import {pareto} from 'zingchart/modules-es6/zingchart-pareto.min.js';,import {zingchart, ZC} from 'zingchart/zingchart-es6';,ES6 Version and Modules (https://cdn.zingchart.com/zingchart-es6.min.js | https://cdn.zingchart.com/modules-es6/)

https: //cdn.zingchart.com/zingchart.min.js
   https: //cdn.zingchart.com/modules/
load more v
60%

A collection of articles related to the ZingChart charting library., ZingChart

Pretag
 Pretag team - issue, fix, solve, resolve

Other "react-module" queries related to "ZingChart-react with the selection-tool module"