Skip to content
Official JSCharting Samples for React
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.babelrc
.gitignore
README.md
package-lock.json
package.json
webpack.config.js

README.md

JSCharting: Any Chart. Anywhere.

JSCharting is a JavaScript chart library for visualizing your data, providing resolution independent results across all devices and platorms. Every JSCharting license includes the full suite of 150+ advanced chart types, interactive stock charts and JSMapping at no additional charge.

Official JSCharting Samples for React

This set of samples demonstrate how to use JSCharting with React library. Samples are located in the src/components/samples folder.

How to use

Install the necessary packages including JSCharting.

npm install

Run the webpack dev server: localhost:8080

npm run start

Or build the dashboard manually.

npm run build

Or.

npm run build-prod

How it works

The webpack build copies all needed resources to the ./dist/ folder. A component of the charting library is created in ./src/components/shared/jscharting.component.jsx to provide a simple way of library usage.

import React from 'react';

import JSCharting from '../shared/jscharting.component.jsx';

const config = {
	...
};

export default class AppComponentComponent extends React.Component {
	constructor(props) {
		super(props);
		this.state = { config: config };
	}

	componentDidMount() {
		fetch('./assets/resources/events_data.csv')
				.then((response) => {
					return response.text();
				})
				.then((text) => {
					const data = parseCsv(text).data;
					config.series = [{
						points: data.map(function (row) {
							...
						})
					}];

					this.setState({ config: config });
				})
				.catch((error) => {
					console.error(error);
				});
	}

	render() {
		return (
			<div>
				<JSCharting {...config}></JSCharting>
			</div>
		);
	}
}

Please see full samples in the src/components/samples folder.

You can’t perform that action at this time.