Implementing your own easy pie chart without any additional library or tool
sounds extremely difficult?
Hmm… nope.
The short answer is, with CSS.
Especially with another gradient type for
the background property.
Basically, the conic-gradient.
This is a relatively new CSS function, which
creates an image consisting of a gradient
with color transitions rotated around a center
point, like this.
Instead of radiating from the center, like
the radial-gradient function.
That alone is excellent, but that's not enough
for me and maybe also not for you.
We wanna have a reusable component, a Vue.js
component, where we can dynamically provide
data for the pie chart.
And, of course, with a nice animation, if
the pie chart is rendered.
Let’s start right now.
What’s going on, my name is Mario, welcome
to another video.
If this is your first time here and you wanna
learn more about Vue JS or other related stuff,
start now by subscribing and clicking the
bell so you don't miss anything.
Now, how you can create an easy pie chart,
without any additional library or tool?
First, we have here the App.vue file and I
have already created the PieChart Component,
which is imported, registered and ready for
usage.
I provide here some data, the pie data, which
is defined here in the local state.
It’s an array of objects.
And each object has a color and a value.
The value is the percentage of how much from
the cake is used, in the end.
And at best, the sum of all parts is 100 percent.
Next, we have here some global CSS definitions.
Now let’s stick to the PieChart Component,
nothing is happening here yet.
But let’s do here the fancy stuff, now,
by creating a new div element
with the CSS class pie-chart.
And let me show you how this new gradient
function works, only with CSS.
A width of 300px would be nice, the height
as well, and we wanna have a pie so we need
a border-radius of 50 percent.
And a border would also be nice, for the final
touch.
And now the background property, where we
can use the conic gradient, and if you wanna
have several pieces, you can define for each
piece a color, second the position from the
center, in this case always zero.
And last how much angle should this section
take.
You can define here more pieces, with different
colors.
But the issue is, it’s a little issue, you
should define the angle here as an absolute
value, that means, you can’t write here,
30 percent, 40 percent, and 30 percent, for
example, instead you should write 30 percent
for the first, then if you wanna take 40 percent
for the second element, you need here 70 percent.
It’s the sum from the first two pieces.
And for the last, you need here 100 percent.
That means you take the rest of the 30 percent
from the cake.
Each piece is a different layer, that overlaps
each other in a z-index, in the end.
Ok, I save and let’s take a look.
Hmm…
We have here a nice pie chart, but with this
solution here it’s not very handful.
We wanna have a reusable component, where we can dynamically provide data
for the pie chart.
I comment this out, we don’t need it anymore.
And first, we should pick up the data with
props, and we get here the pie data.
Next, I wanna use the dynamic style binding
from Vue.js and I gonna bind a computed property,
‘pieStyle’ for example.
Let’s create this property here.
Now, we know the style binding here expects
an object, so I return an object.
And I gonna use the conic gradient, so I set here background as key,
and conic-gradient as value, this is a function.
And now, we need here our pie data and we
have to change this object with the color
and percentage to this pattern here.
For this, I wanna create styles, which receive
our pie data, but I wanna use the map function
to create new key-value pairs.
And for each element, we get here the object,
I name it ‘piePart’, and I wanna use template
literals with this backticks here, now we
can use embedded expressions.
And first I set the color as the first value,
then zero for the position,
it’s always zero and last the percentage.
But we need here the absolute value for the
pie, so I define a new variable and set it
to zero.
And I use it to add the current value to this
sum.
Last but not least, this is an object now,
but we need here a string in this case so
I use the join function with a comma for the
separation.
Time to save, and let’s take a look.
And nothing happens here, hmm.... there is
a bug, let’s take look.
Do you see the bug?
Ah, I have forgotten the percent character.
I save again.
Hmm… looks nice, it works.
Let’s create quickly the animation for our
pie chart by adding the property to the CSS class,
I name it simply show, with 1 second
as duration and ease-in-out animation.
Next, I define the keyframes, I wanna have
a scaling from zero to the natural width and height.
A rotation would also be nice.
So I use transform and set the scale to zero
and rotate to over 700 hundred degrees.
I copy this, change this one to one hundred
and set scale and rotate to the natural values.
I save.
Yeah, looks amazing.
With this solution have you a nice reusable
component, where you can render a pie chart
without any additional library or tool.
But there is a little issue, the conic gradient
works not with the firefox browser
at this moment.
I hope that it will be supported soon.
Thank you so much for watching.
I’ll see you next time.
