Example 01:
Let’s get started with the most basic example of the HTML styling to create a Pie Chart on our HTML Webpage. This example starts with the basic html tags – html, head, style, and body. Before styling the HTML page, we need to take a look at all its elements via the body tag. The body of our html page contains a single heading of the largest size, i.e. h1. The heading follows the “div” element to create a new section within our page. The div element is specified with a “pieChartContainer” class and is closed after that. The body of this HTML page is completed here.
Now, we have a head that follows the “title” tag to give a name to our webpage. Within the CSS styling tag of this code, we use the “body” element to style all its elements combined first. All the bodies contain the background grey color. Now, we use the “pieChartContainer” class with the dot (.) character to create a pie chart. The div element containing this class is given a top margin of 30 pixels, block display, absolute position, width and height of 500 pixels, and border of a radius of 50 percent.
Along with that, we use the background-image property to create a pie chart with its “conic-gradient” attribute. We need to give the different values and colors for three conic sections of the pie chart for the x, y, and z directions. The total value of 3 conic sections with three axes – x, y, and z – defines the area for each section differently. Let’s close the style tag, save the code, and run this code within the Visual Studio Code.
The output of this HTML code shows a single heading and a pie chart displayed on the HTML webpage screen. The pie chart displays 3 conic sections within it with different colors and percentages.
Example 02:
Let’s get started with another example of HTML to create a pie chart of a new style. The very same HTML format is utilized in this file. We take a glance at the body area along with its styling for each element from the style tag of our code. The overall body background color is set to grey via the “background” property used for the “.body” element. The body of this HTML page contains a single heading of size 1 followed by the creation of a new “div” container specified by the “my-pie-chart-container” ID. The heading has no styling while this container display is flexed and the items are aligned to the center.
Within this main container, we create two other containers using the “div” element. The first “div” is classified by the “my-pie-chart” ID and the second “div” is classified by the “container” ID. The first “div” container with the “my-pie-chart” is used to create a pie chart in a circle shape. For this, use its “my-pie-chart” class with the “background” property in a style tag. The “conic-gradient” attribute is passed to the background property with different colors and their aspect ratio within percentage to display each color in the pie chart with selected percentage and area. The border-radius property for this pie chart is set to 50% with the 200px width and height.
Our pie chart is created in a circle shape. The second div with the “container” ID utilizes 8 more containers within it. The “div” container with the “container” ID contains a 30px left margin, tea pink background, and 5px padding. The 8 containers within this “Div” section are classified by the “entry” class that is styled with the flex display and center align items. Every “div” element of these 8 containers holds 2 more containers within it. The first container within each is classified with the “entry-color” class and inline styling adding the background color for each. The “entry-color” class for this first “div” is used to set the width and height for all 8 sections, i.e. 15px width and height for each.
The second div container is classified with the “entry-Title” along with the Title of a pie chart for each sectional area. The top and left margins for this section are set to 5px and 3px, respectively. All the 4 main “div” elements is closed here. Let’s save and run this code to see the pie chart result.
The output shows 1 heading and 1 pie chart with a container on the left side that displays the titles belonging to each color of the pie chart.
Example 03:
It starts with heading 1 of the largest size in HTML. Then, we have 5 “div” elements utilized for the 5 pie chart creation. We use the same name class for all the 5 div elements, i.e. class = “pie”. We use the styling within each div section to set the percentage value for each pie chart with the use of the “—p” character set to 20, 40, 95, 80, and 75. Along with that, the “—col” property is used to set the color for each pie chart except the first one, i.e. dark blue, purple, green, and yellow. The x, y, and z axes are set for all 4 pie charts other than the first one.
Let’s take a look at the style tag of this HTML page. We use the “pie” class to style the first div element with a percentage of 20 with the dark red color. Also “—b” border thickness, width, aspect ratio, display style, margins, and different font-related properties are utilized to create a standard pie chart shape. The before and after offsets are used to add no content and specify the position and border radius for the element before and after the “pie” class element. Some other transition, transform, and translate properties are utilized to style the pie charts.
The output for all 5 pie charts are displayed with 5 different colors and percentages.
Conclusion
This article demonstrates the immense use of diagrams and charts in different fields of computing and life in general like industrial, economical, online internet banking, eCommerce, and many more. We discussed the different HTML examples to illustrate the use of different and standard CSS styling properties that are used to create pie charts. All the examples show very different properties and yet quite different pie charts for the HTML pages.
