# Water silhouette (Unit example) > WestCoast Charts 1.1.5, release, public Core release, on npm. HTML: https://westcoast-charts.com/gallery/unit/water-silhouette/ · Index for agents: https://westcoast-charts.com/llms.txt Water use fills a drop. - Chart type: `unit` (Unit) - Collection: Unit · Unit & pictogram - Raw configuration: https://westcoast-charts.com/gallery-src/unit/water-silhouette.js - Standalone example: https://westcoast-charts.com/embed/samples/wcc/gallery/unit/water-silhouette.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: [120, 70, 40, 20], labels: ["Agriculture", "Industry", "Households", "Leakage"], colors: ["#1d4ed8", "#3b82f6", "#93c5fd", "#cbd5e1"], plotOptions: { unit: { positions: { name: "drop", category: "nature", kind: "silhouette", rings: [ [ [0.5, 0], [0.5005399205746639, 0.0010705383806982605], [0.5024739214513293, 0.004277569313094809], [0.506008529021618, 0.009607359798384785], [0.5112409609048898, 0.017037086855465844], [0.5182120997641304, 0.026534935252447156], [0.5269210835334535, 0.03806023374435663], [0.5373320573792079, 0.05156362923365587], [0.5493782262587233, 0.06698729810778065], [0.5629648114826815, 0.08426519384872738], [0.5779715501572975, 0.10332332985438242], [0.5942550290073859, 0.12408009626051131], [0.6116509953798599, 0.1464466094067262], [0.6299767162071321, 0.17032709244996552], [0.649033417331403, 0.19561928549563967], [0.6686088134970507, 0.22221488349019886], [0.6884797257733241, 0.24999999999999994], [0.7084147744454969, 0.27885565489049935], [0.7281771295968931, 0.3086582838174551], [0.7475272976630357, 0.33928026734841915], [0.766225919588553, 0.37059047744873963], [0.7840365545138734, 0.40245483899193585], [0.8007284219520158, 0.43473690388997416], [0.8160790750518537, 0.4672984353849285], [0.8298769776932235, 0.49999999999999994], [0.8419239587571885, 0.5327015646150716], [0.8520375179128941, 0.5652630961100257], [0.8600529586206458, 0.5975451610080641], [0.8658253257337624, 0.6294095225512604], [0.8692311270563733, 0.6607197326515807], [0.8701698204484482, 0.6913417161825448], [0.8685650505307752, 0.7211443451095005], [0.8643656216986526, 0.7499999999999999], [0.8575461969703229, 0.777785116509801], [0.8481077151405811, 0.8043807145043603], [0.8360775217467729, 0.8296729075500344], [0.8215092124483878, 0.8535533905932737], [0.804482190537297, 0.8759199037394887], [0.7851009433980546, 0.8966766701456175], [0.7634940457917115, 0.9157348061512727], [0.7398129008080865, 0.9330127018922194], [0.7142302321872718, 0.9484363707663441], [0.6869383444195964, 0.9619397662556434], [0.6581471695642614, 0.9734650647475528], [0.6280821220524087, 0.9829629131445341], [0.5969817848347506, 0.9903926402016152], [0.5650954520739603, 0.9957224306869052], [0.5326805551474808, 0.9989294616193017], [0.5000000000000001, 1], [0.4673194448525193, 0.9989294616193017], [0.4349045479260396, 0.9957224306869052], [0.4030182151652495, 0.9903926402016152], [0.3719178779475917, 0.9829629131445342], [0.34185283043573866, 0.9734650647475529], [0.31306165558040366, 0.9619397662556435], [0.2857697678127283, 0.9484363707663441], [0.26018709919191346, 0.9330127018922193], [0.23650595420828857, 0.9157348061512727], [0.21489905660194558, 0.8966766701456177], [0.19551780946270297, 0.8759199037394887], [0.17849078755161224, 0.8535533905932738], [0.16392247825322714, 0.8296729075500345], [0.15189228485941897, 0.8043807145043604], [0.1424538030296773, 0.7777851165098011], [0.1356343783013475, 0.7500000000000002], [0.13143494946922485, 0.7211443451095007], [0.12983017955155185, 0.6913417161825451], [0.1307688729436266, 0.6607197326515809], [0.13417467426623764, 0.6294095225512604], [0.13994704137935426, 0.5975451610080643], [0.14796248208710588, 0.5652630961100258], [0.1580760412428115, 0.5327015646150713], [0.1701230223067764, 0.5000000000000001], [0.1839209249481461, 0.4672984353849288], [0.19927157804798412, 0.4347369038899744], [0.2159634454861265, 0.40245483899193585], [0.23377408041144687, 0.37059047744873985], [0.2524727023369643, 0.33928026734841926], [0.27182287040310693, 0.30865828381745497], [0.291585225554503, 0.27885565489049946], [0.31152027422667594, 0.24999999999999994], [0.3313911865029492, 0.22221488349019908], [0.35096658266859704, 0.19561928549563973], [0.3700232837928679, 0.17032709244996547], [0.38834900462014, 0.14644660940672632], [0.40574497099261386, 0.12408009626051153], [0.4220284498427025, 0.10332332985438253], [0.43703518851731854, 0.08426519384872738], [0.4506217737412765, 0.06698729810778081], [0.46266794262079214, 0.05156362923365587], [0.47307891646654643, 0.03806023374435674], [0.4817879002358696, 0.02653493525244721], [0.48875903909511026, 0.017037086855465844], [0.49399147097838203, 0.00960735979838484], [0.49752607854867076, 0.004277569313094809], [0.4994600794253361, 0.0010705383806982605] ] ], source: "original", minUnits: 12, aspect: 0.8, order: "rowsUp", cx: undefined, cy: undefined, shape: { name: "drop", category: "nature", 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: "Water use (1 dot = 1 hm³)" }, 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-water-silhouette.json --out unit-water-silhouette.svg --with-table` (save the options above as JSON first)