# visualizer/3.3.0/classes/Visualizer/Gutenberg/src/Components/CreateCharts.js

Visualizer – Tables & Charts Manager with Built-in AI Generator, version 3.3.0. 71 lines.

- Page: https://pluginprobe.com/plugins/visualizer/3.3.0/code/classes/Visualizer/Gutenberg/src/Components/CreateCharts.js
- Raw: https://pluginprobe.com/plugins/visualizer/3.3.0/raw/classes/Visualizer/Gutenberg/src/Components/CreateCharts.js
- Modified: 2019-08-14T09:35:42+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/visualizer/3.3.0/code/classes/Visualizer/Gutenberg/src/Components/CreateCharts.js#L10-L20`.

```javascript
/**
 * External dependencies
 */
import classnames from 'classnames';

/**
 * WordPress dependencies
 */
const { startCase } = lodash;

const { __ } = wp.i18n;

const { apiFetch } = wp;

const {
	Component,
	Fragment
} = wp.element;

const {
	Button,
	Dashicon,
	Placeholder,
	Spinner
} = wp.components;

class CreateCharts extends Component {
	constructor() {
		super( ...arguments );
	}

	render() {

		return (
			<div className="visualizer-settings__charts">
				<div className="visualizer-settings__charts-grid">

					{ Object.keys( visualizerLocalize.charts ).map( i => {
						return (
							<div className="visualizer-settings__charts-single">
								<div className="visualizer-settings__charts-title">
									{ visualizerLocalize.charts[i].name }
								</div>

								<div
									className={ classnames(
										'visualizer-settings__create-charts',
										`type-box-${ i }`
									) }
								>
								</div>

								<div
									className="visualizer-settings__charts-controls"
									title={ __( 'Insert Chart' ) }

								>
									<Dashicon icon="upload"></Dashicon>
								</div>
							</div>
						);
					}) }

				</div>
			</div>
		);
	}
}

export default CreateCharts;

```