SVG Stroke Pie Chart

Developer
Mark Thomes
Size
10,209 Kb
Views
36,432
  1. SVG Stroke Pie Chart Previews
  2. SVG Stroke Pie Chart HTML Codes
  3. SVG Stroke Pie Chart CSS Codes
  4. SVG Stroke Pie Chart JS Codes

How do I make an svg stroke pie chart?

SVG Pie Chart. No JS library. Used stroke, stroke-width, stroke-dasharray, & stroke-dashoffset to create the pie slices.. What is a svg stroke pie chart? How do you make a svg stroke pie chart? This script and codes were developed by Mark Thomes on 06 November 2022, Sunday.

SVG Stroke Pie Chart Previews
IQ Test

SVG Stroke Pie Chart - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Stroke Pie Chart</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='css/7534eb3fb62294822de9eace9.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Pie Chart container -->
<div class="pieChart js-pieView" data-value="50"> <!-- Pie Chart SVG --> <svg xmlns="http://www.w3.org/2000/svg" width="80" height="63.66196" class="pieChart-svg" viewBox="0 0 63.66196 63.66196"> <defs> <linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="100%"> <stop stop-color="rgba(0, 0, 0, 0)" offset="0"/> <stop stop-color="rgba(0, 0, 0, 0.38)" offset="1"/> </linearGradient> </defs> <g transform="rotate(-90 31.83098 31.83098)"> <!-- Background circle --> <circle class="pieChart-svg-bkg" cx="31.83098" cy="31.83098" r="31.83098"/> <!-- Pie Chart slises --> <g class="pieChart-svg-slices js-pieView-list"> </g> </g> <circle class="pieChart-svg-overlay" cx="31.83098" cy="31.83098" r="31.83098" fill="url(#gradient)" transform="rotate(45 31.83098 31.83098)"/> </svg> <!-- END - Pie Chart SVG --> <div class="pieChart-key js-pieView-keys"></div>
</div>
<!-- END - Pie Chart container --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/15979/footer-inject.js'></script> <script src="js/index.js"></script>
</body>
</html>

SVG Stroke Pie Chart - Script Codes CSS Codes

.pieChart { position: absolute; width: 100%; max-width: 256px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 50%; box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.26);
}
.pieChart:before { content: ""; display: block; width: 100%; padding-bottom: 100%;
}
.pieChart-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.pieChart-svg { width: 100%; height: 100%;
}
.pieChart-svg-bkg { fill: rgba(0, 0, 0, 0.1);
}
.pieChart-svg-slices > * { fill: none; stroke-width: 31.83098; stroke-dasharray: 100;
}
.pieChart-svg-slices-item_1 { stroke: #32DBFF;
}
.pieChart-svg-slices-item_2 { stroke: #2CD664;
}
.pieChart-svg-slices-item_3 { stroke: #00B2BE;
}
.pieChart-svg-slices-item_4 { stroke: #FE5C3F;
}
.pieChart-svg-slices-item_5 { stroke: #E4E230;
}
.pieChart-key { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.pieChart-key-item { position: absolute; top: 0; left: 50%; width: 1px; height: 100%;
}
.pieChart-key-item-value { position: absolute; top: calc(25% - 1rem); left: 0; font-size: 16px; color: white; font-weight: bold;
}
.pieChart-svg-slices-item { -webkit-transition: -webkit-transform 1000ms linear; transition: -webkit-transform 1000ms linear; transition: transform 1000ms linear; transition: transform 1000ms linear, -webkit-transform 1000ms linear;
}

SVG Stroke Pie Chart - Script Codes JS Codes

'use strict';
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
// Don't need a library...
var pieArray = [0.1, 0.4, 0.3, 0.075, 0.125];
/** * @class PieView * @constructor **/
var PieView = function () { function PieView($element, array) { _classCallCheck(this, PieView); this.$element = $element; this.chartValues = array; if (this.chartValues.length > 5) { console.warn('Max slice count is 5. You submitted ' + this.chartValues.length); return; if (this.chartValues.reduce(this._add, 0) > 1) { console.warn('Values exceed 100%'); return; }; }; this.init(); } /** * Initialize view * * @method init * @public */ PieView.prototype.init = function init() { this.createChildren().enable(); }; /** * Create child elements * * @method createChildren * @public */ PieView.prototype.createChildren = function createChildren() { this.pieList = this.$element.find('.js-pieView-list'); this.pieKeys = this.$element.find('.js-pieView-keys'); return this; }; /** * Enable view & kick of render * * @method enable * @public */ PieView.prototype.enable = function enable() { this._renderSlices(); return this; }; /** * Convert percentages to usable slice properties * * @method _getSliceProperties * @returns {Object} * @private */ PieView.prototype._getSliceProperties = function _getSliceProperties() { var sliceObject = []; for (var i = 0; i < this.chartValues.length; i++) { sliceObject.push({ num: i + 1, val: this.chartValues[i], percent: 100 * this.chartValues[i], inverse: 100 - this.chartValues[i] * 100, offset: i === 0 ? 0 : sliceObject[i - 1].offset + 360 * this.chartValues[i - 1] }); } return sliceObject; }; /** * Render svg shapes to svg and update DOM * * @method _renderSlices * @private */ PieView.prototype._renderSlices = function _renderSlices() { var slices = this._getSliceProperties(); for (var i = 0; i < this.chartValues.length; i++) { this.pieList.append(this._sliceTemplate(slices[i])); this.pieKeys.append(this._keyTemplate(slices[i])); } // Refresh DOM // stackoverflow.com/questions/3642035/jquerys-append-not-working-with-svg-element#13654655 this.$element.html(this.$element.html()); }; /** * Creates svg shape object pased on shape properties * * @method _sliceTemplate * @param {Object} object * @returns {Object} * @private */ PieView.prototype._sliceTemplate = function _sliceTemplate(object) { // Build circle markup based on object passed in var circleTemplate = '<circle class="pieChart-svg-slices-item pieChart-svg-slices-item_' + object.num + '" data-slice="' + object.num + '" cx="31.83098" cy="31.83098" r="15.91549" stroke-dashoffset="' + object.inverse + '" transform="rotate(' + object.offset + ' 31.83098 31.83098)"></circle>'; return circleTemplate; }; /** * Creates key item that is rotated to center itself over the slice * * @method _keyTemplate * @param {Object} object * @returns {Object} * @private */ PieView.prototype._keyTemplate = function _keyTemplate(object) { /* `rotate` represents the center of the pie slice ((360 * object.val) / 2) <- Half the slice [((360 * 0.1) / 2) = 18] object.offset <- rotational value to offset slice combined to give value for key rotation pieChart-key-item-value is negative rotate value level the value display */ var rotate = 360 * object.val / 2 + object.offset; var keyTemplate = '<div class="pieChart-key-item" style="transform: rotate(' + rotate + 'deg)"><div class="pieChart-key-item-value" style="transform: translate(-50%) rotate(-' + rotate + 'deg)">' + object.percent + '%</div></div>'; return keyTemplate; }; PieView.prototype._add = function _add(a, b) { return a + b; }; return PieView;
}();
var $pie = $('.js-pieView');
var pieView = new PieView($pie, pieArray);
/* _____ _ _ | __ \ | | | | |__) |___ | | | | _ // _ \| | | | | \ \ (_) | | | |_| \_\___/|_|_| \ \ / / \ \_/ /__ _ _ _ __ \ / _ \| | | | '__| | | (_) | |_| | | |_|\___/ \__,_|_| / __ \ | | | |_ ___ __ | | | \ \ /\ / / '_ \ | |__| |\ V V /| | | | \____/ \_/\_/ |_| |_|
*/
SVG Stroke Pie Chart - Script Codes
SVG Stroke Pie Chart - Script Codes
Home Page Home
Developer Mark Thomes
Username WithAnEs
Uploaded November 06, 2022
Rating 3
Size 10,209 Kb
Views 36,432
Do you need developer help for SVG Stroke Pie Chart?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mark Thomes (WithAnEs) Script Codes
Name
SVG Search...
Running Character
CSS3 Gradient Stripes
Sidebar Nav
Up Arrow
Sloshing Beaker
Aperture
CSS Books
Save Bar
Animation Delay Debug
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!