Meta chart pie10/3/2023 ![]() ![]() moz-transform: rotate(100deg) /* Firefox */ webkit-transform: rotate(60deg) /* Safari and Chrome */ moz-transform: rotate(60deg) /* Firefox */ webkit-transform: rotate(30deg) /* Safari and Chrome */ moz-transform: rotate(30deg) /* Firefox */ Now rotate each piece based on their cumulative starting Opposite direction to hide the first part behind. * if it's part of a big piece, bring it back into the square */īig pieces will also need a second semicircle, pointed in the Push it out to the left of the containing box. Move transform origin to the middle of the right side. Give it the same dimensions as the regular piece. This is the actual visible part of the pie. Move this to a piece specific rule and remove the extra class NOTE: since this is only ever a single piece, you could Then make it a square, and ensure the transform origin is Unless the piece represents more than 50% of the whole chart. Move the transform origin to the middle of the left side.Īlso ensure that overflow is set to hidden. Make each pie piece a rectangle twice as high as it is wide. You can add a center label if you want, b doing something like this: You can customize from there, you can probably add the labels inside each slice like this: If you want 3 slices (50%, 40%, 10%), you have to sum the first 2 values to set the correct rotate attribute for the third one, the result would like like this: So for example, if you want a chart with 2 slices, one with 60% and another with 40%, the first will have -p:60, and the second will have: -p:40 rotate:0.60turn. The -p attribute in the div pie block is going to set it's size, and the rotate is going to set it's starting point. You can add as many slices as you want to, just by adding a new div class='pie no-round' inside the div class='graph'. Var chart = new ApexCharts(document.querySelector("#chart"), options) īackground: radial-gradient(farthest-side,var(-c) 98%,#0000) top/var(-b) var(-b) no-repeat,Ĭonic-gradient(var(-c) calc(var(-p)*1%),#0000 0) (Extra stuffs are removed with sparkline option): ![]() Here is a clean donut chart using apex-charts library. in apex-charts there is an option called sparkline, which helps you to remove the extra stuffs and draw a minimal and clean chart. Var m圜olor = įiddle (code is written based on this solution)īut it's better to use libraries for drawing charts. Var canvas = document.getElementById("can") ![]()
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |