evdokimovm/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pie Chart</title>
</head>
<body>
    <div class="chart-container">
        <canvas id="myCanvas" width="300" height="300"></canvas>
        <div class="input-container">
            <div class="input-row">
                <label for="dataInput1"><span class="color-box" style="background-color: #FF6384;"></span></label>
                <input type="range" id="dataInput1" min="0" max="100" value="25">
            </div>
            <div class="input-row">
                <label for="dataInput2"><span class="color-box" style="background-color: #36A2EB;"></span></label>
                <input type="range" id="dataInput2" min="0" max="100" value="35">
            </div>
            <div class="input-row">
                <label for="dataInput3"><span class="color-box" style="background-color: #FFCE56;"></span></label>
                <input type="range" id="dataInput3" min="0" max="100" value="20">
            </div>
            <div class="input-row">
                <label for="dataInput4"><span class="color-box" style="background-color: #4BC0C0;"></span></label>
                <input type="range" id="dataInput4" min="0" max="100" value="10">
            </div>
            <div class="input-row">
                <label for="dataInput5"><span class="color-box" style="background-color: #9966FF;"></span></label>
                <input type="range" id="dataInput5" min="0" max="100" value="10">
            </div>
        </div>
    </div>
    <link rel="stylesheet" href="style.css">
    <script src="index.js"></script>
</body>
</html>

## index.js
var canvas = document.getElementById("myCanvas")
var ctx = canvas.getContext("2d")

var data = [25, 35, 20, 10, 10]
var colors = ["#FF6384", "#36A2EB", "#FFCE56", "#4BC0C0", "#9966FF"]

var centerX = canvas.width / 2
var centerY = canvas.height / 2
var radius = Math.min(centerX, centerY)

drawChart()

var inputs = document.querySelectorAll("input[type='range']")
inputs.forEach((input, index) => {
    input.addEventListener("input", () => {
        updateData(input, index)
    })
})

function updateData(input, index) {
    data[index] = Number(input.value)
    drawChart()
}

function drawChart() {
    ctx.clearRect(0, 0, canvas.width, canvas.height)

    var total = data.reduce((sum, value) => sum + value, 0)
    var startAngle = 0

    for (var i = 0; i < data.length; i++) {
        var angle = (data[i] / total) * Math.PI * 2

        ctx.fillStyle = colors[i]

        ctx.beginPath()
        ctx.moveTo(centerX, centerY)
        ctx.arc(centerX, centerY, radius, startAngle, startAngle + angle)
        ctx.closePath()
        ctx.fill()

        ctx.fillStyle = "#fff"
        ctx.font = "14px Arial"
        var textAngle = startAngle + angle / 2
        var x = centerX + (radius / 2) * Math.cos(textAngle)
        var y = centerY + (radius / 2) * Math.sin(textAngle)
        var percent = ((data[i] / total) * 100).toFixed(0)

        if (percent > 0) {
            ctx.fillText(`${percent}%`, x, y)
        }

        startAngle += angle
    }
}

## style.css
.chart-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.input-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.input-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 10px;
}

.color-box {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    border-radius: 50%;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Pie Chart</title>
	</head>
	<body>
	<div class="chart-container">
	<canvas id="myCanvas" width="300" height="300"></canvas>
	<div class="input-container">
	<div class="input-row">
	<label for="dataInput1"><span class="color-box" style="background-color: #FF6384;"></span></label>
	<input type="range" id="dataInput1" min="0" max="100" value="25">
	</div>
	<div class="input-row">
	<label for="dataInput2"><span class="color-box" style="background-color: #36A2EB;"></span></label>
	<input type="range" id="dataInput2" min="0" max="100" value="35">
	</div>
	<div class="input-row">
	<label for="dataInput3"><span class="color-box" style="background-color: #FFCE56;"></span></label>
	<input type="range" id="dataInput3" min="0" max="100" value="20">
	</div>
	<div class="input-row">
	<label for="dataInput4"><span class="color-box" style="background-color: #4BC0C0;"></span></label>
	<input type="range" id="dataInput4" min="0" max="100" value="10">
	</div>
	<div class="input-row">
	<label for="dataInput5"><span class="color-box" style="background-color: #9966FF;"></span></label>
	<input type="range" id="dataInput5" min="0" max="100" value="10">
	</div>
	</div>
	</div>
	<link rel="stylesheet" href="style.css">
	<script src="index.js"></script>
	</body>
	</html>
	var canvas = document.getElementById("myCanvas")
	var ctx = canvas.getContext("2d")

	var data = [25, 35, 20, 10, 10]
	var colors = ["#FF6384", "#36A2EB", "#FFCE56", "#4BC0C0", "#9966FF"]

	var centerX = canvas.width / 2
	var centerY = canvas.height / 2
	var radius = Math.min(centerX, centerY)

	drawChart()

	var inputs = document.querySelectorAll("input[type='range']")
	inputs.forEach((input, index) => {
	input.addEventListener("input", () => {
	updateData(input, index)
	})
	})

	function updateData(input, index) {
	data[index] = Number(input.value)
	drawChart()
	}

	function drawChart() {
	ctx.clearRect(0, 0, canvas.width, canvas.height)

	var total = data.reduce((sum, value) => sum + value, 0)
	var startAngle = 0

	for (var i = 0; i < data.length; i++) {
	var angle = (data[i] / total) * Math.PI * 2

	ctx.fillStyle = colors[i]

	ctx.beginPath()
	ctx.moveTo(centerX, centerY)
	ctx.arc(centerX, centerY, radius, startAngle, startAngle + angle)
	ctx.closePath()
	ctx.fill()

	ctx.fillStyle = "#fff"
	ctx.font = "14px Arial"
	var textAngle = startAngle + angle / 2
	var x = centerX + (radius / 2) * Math.cos(textAngle)
	var y = centerY + (radius / 2) * Math.sin(textAngle)
	var percent = ((data[i] / total) * 100).toFixed(0)

	if (percent > 0) {
	ctx.fillText(`${percent}%`, x, y)
	}

	startAngle += angle
	}
	}
	.chart-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	}

	.input-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	}

	.input-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-top: 10px;
	}

	.color-box {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-right: 10px;
	border-radius: 50%;
	}