31:T5cc,picasso.chart({ element: document.querySelector('#container'), data, settings: { scales: { c: { data: { field: 'Sales' }, type: 'color' } }, components: [ { key: 'p', type: 'pie', data: { extract: { field: 'Year', props: { num: { field: 'Sales' } } } }, settings: { padAngle: 0.01, startAngle: (startAngle * 2 * Math.PI) / 360, endAngle: 2 * Math.PI + (startAngle * 2 * Math.PI) / 360, slice: { cornerRadius: 4, innerRadius: 0.5, arc: { ref: 'num' }, fill: { scale: 'c', ref: 'num' }, strokeWidth: 1, stroke: 'rgba(255, 255, 255, 0.5)' } } }, { type: 'labels', settings: { sources: [ { component: 'p', selector: 'path', strategy: { type: 'slice', settings: { direction: rotate ? 'rotate' : 'horizontal', labels: [ { label: d => d.data.label, fill: position === 'into' ? '#fff' : '#444', placements: [{ position }] } ] } } } ] } } ] } })32:[] 2f:{"title":"Donut chart with labels","cells":[{"id":0,"value":"md`# Donut chart with labels`","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"viewof position = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"viewof rotate = {\n const form = html``;\n form.oninput = () => (form.value = form.r.checked);\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"viewof startAngle = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"data = {\n var arr = [['Year', 'Sales', 'Budget']];\n\n for (var i = 0; i < 30; i++) {\n arr.push([String(2010 + i), parseFloat((Math.random() * 1000).toFixed(0))]);\n }\n\n return [\n {\n type: 'matrix',\n data: arr\n }\n ];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"picasso = require(\"picasso.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}