ApexCharts React Tutorial to Implement Different Types of Charts | ApexCharts Examples | Apex Chart

hello guys welcome back in this video we will be exploring the epics charts to see how we can populate our data in different type of charts like bar chart pie chart line chart and donor chart etc and for that we will be using react apex charts npm package it has pretty much good weekly downloads and it is under the mit license and to install the package uh this is the command i have already installed it in a blank react js project so we can directly go to using it so right now i have a blank project which is which is showing nothing right now and we will be adding different type of charts here so let's start we're using the chart and it has chart has provided different type of props we can use like we can say which type of chart we want to see and we can provide the width and height of our charts suppose 600 and the type suppose bar and the height is suppose 600 again and then we have to provide the data which we want to be shown so in that that will be in type of series so in series it will be expecting of ah an array of objects and in each object we have to provide the name of the series and then the data so suppose we want to show the data of our company's revenues uh again different months so suppose uh we have a company one and it's data that will be the revenue uh in different months suppose in gen it has 100 in fab it has 200 and then i am just adding uh different numbers for suppose jan feb march apple major for six months all right so i have provided on the company one data so later on we will providing different companies data so for now let us stick with one and then we can provide different options to customize the charts so let us save it here uh with whatever default chart is populated so here you go so it has chosen the default color from the epic charts and it has drawn our data but whatever we have provided here right so let's start customizing it so first customize its color so to customize the color we have two options uh one is we can provide the coloring options as well as we can provide the color in in each of the series so let's try both of these so if we provide the color here so suppose we're going to say it is red save it sorry if once it is missing red here you go right and let's try it at different data of different companies so that we can provide different colors and company 2 and let's change the numbers so it looks good data okay let's copy these two let's make four companies one two and then three and then four and let's change their data as well suppose this one and changing just randomly all right so [Music] ah i have uh provided only the one color so it will be replicated for all of the companies right so let's add uh different colors suppose this one so it will we will choose first company will choose this color second this one and then repeats third fourth fifth sixth right it is doing right now so the second option is we can add the color here as well either we can provide the four color here for fourth company or we can provide the color for each of the company here so we have tried this option let's comment it and try the option to adding the color here as well so let's try a random color so for this one and comma is missing here and let's copy it and paste it here and comma is missing still let's copy with the comma okay and then let's change its color to suppose red okay and then let's change its color to you can see this one and let's change its color to let's change it to this one right save it here you go the four colors right so right now it is showing the data of each company as side by side and we can even stack it and for that we have to go to the options to different options available so that will be in the chart and it is stacked true right so here you go so it now it has shown the data and stacked right and you see right now okay if i hover on it it is showing the data but it is not viewable so let's try to fix it so let's say that our theme is not that chosen by default so let's say your theme is dark so that we can see our data right here you go we have chosen a blog theme and no i if i open it data is shown right and now if i go to this option it is showing the data but if you want to say that the this tooltip goes along with my mouse then we can customize that as well for the tooltip and we can see that follow the cursor true save it and now if i hover on it the it goes with the cursor right and now you can see that it is only showing the value 350 300 and 150 uh but it is not showing that it is actually the dollar value so we can customize that as well so that will be in data labels and in the formatter we will be provided the value and we can return a formatted value something like we show the dollar and then the value right save it and here you go it has shown the dollar here right for each of the bar and also we can change the color of these labels as well so that will be in under the style and then colors we need to provide the array of colors uh for color one two three and four so suppose and if we print only one it will be replicated for all of these and if suppose if i provide uh color suppose red it will be replicated all the way and suppose for this one that looks good for this one it does not look good so let's make it maybe white yeah looks good so first color second color again repeated first second so either we can provide the four color it will repeat itself right and also we can change its its font size as well so let's suppose oh looks 20 it's too big let's choose 16 yeah it looks reasonable okay so we can change the font size as well all right and we have updated added the dollar here but right now on the y axis we are showing also the dollar value and let's up update this that as well so on the y-axis and for the uh on the y-axis for the labels uh we can have add the formatter similar to we have provided here let's copy it the whole formatter and right and dollar value save it here you go dollar is added right and similarly we can add the the style as well so suppose we wanna say that its color is also supposed suppose let's set red here as well here you go or maybe white looks good okay but we can update the colors right and on the y axis you see that it is on show on that sorry on the x axis you see it is showing one two three four five and here we are actually want to show the months january feb march things like that so for that we will be updating the x axis prop and we will be providing the categories so the categories will be the first question will be chain then it should be fab then march and last john right save it here you go gentlemen but you see that the tick is not exactly over this one the gen 5 so we can add that as well so that is deep placement on these categories let's save it here you go right and also we can uh say that the labels on the axises and boxes what these are so on the x-axis the labels are months so actually the title all access is is is month all right here you go and we can even style it and for the color let's choose maybe zero f zero what is this green one okay and similarly on the y axis we can also add that on the y axis we are showing the amount right title and amount here you go right let's change it a little bit so that we see that we have updated it okay and uh on over uh here we have the legend and on over we see that each company's data and we can show this legend on the bottom or on the top or on the left or the right side so for that let's customize the legend and that is first is if you want to show it or not so if we make it false it will be hidden and if it make it true it will be shown and if it is shown so we can say that where we wanna show it bottom left or right so suppose we wanna uh see it on the right so it will be shifted to the right so okay let's make it uh bring it back to bottom okay all right and we have added the title on the accesses and the biases we can even add the overall title of the the the chart as well so let's add that title and it will have our text we want to say that bar chart suppose right here you go and uh let's make it a little bigger in the style font size let's say 30. yeah looks good and similarly we can add up detail uh detail of the bar chart as well we can say a subtitle subtitle it is again similar to the title we can provide the text you can say this chart shows data of shows revenue data of companies by month right here you go and let's change its color style color to suppose make it what is this one okay but we can change it uh i mean we can change it to anything all right and epic chart has provided us few tools so this is the zoom we can zoom in here you go and zoom out and this is the tool if we started we can zoom the selected area there you go if you don't want to zone the selected area we can zoom that right and to come back press the home button and we can also uh download the whole chart as a png svg or the csv file right okay so right now uh on the tooltip it looks good we are showing it all here here we can uh we can even customize these grids as well let's try to change their color as well so great and we can change even the rows or the columns and right now let's change only the border color of these lines so suppose let's make them red okay so here it looks right okay so we have updated uh almost everything here and this was for the bar chart and similarly we can we can draw the same data on different type of charts so suppose [Music] the other chart suppose we want to see this how it looks like on the area so here you go so this is how it looks like in an area chart all right and let's try how it looks like on a radar chart here you go this is how it looks like another and you know on the line chart this is how it looks like in a line chart so these different type of uh charts available for the same data set so let's get back to the bar chart okay save it okay so uh now let's try to add another type of chart uh like the pie chart or the donor charts so those are something circular charts okay let's add that and for that the type is by sorry by and with again we can say 600 right again 600 and for the series data we can say that actually we can provide the same data as something this one okay this is a series data and for the options okay here you go because we have not provided the labels so and this is the data for each of the series uh plotted on the pie chart so let's provide the labels as well so the labels will be an array of the months so let's copy those here okay here you go the jan 5 march april may okay so it is actually showing the percentage so total hundred percent and for giant 350 dollar fab 330 but it's right now you see it is not showing the dollar here so let's customize that so in the tooltip and and that will be the y value and in the formatter we will be getting the value and we will be returning similarly we have returned earlier the dollar and the video right or if i save it and come back you see dollar is added to the tooltip all right and if i overrun these it shows which pies it is right and similarly on this chart we can also add the title of the chart to test was by chart okay here we go and we can also update these colors as well so let's add colors if no those are not here okay let's hide the color and what else and let's try different colors and we have added four let's add six colors i'm just adding randomly okay looks like we have added here you go these are the colors wordpress but right now uh on some pies the data does not look good let's change it to zero zero zero maybe to see how it looks like yeah looks good now in all of the pies we can see the data or either we can customize the uh tooltip accordingly okay and this was the pie so we can if we change it to close donut and save it here you go the same chart plotted on the donut if you click on it it just make that enlarge a little bit to see to show which poi is selected right now right and we can change the background color of the charts as well so suppose we want to change this background color to something that we can say background to maybe something blue save it here you go right we have changed the background color and also we can change these bars rounded corners so let's try that that will be in plot options and for the bar chart we can say the border radius to maybe 14 yeah it has added the corner it is right and also we can change the width of these bars as well so that will be column width so we can say that suppose 30 it will reduce it and if we give it us for 60 so it is 60 bit all right and also we can change the direction of these labels as well suppose we want to so instead of horizontally we want to show them vertically so that will be in data labels and that is orientation so if we call it vertical it will make it this way and if we set it back to horizontal it will be back to what were originally right and one last thing we can do is that suppose if user has disabled all of these legends or there's no data in the chart and we want to show some message here we can do that as well so that will be no data option here and in that we can say the text was empty chart and let's save it and also we can style that as well so let's style and make that a little bigger so font size maybe 30 and let's add make it red color right and enable one of these and disable here you go empty chart and right all right so till now we have explored different type of charts like bar chart line chart and different area charts and we have explored how we can manipulate different data within the bars and how to manipulate the y-axis x-axis the legends the tooltip and also we explored the toner chart the pie chart and its tooltip as well and apply different colors foreground background text no data colors and no data text and also we added the overall title for the charts as well so that's it for us exploring the epics charts so if you have any question please let me know in the comments below and if you have enjoyed the video please hit like subscribe to my channel see you in next video thank you

Channel: CodeWithAamir

Views: 13,082

Keywords: react js, bar chart, pie chart, doughnut chart, custom chart, multiple charts, apex charts, area charts, line charts, chart tooltip, download chart, zoom chart, chart border, radar chart, charts axis, graph titles, apexcharts react, apexcharts, apex chart example, apexcharts examples, react apex chart, chart js no label, line graph, line graph examples, color chart, blank graph, charts empty, apex chart, apex graph, bar graph, chart data, column chart, line chart

Id: MK_52uhmcUc

Length: 27min 25sec (1645 seconds)

Published: Wed Aug 18 2021