Pie charts are common components that let you show portions of a whole, and you can use them for many different purposes. Show You will find a lot of articles around building such a component, but they typically either rely on SVG or a lot of HTML elements. In this post, I will show you how to create a pie chart using CSS and only one element. Below is an overview of what we are building: Click to see the full codeAs you can see in the CodePen above, we have a static pie chart, an animated one, and we can also have rounded edges. All this with a single In addition to that, we can easily adjust the different values using CSS variables so we don't have to bother ourselves with changing the CSS code. I know the code may look a bit difficult at first glance, but after reading through the explanation below you will be able to confidently make your own pie charts. The HTML Structure for the Pie ChartAs I mentioned above, we have a single We also add the CSS variables as inline styles.
For the sake of this article and the demo, I am using a one-character variable to keep the code short. But it's better to consider more explicit variables when using the code in a production environment. Examples: The CSS Setting for the Pie ChartWe first start by styling our content. This part is easy and the code is as follows: I am defining the element as You may wonder why I am using a variable to define the width instead of simply setting All the remaining CSS is pretty basic to style the text. Feel free to update it as you want. Let's move on to the interesting part – the main shape of our component. For this, we will use a pseudo element with the following styles: A pseudo-element that has Then we make it a circle ( Until now, this will give us the following result:  We are getting closer! The To keep only the border part we will use a The above applied as a background will give us the following: Note the use of the variable Now imagine the red part being the invisible part and the blue part the visible one. This is what we will get if we use the same gradient with the We have our pie chart with one element and a few lines of CSS code. And the HTML: How to add the the rounded edgesFor this I will add an extra gradient layer to round the top edge and a pseudo element to round the other edge. Here is an illustration to understand the trick: The code for (1) to round the top edge: In addition to the The code for (2) to round the other edge: The this means that from each side we are moving to the center minus an offset equal to Now we need to correctly place our element, which is why we use the transform property. Our element is initially placed at the center so we need to first rotate it. Having the percentage we use the "" to get the angle: Then we do a translation, and here we will need the width because we have to perform a translation by half the width ( Ok, ok – you might be a bit lost within all these formulas. Find below an illustration to understand the logic behind the transform property After that, we color the pseudo-element with the main color How to Animate the Pie ChartA static pie chart is good but an animated one is better! To do this we will animate the percentage value We register the variable: We create a Note that we only need to specify the And finally, we call the animation. You can define the duration/delay as you want. Unfortunately, this technique is not widely supported. You can test it on Chromium-based browsers (Chrome and Edge) but it will fail on Firefox and Safari. You can check out Can I Use to keep track of the support. Before we end, here again is the full code and a demo of the final working product. You can see that I am using two classes to control the rounded edges and the animation so we can easily add/remove them as needed. Thank you for reading! For more CSS tips, follow me on Twitter. ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT A CSS Hacker If you read this far, tweet to the author to show them you care. Tweet a thanks Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started How to make pie chart in HTML?You can create a Pie Chart in HTML using a simple CSS function called conic-gradient . First, we add a <div> element to our HTML page, which acts as a placeholder for our pie chart. And finally we are ready to populate the pie chart with our data.
How to create pie chart in CSS?The CSS Setting for the Pie Chart
We use aspect-ratio: 1 to make sure the element remains square. We can also use height: var(--w) but it's always good to learn and use a new CSS property. You may wonder why I am using a variable to define the width instead of simply setting width: 150px .
How to create charts in HTML?For creating the chart, we must initialize the chart class and our canvas element and "2D" drawing context and call the pie method.. <! Doctype HTML>. <html>. <head>. <title>Pie Chart</title>. <script src="js/Chart.min.js"></script>. </head>. <body>. <canvas id="pieChartLoc" height="300" width="300"></canvas>. How do you make a pie chart using JavaScript in HTML?Creating JavaScript Pie Chart. Create an HTML page. The very first thing you need to do is to create a file in which you will put your chart later. ... . Reference all necessary files. The second step is about adding links into the <head> section. ... . Put the data together. ... . Write the chart code.. |
HTML pie chart
Pos Terkait
Copyright © 2023 apayangkamu Inc.
