1 Replies - 330 Views - Last Post: 03 December 2019 - 02:21 PM

#1 MBANS7A1   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 31
  • Joined: 17-April 18

React JS error (parsing error:Unexpected token, expected ''}&

Posted 03 December 2019 - 02:16 PM

Hello, everyone I am using Node.js (npm) and I have some graphical code from ChartJs that I want to run. My index.js file gives the parsing error I mentioned in the topic title.

I have attached a picture of the error to the question as the img tags do not allow me to add the url.

Here is my code, am I missing a bracket anywhere:

class App extends React.Component{
      render(){
         return(<div>
          <div class="one"><canvas id="bar1"></canvas></div> 
	    <div class="two"><canvas id="line1"></canvas></div>
	    <div class="three"><canvas id="pie1"></canvas></div>
	    <div class="four"><canvas id="donut1"></canvas></div>
            <div class="five"><canvas id="scatter1"></canvas></div>
            <div class="six"><canvas id="radar1"></canvas></div>
            var ctx1 = document.getElementByID("bar1").getContext("2D");
            var myChart1 = new Chart(ctx1,{
                type:'bar',
                 data:{
                   labels:['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
		    datasets:[{
			label: '# of Marbles Selected',
			data:[4,12,8,5,1,2],
                        backgroundColor:[
			 'rgba(255, 99, 132, 0.2)',
               		 'rgba(54, 162, 235, 0.2)',
               		 'rgba(255, 206, 86, 0.2)',
                	 'rgba(75, 192, 192, 0.2)',
                 	 'rgba(153, 102, 255, 0.2)',
                         'rgba(255, 159, 64, 0.2)'
                         ],
			borderColor:['rgba(255, 99, 132, 1)',
                           'rgba(54, 162, 235, 1)',
                           'rgba(255, 206, 86, 1)',
                           'rgba(75, 192, 192, 1)',
                          'rgba(153, 102, 255, 1)',
                          'rgba(255, 159, 64, 1)'],
                        borderWidth: 1
                           }]
                          },
                       options:{
			 scales:{
                          yAxes:[{
                             ticks:{
				beginAtZero: true
                           }
                         }]
                        }
                      }
                   });
                var ctx2 = document.getElementByID("line1").getContext("2D");
		var myChart2 = new Chart(ctx2,{
		type:'line',
                data:{
                labels:['January','February','March','April','May','June'],
                datasets:[{
                  data[11, 19, 25, 37, 45, 56]
                        }
                     ]
                  },
               options:{
                 scales:{
                    xAxes:[{
                     ticks:{
                       min: 'March'
                      }
                    }]
                  }
                }
              });
             var ctx3 = document.getElementByID("pie1").getContext("2D");
		var myChart3 = new Chart(ctx3,{
		type:'pie', 
                data ={
                  labels:['Red','Green','Blue'],
                    datasets:[{
                     data:[30,60,10]
                     }],
                    }
                });
             var ctx4 = document.getElementByID("donut1").getContext("2D");
		 var myChart4 = new Chart(ctx4,{
                  type:'doughnut',
                  data:{
                  labels:['Orange','Yellow','Green'],
                  datasets:[{
                  data:[260,45,20]}]
                  },
                 options:{
		  animate.animateRotate=true;
                 }
               });
               var ctx5 = document.getElementByID("scatter1").getContext("2D");
		    var myChart5 = new Chart(ctx5,{
                      type:'scatter',
                       data:{
                        datasets:[{
                          label:'Scatter datapile',
                           data[{
                           x:-10,
                           y:0
                         }, {
                           x:0,
                           y:15
                         }, {
                          x:10,
                          y:11
                         },{
                          x:20,
                          y:17
                         }]
                      }]
                   },
                  options:{
                     scales:{
                       xAxes:[{
                          type:'linear',
                          position:'bottom'}]
                        }
                     }
                 });
 	  var ctx6= document.getElementByID("radar1").getContext("2D");
		 var myChart6 = new Chart(ctx6,{
                 type:'radar',
                 data: {
		 labels:['Programming','Drinking','Sleeping','Eating','Running'],
                 datasets: [{
                 data: [44,33,14,50,25]
                }]
               },
               options= {
                  scale:{
                    angleLines:{
                       display:false
                          },
                        ticks:{
                         suggestedMin:10,
                         suggestedMax:100
                      }
                    }
                  }
                });
       </script>
      </div>);
     }
   }/class

   export default App;


Oh yes, the error is on line 12 according to what the browser says to me (points at the colon); something wrong with type: 'bar' for the first Chart myChart1?

Is This A Good Question/Topic? 0
  • +

Replies To: React JS error (parsing error:Unexpected token, expected ''}&

#2 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15439
  • View blog
  • Posts: 61,865
  • Joined: 12-June 08

Re: React JS error (parsing error:Unexpected token, expected ''}&

Posted 03 December 2019 - 02:21 PM

Any particular reason you are missing the 'script' tag?
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1