# Heart donors (Unit example) > WestCoast Charts 1.1.5, release, public Core release, on npm. HTML: https://westcoast-charts.com/gallery/unit/heart-donors/ · Index for agents: https://westcoast-charts.com/llms.txt Donors fill a heart outline from the bottom up. - Chart type: `unit` (Unit) - Collection: Unit · Unit & pictogram - Raw configuration: https://westcoast-charts.com/gallery-src/unit/heart-donors.js - Standalone example: https://westcoast-charts.com/embed/samples/wcc/gallery/unit/heart-donors.html ## Setup ```js import WestCoastCharts from 'west-coast-charts' import types from 'west-coast-charts/types' WestCoastCharts.use(types) ``` ## Options ```js const options = { chart: { height: 420, fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif", type: "unit", toolbar: { show: false } }, series: [212, 96, 52], labels: ["Registered donors", "Pledged", "Considering"], colors: ["#e11d48", "#fb7185", "#fecdd3"], plotOptions: { unit: { positions: { name: "heart", category: "symbol", kind: "silhouette", rings: [ [ [0.5, 0.23918296388485655], [0.5000716754610751, 0.23724460289642801], [0.5005710494285016, 0.23149220524759123], [0.5019141119226432, 0.22211175802366132], [0.5044937275201006, 0.20940642052029762], [0.5086687942651268, 0.19378656200731798], [0.5147542485937369, 0.17575633669166946], [0.5230121655559417, 0.15589729283331347], [0.5336441766165309, 0.13484962021667443], [0.5467853948279379, 0.11329172337985652], [0.5625, 0.09191886393058121], [0.5807785955562429, 0.07142164183763547], [0.6015374050727832, 0.05246508189870114], [0.6246193311201431, 0.03566905801450433], [0.6497968530877034, 0.02159072603541099], [0.6767766952966369, 0.010709548533563245], [0.7052061530174637, 0.003415385668166209], [0.7346809230789206, 1.2286204960321479e-16], [0.7647542485937369, 0.0006521849899423734], [0.7949471548495051, 0.005456582744412822], [0.8247595264191645, 0.014396112305382316], [0.8536817547006668, 0.027357791327296307], [0.8812066709128437, 0.04414160693919455], [0.906841472403894, 0.06447198102266503], [0.9301193501472417, 0.08801128536445306], [0.9506105325067191, 0.11437479656352005], [0.9679324745720457, 0.14314644152462408], [0.9817589432467226, 0.17389467304420972], [0.9918277752999967, 0.20618783139126412], [0.9979471181073574, 0.2396083907303649], [1, 0.27376555643554484], [0.9979471181073574, 0.30830576750485966], [0.9918277752999968, 0.34292076325559884], [0.9817589432467225, 0.3773529904413657], [0.9679324745720457, 0.4113982506159174], [0.9506105325067191, 0.4449056124875389], [0.9301193501472418, 0.4777747346970444], [0.906841472403894, 0.50995085570783], [0.8812066709128439, 0.541417804598098], [0.8536817547006669, 0.5721894654605443], [0.8247595264191645, 0.602300185667084], [0.7949471548495051, 0.6317946522571253], [0.7647542485937369, 0.6607177700434798], [0.7346809230789209, 0.6891050596994714], [0.7052061530174639, 0.7169740551958603], [0.676776695296637, 0.7443171196416565], [0.6497968530877033, 0.7710960199313128], [0.624619331120143, 0.7972385074864725], [0.6015374050727833, 0.8226370492888643], [0.580778595556243, 0.8471497452224057], [0.5625, 0.8706033595487687], [0.5467853948279379, 0.8927982911546671], [0.5336441766165309, 0.9135152137786867], [0.5230121655559417, 0.9325230380099238], [0.5147542485937369, 0.9495877850308547], [0.5086687942651269, 0.9644819205961926], [0.5044937275201006, 0.9769936783839674], [0.5019141119226432, 0.9869359053761616], [0.5005710494285016, 0.9941539880114835], [0.5000716754610751, 0.9985324651439826], [0.5, 1], [0.49992832453892494, 0.9985324651439826], [0.4994289505714984, 0.9941539880114835], [0.49808588807735676, 0.9869359053761616], [0.4955062724798994, 0.9769936783839674], [0.4913312057348732, 0.9644819205961929], [0.4852457514062631, 0.9495877850308547], [0.47698783444405835, 0.9325230380099239], [0.4663558233834692, 0.9135152137786868], [0.45321460517206236, 0.8927982911546674], [0.43749999999999994, 0.8706033595487687], [0.41922140444375705, 0.8471497452224058], [0.3984625949272168, 0.8226370492888643], [0.3753806688798571, 0.7972385074864725], [0.3502031469122966, 0.7710960199313128], [0.32322330470336313, 0.7443171196416565], [0.29479384698253647, 0.7169740551958608], [0.26531907692107903, 0.6891050596994712], [0.23524575140626325, 0.66071777004348], [0.20505284515049482, 0.6317946522571252], [0.17524047358083583, 0.6023001856670843], [0.1463182452993333, 0.5721894654605444], [0.11879332908715612, 0.541417804598098], [0.09315852759610616, 0.5099508557078304], [0.06988064985275833, 0.47777473469704457], [0.049389467493280936, 0.44490561248753874], [0.032067525427954546, 0.4113982506159178], [0.018241056753277474, 0.3773529904413657], [0.008172224700003394, 0.3429207632555994], [0.0020528818926424663, 0.3083057675048595], [0, 0.273765556435545], [0.0020528818926424663, 0.23960839073036544], [0.008172224700003394, 0.20618783139126384], [0.018241056753277307, 0.17389467304420983], [0.032067525427954546, 0.14314644152462402], [0.04938946749328077, 0.11437479656352036], [0.06988064985275816, 0.08801128536445313], [0.09315852759610599, 0.06447198102266491], [0.11879332908715601, 0.044141606939194736], [0.14631824529933313, 0.027357791327296495], [0.17524047358083555, 0.014396112305382316], [0.2050528451504946, 0.0054565827444128835], [0.23524575140626303, 0.0006521849899423734], [0.2653190769210788, 0], [0.29479384698253647, 0.00341538566816627], [0.323223304703363, 0.010709548533563306], [0.3502031469122962, 0.02159072603541087], [0.3753806688798571, 0.03566905801450446], [0.39846259492721664, 0.05246508189870095], [0.4192214044437571, 0.07142164183763547], [0.43749999999999983, 0.09191886393058103], [0.45321460517206213, 0.11329172337985634], [0.46635582338346915, 0.13484962021667438], [0.4769878344440583, 0.15589729283331344], [0.4852457514062631, 0.17575633669166935], [0.49133120573487316, 0.19378656200731809], [0.49550627247989937, 0.20940642052029754], [0.49808588807735676, 0.2221117580236614], [0.4994289505714984, 0.23149220524759107], [0.49992832453892494, 0.23724460289642804] ] ], source: "original", minUnits: 12, aspect: 1.1, order: "rowsUp", cx: undefined, cy: undefined, shape: { name: "heart", category: "symbol", kind: "silhouette", minUnits: 12, order: "rowsUp", source: "original" }, with: e=>St({...t,...e||{}}), outlined: function outlined(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:.16;const n=t.rings.map(t=>{const n=t.reduce((t,e)=>t+e[0],0)/t.length,a=t.reduce((t,e)=>t+e[1],0)/t.length;return t.map(t=>{let o=b(t,2);return[n+(o[0]-n)*(1-e),a+(o[1]-a)*(1-e)]})});return St({...t,name:t.name+"-outlined",kind:"stroke",rings:t.rings.concat(n)})}, fill: (t,n)=>wt(e,t,n), isUnitShape: true } } }, title: { text: "Organ donor survey (360 people)" }, theme: { mode: "light", preset: "coastal" } } const chart = new WestCoastCharts(document.querySelector('#chart'), options) await chart.render() ``` ## Verify - Text check (Library 1.1.5): load `west-coast-charts/agent/describe` and call `chart.describe({ format: "json" })` for the actual drawn state. The live reader is on this example’s HTML page. - Command line (Public agent tools 0.2.3, tested with Library 1.1.5; available from the versioned GitHub release and npm, https://westcoast-charts.com/docs/cli/index.md): `wcc chart export unit-heart-donors.json --out unit-heart-donors.svg --with-table` (save the options above as JSON first)