Hey Guys, Welcome To Our Blog, In Today’s Blog We Are Going To See How To Create An 3d Chart Representation using HTML , CSS and JavaScript. 

3D Chart Using HTML, CSS, and JAVASCRIPT

A pie chart is simply an data representation of the formal companies data using colors for values with progress report. Most Of the big companies use these kind of representation to track their progress of data. Like wise we are going to create this project IN A 3D Formation.

So,  Let’s Begin Our Pie Chart Representation Project By Adding The Source Codes. For That, First, We Are Using The Html Code.

 

HTML CODE For PIE CHART

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<!-- this all link add in script="" tagm -->
<div id="chartdiv"></div>

Now We have added our HTML Code for the project. In This First We adding an div class with id and then we are adding an plugins for chart and for its animation and that is added using the java script tag.

So the chart and its animate properties were directly added without code. Now we adding CSS just for size and font arrangements.

CSS CODE For PIE CHART

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
        "Segoe UI Symbol";
}
#chartdiv {
    width: 100%;
    height: 500px;
}

Now The CSS code is also added. But for now we just adding font-family and adding width and height of the chart using the #chartdiv property.

JAVA SCRIPT CODE For PIE CHART

am4core.useTheme(am4themes_animated);
var chart = am4core.create("chartdiv", am4charts.PieChart3D);
chart.hiddenState.properties.opacity = 0;
chart.data = [
    { country: "Lithuania", litres: 501.9 },
    { country: "Czech Republic", litres: 301.9 },
    { country: "Ireland", litres: 201.1 },
    { country: "Germany", litres: 165.8 },
    { country: "Australia", litres: 139.9 },
    { country: "Austria", litres: 128.3 },
];
chart.innerRadius = am4core.percent(40);
chart.depth = 120;
chart.legend = new am4charts.Legend();
var series = chart.series.push(new am4charts.PieSeries3D());
series.dataFields.value = "litres";
series.dataFields.depthValue = "litres";
series.dataFields.category = "country";
series.slices.template.cornerRadius = 5;
series.colors.step = 3;

First In this Java Script code we are calling out the chart properties using a chart as an variable. then we fixing out the chart opacity to zero. As its an plugin we are directly adding values without separate properties.

Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)

Now the code of above explanation is down below.

am4core.useTheme(am4themes_animated);
var chart = am4core.create("chartdiv", am4charts.PieChart3D);
chart.hiddenState.properties.opacity = 0;

Second thing is we are adding data to every contents using data property and inside of data property we are adding separate country names with litres that will be displayed when we hover on it in a 3D formation.

chart.data = [
    { country: "Lithuania", litres: 501.9 },
    { country: "Czech Republic", litres: 301.9 },
    { country: "Ireland", litres: 201.1 },
    { country: "Germany", litres: 165.8 },
    { country: "Australia", litres: 139.9 },
    { country: "Austria", litres: 128.3 },
];

Now the last step is we are adding an code that is used to represent the data in a 3D form when hover on it. the code is looks like plugin call-out so there is no special property included.

Just calling out colors , data set , values etc…

chart.innerRadius = am4core.percent(40);
chart.depth = 120;
chart.legend = new am4charts.Legend();
var series = chart.series.push(new am4charts.PieSeries3D());
series.dataFields.value = "litres";
series.dataFields.depthValue = "litres";
series.dataFields.category = "country";
series.slices.template.cornerRadius = 5;
series.colors.step = 3;

 

FINAL OUTPUT Of PIE CHART 3D

Now We have Successfully created our 3D Pie Chart Using HTML , CSS and JAVASCRIPT. You can use this project for your personnel needs and the respective lines of code are given with the code pen section above.

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

REFER CODE – AG RM

WRITTEN BY – Ragunathan S