Up next in 10
React.js Google Charts API Example to Plot Data With Different Charts in Browser Using JSX
Jun 3, 2025
Get the full source code of application here:
Watch My Visual Studio Code IDE Setup Video For Fonts,Themes & Extensions
https://youtu.be/Bon8Pm1gbX8
Hi Join the official discord server to resolve doubts here:
https://discord.gg/cRnjhk6nzW
Visit my Online Free Media Tool Website
https://freemediatools.com/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video uh
0:03
so in this video I will show you how to
0:04
integrate uh the Google
0:07
charts inside your react CH application
0:10
so there is a specific package that you
0:12
can integrate inside your react chice
0:14
application you can see we have
0:16
different types of charts here using our
0:20
data we have having bar charts we have
0:23
line charts we have scattered charts as
0:26
well so I will show you a complete
0:29
example
0:30
so first of all I'm using this module uh
0:33
if you don't
0:34
know just go to
0:36
npm gs.com just search for this react
0:41
Google
0:44
charts so this is actually the module
0:46
that I'm using the command is very
0:49
simple it uses the Google
0:53
charts it uses this Google charts API
0:57
and
0:58
uh it's completely free it has its own
1:02
website as well react gooogle charts.com
1:06
so simply install this by executing this
1:09
command guys now I will show you a
1:11
complete
1:12
example so we make this functional
1:15
component and uh first of all we need to
1:19
import this uh module by the import
1:22
statement so import
1:27
chart so like this using this import
1:31
statement we first of all import the
1:33
module after that we actually declare
1:36
some kind of
1:38
data we will have a
1:41
data we will have an
1:45
age and we will have a
1:51
weight we will have a set of values
1:54
right here which we will plot here 8 12
1:58
4 so we have a bunch of values that we
2:01
are
2:02
plotting let me just paste you can take
2:05
any sort of data that you want to plot
2:08
so now I will show you one by one the
2:12
different kinds of
2:14
charts that it supports so we give it a
2:17
width of
2:24
uh and inside this first of all I will
2:27
show you the scatter
2:32
chart and for this we'll be using the
2:35
component chart and here we need to
2:38
specify some
2:39
options so the first option is take is
2:42
the chart type and it actually scatter
2:47
chart and then it also takes the actual
2:52
data that you need to plot so our data
2:55
is located inside data and then we can
2:58
put the vid to be
3:02
100 and the height to be like 800 pixel
3:08
so it actually takes four options this
3:10
component what chart that you are
3:13
plotting so we are using scatter chart
3:15
then the data the width and the height
3:18
so if you refresh your
3:28
application so now what
3:31
happens we also need to pass this loader
3:45
function so we can basically pass a call
3:47
back function so whenever your chart is
3:50
loading we can pass this
3:53
text so it is saying to us unexpected
3:57
token I think I made a mistake right
4:00
paste
4:08
it so now you can actually see a
4:10
scattered chart
4:12
guys so we have the weight here that we
4:15
are plotting here according to the
4:18
age so you can see this is the scattered
4:21
chart similarly we can actually plot
4:24
more charts using this package so again
4:28
we can use the same component this time
4:31
we will
4:34
be uh using the line
4:37
chart so
4:39
here inside the chart
4:42
type here we pass line chart and then we
4:47
can provide a width of
4:54
uh you can provide the data here which
4:57
is so this time here we are providing
5:00
the line chart here so if you refresh
5:03
now you will see this is actually your
5:05
line
5:06
chart this is actually the line chart
5:10
similarly we change
5:15
this this
5:18
one changes to bar
5:23
chart so this is your bar chart here you
5:26
will see different kinds of charts are
5:28
there and lastly we it also
5:35
supports uh the column
5:43
chart so now you can see now we also
5:46
have the bar chart column wise so these
5:49
are the four different kinds of charts
5:51
that this package supports guys it's a
5:54
very handy package react Google charts
5:57
which integrates the Google charts AP
6:00
inside your uh react CHS application
6:03
it's a completely free module you can
6:05
easily use it inside your react CHS
6:07
application uh like this thank you very
6:10
much for watching this video and also
6:12
check out my website free mediat
6:14
tools.com which contains thousands of
6:17
tools regarding audio video and image
6:19
and I will be seeing you in the next
6:21
video
#Computers & Electronics
#Programming
#Software