How to use vanilla javascript inside Reactjs component?

All we need is an easy explanation of the problem, so here it is.

I am using chartist.js and I am using the chartist within reactjs component.
I am referring this


var Chartist = {

(function (window, document, Chartist) {

var options = {
  labelInterpolationFnc: function(value) {
    return value[0]

var responsiveOptions = [
  ['screen and (min-width: 640px)', {
    chartPadding: 30,
    labelOffset: 100,
    labelDirection: 'explode',
    labelInterpolationFnc: function(value) {
      return value;
  ['screen and (min-width: 1024px)', {
    labelOffset: 80,
    chartPadding: 20


Reactjs component:

import React, { Component } from 'react';

var data = {
  labels: ['Bananas', 'Apples', 'Grapes'],
  series: [20, 15, 40]

     new Chartist.Pie('.ct-chart', data, options, responsiveOptions);

class Chart extends Component {

          <div className="center">



export default Chart;

Nothing is displayed on web page. How can I access vanilla javascript inside react component.

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

Your question is a little bit misleading, and can be interpreted in two ways.

#1. If you’re asking how to integrate Chartist library with React, here’s how you can do it:

There’s a wrapper library, that already did it for us:

You can use it as follow (example taken from their repo):

import React from 'react';
import ReactDOM from 'react-dom';
import ChartistGraph from 'react-chartist';

class Pie extends React.Component {
  render() {

    var data = {
      labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
      series: [
        [1, 2, 4, 8, 6, -2, -1, -4, -6, -2]

    var options = {
      high: 10,
      low: -10,
      axisX: {
        labelInterpolationFnc: function(value, index) {
          return index % 2 === 0 ? value : null;

    var type = 'Bar'

    return (
        <ChartistGraph data={data} options={options} type={type} />

ReactDOM.render(<Pie />, document.body)

#2. If you generally asking how to integrate other libraries into React, then I recommend you to check the official React docs, because there’s a really good tutorial about the topic – Integrating with Other Libraries

So, if you don’t want to use the wrapper library (react-chartist), then you can check its main component too. It’s a great starting point (that follows React recommendations) to understand how to create your own wrapper:

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply