2d:null 2e:["$","title",null,{"children":"Donut chart with labels | Miralem Drek | Observable"}] 33: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 }] } ] } } } ] } } ] } })34:[] 31:{"id":"6f7965816e040872","slug":"donut-chart-with-labels","title":"Donut chart with labels","thumbnail":"6115492efa8ab173fd68fef074ce4bc04ba9c387b8530abca128210414008401","access_level":"public","create_time":"$D2019-10-31T11:11:07.154Z","update_time":"$D2025-12-03T13:31:10.379Z","view_time":null,"first_public_time":"$D2019-10-31T11:43:32.122Z","fork":{"id":"31e87f6d7869a4dc","slug":"picasso-js-donut-chart","title":"Donut chart","owner":{"id":"28f613bb9ce5d0b7","login":"miralemd","name":"Miralem Drek"}},"stars":2,"starred":false,"owner":{"type":"team","id":"28f613bb9ce5d0b7","login":"miralemd","name":"Miralem Drek","avatar_url":"https://avatars-next.observableusercontent.com/a5628f06f68bf111e4f498f6def88cb5371ba2b560eee7dc4f2a113abaa685e8","tier":"starter_2024"},"version":161,"publish_version":161,"role":null,"authored":false,"authors":[{"type":"individual","id":"b60aebf3db8d7639","login":"miralemd","name":"Miralem Drek","avatar_url":"https://avatars-next.observableusercontent.com/a5628f06f68bf111e4f498f6def88cb5371ba2b560eee7dc4f2a113abaa685e8","tier":null}],"members":[{"type":"individual","id":"b60aebf3db8d7639","login":"miralemd","name":"Miralem Drek","avatar_url":"https://avatars-next.observableusercontent.com/a5628f06f68bf111e4f498f6def88cb5371ba2b560eee7dc4f2a113abaa685e8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":11,"collection":{"id":"276ea8b92642e19e","slug":"picasso-js","title":"picasso.js","owner":{"id":"28f613bb9ce5d0b7","login":"miralemd","name":"Miralem Drek"}},"type":"notebook","body":{"title":"Donut chart with labels","cells":[{"id":0,"value":"md`# Donut chart with labels`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"viewof position = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"viewof startAngle = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"picasso = require(\"picasso.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"