Nothing Rendering on Web Page

modomodo commented 8 years ago

Hi!

First of all I really love this library's idea of combining ChartJS with React. However, I'm having trouble getting a simple Chart Component going. The problem is that nothing shows up on a web page, there are no errors related to the input of data into the component or any react errors, it simply doesn't show up. What exactly could I be missing? Is this an issue with the new React?

I'm currently using Browserify through the Gulp task runner to compile the JSX into JS and serve a server with gulp-connect

Here's my app.jsx

import React from 'react'; //For Browserify!
import ReactDOM from 'react-dom';
import Chart from 'chart.js';
import {Line, Bar, Radar, Doughnut} from 'react-chartjs';

Chart.defaults.global.responsive = true;

let data = {
    labels: [
        "15 Oct",
        "18 Oct",
        "21 Oct",
        "23 Oct",
        "27 Oct",
        "30 Oct",
        "3 Nov",
        "6 Nov",
        "9 Nov",
        "12 Nov",
        "15 Nov"
    ],
    dataSet: [
        {
            label: "New Signups",
            fill: false,
            lineTension: 0.1,
            borderColor: "#6bd486",
            // String or Array - Point fill color
            pointBackgroundColor: "#fff",
            // Number or Array - Stroke width of point border
            pointBorderWidth: 1,
            // String or Array - point background color when hovered
            pointHoverBackgroundColor: "#fff",
            // String or Array - Point border color when hovered
            pointHoverBorderColor: "#6bd486",
            // Number or Array - border width of point when hovered
            pointHoverBorderWidth: 2,
            data: [
                1000,
                1200,
                1000,
                1500,
                1300,
                1900,
                1700,
                2000,
                2100,
                2200,
                2400
            ]
        }, {
            label: "Returning Clients",
            fill: false,
            lineTension: 0.1,
            borderColor: "#157efb",
            // String or Array - Point fill color
            // pointBackgroundColor: "#fff",
            // Number or Array - Stroke width of point border
            pointBorderWidth: 1,
            // String or Array - point background color when hovered
            // pointHoverBackgroundColor: "#fff",
            // String or Array - Point border color when hovered
            pointHoverBorderColor: "#157efb",
            // Number or Array - border width of point when hovered
            pointHoverBorderWidth: 2,
            data: [
                500,
                600,
                550,
                600,
                800,
                900,
                800,
                850,
                800,
                1000,
                1200
            ]
        }
    ]
};

const options = {
  scaleShowGridLines: true,
  scaleGridLineColor: 'rgba(0,0,0,.05)',
  scaleGridLineWidth: 1,
  scaleShowHorizontalLines: true,
  scaleShowVerticalLines: false,
  bezierCurve: true,
  bezierCurveTension: 0.4,
  pointDot: true,
  pointDotRadius: 4,
  pointDotStrokeWidth: 1,
  pointHitDetectionRadius: 20,
  datasetStroke: true,
  datasetStrokeWidth: 2,
  datasetFill: true,
  legendTemplate: '<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>',
};

class SampleStats extends React.Component {
    render() {
        return <Line data={data} options={options} width="600" height="250"/>;
    };
}

ReactDOM.render(<SampleStats/>, document.getElementById('app'));

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <main id="app">

  </main>
  <script src="js/bundle.js"></script>
</body>
</html>

package.json

{
  "name": "react-chartjs-practice",
  "private": true,
  "version": "1.0.0",
  "description": " ",
  "main": "index.html",
  "dependencies": {
    "chart.js": "^1.1.1",,
    "react": "^15.0.1",
    "react-chartjs": "^0.7.2",
    "react-dom": "^15.0.1"
  },
  "devDependencies": {
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babelify": "^7.2.0",
    "browserify": "^13.0.0",
    "del": "^2.2.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-connect": "^3.2.2",
    "gulp-cssnano": "^2.1.2",
    "gulp-csso": "^2.0.0",
    "gulp-stylus": "^2.3.1",
    "gulp-util": "^3.0.7",
    "vinyl-source-stream": "^1.1.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

What is being rendered on the screen, nothing shows up but the component exists

dougmolineux commented 8 years ago

I think instead of dataSet it should be datasets inside your data object in app.jsx.

modomodo commented 8 years ago

@dougmolineux Thanks alot!! That was what I was missing! :+1:

reactjs / react-chartjs

Nothing Rendering on Web Page #111