# Drilldown with zoom (Drilldown example) > WestCoast Charts 1.1.5, release, public Core release, on npm. HTML: https://westcoast-charts.com/gallery/drilldown/column-drilldown-zoom/ · Index for agents: https://westcoast-charts.com/llms.txt Weeks drill into hours; the hourly level is a zoomable time series. - Chart type: `bar` (Bar) - Collection: Drilldown · Drilldown - Raw configuration: https://westcoast-charts.com/gallery-src/drilldown/column-drilldown-zoom.js - Standalone example: https://westcoast-charts.com/embed/samples/wcc/gallery/column/column-drilldown-zoom.html - Same example as: https://westcoast-charts.com/gallery/column/column-drilldown-zoom/index.md ## Setup ```js import WestCoastCharts from 'west-coast-charts' import types from 'west-coast-charts/types' import drilldown from 'west-coast-charts/features/drilldown' WestCoastCharts.use(types).use(drilldown) ``` ## Options Shortened: the full configuration (66 kB, mostly data) is at https://westcoast-charts.com/gallery-src/drilldown/column-drilldown-zoom.js. ```js const options = { chart: { height: 380, fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif", type: "bar", zoom: { enabled: true, type: "x" }, toolbar: { show: true } }, series: [ { name: "Orders", data: [ { x: "W1", y: 337, drilldown: "w1" }, { x: "W2", y: 557, drilldown: "w2" }, { x: "W3", y: 651, drilldown: "w3" }, { x: "W4", y: 449, drilldown: "w4" }, { x: "W5", y: 412, drilldown: "w5" }, { x: "W6", y: 395, drilldown: "w6" }, { x: "W7", y: 450, drilldown: "w7" }, { x: "W8", y: 333, drilldown: "w8" }, { x: "W9", y: 340, drilldown: "w9" }, { x: "W10", y: 376, drilldown: "w10" }, { x: "W11", y: 440, drilldown: "w11" }, { x: "W12", y: 401, drilldown: "w12" } ] } ], plotOptions: { bar: { borderRadius: 3 } }, dataLabels: { enabled: false }, drilldown: { enabled: true, series: [ { id: "w1", name: "Week 1 by hour", type: "area", xaxis: { type: "datetime" }, stroke: { width: 1.5, curve: "smooth" }, fill: { opacity: 0.2 }, data: [ [1767571200000, 1], [1767574800000, 1], [1767578400000, 1], [1767582000000, 1], [1767585600000, 1], [1767589200000, 1], [1767592800000, 1], [1767596400000, 1], [1767600000000, 2], [1767603600000, 3], [1767607200000, 3], [1767610800000, 4], [1767614400000, 4], [1767618000000, 4], [1767621600000, 4], [1767625200000, 3], [1767628800000, 2], [1767632400000, 2], [1767636000000, 1], [1767639600000, 1], [1767643200000, 1], [1767646800000, 1], [1767650400000, 1], [1767654000000, 1], [1767657600000, 1], [1767661200000, 1], [1767664800000, 1], [1767668400000, 1], [1767672000000, 1], [1767675600000, 1], [1767679200000, 1], [1767682800000, 2], [1767686400000, 2], [1767690000000, 3], [1767693600000, 4], [1767697200000, 4], [1767700800000, 4], [1767704400000, 4], [1767708000000, 3], [1767711600000, 3], [1767715200000, 2], [1767718800000, 2], [1767722400000, 1], [1767726000000, 1], [1767729600000, 1], [1767733200000, 1], [1767736800000, 1], [1767740400000, 1], [1767744000000, 1], [1767747600000, 1], [1767751200000, 1], [1767754800000, 1], [1767758400000, 1], [1767762000000, 1], [1767765600000, 1], [1767769200000, 2], [1767772800000, 3], [1767776400000, 3], [1767780000000, 3], [1767783600000, 4], [1767787200000, 4], [1767790800000, 4], [1767794400000, 3], [1767798000000, 3], [1767801600000, 2], [1767805200000, 2], [1767808800000, 1], [1767812400000, 1], [1767816000000, 1], [1767819600000, 1], [1767823200000, 1], [1767826800000, 1], [1767830400000, 1], [1767834000000, 1], [1767837600000, 1], [1767841200000, 1], [1767844800000, 1], [1767848400000, 1], [1767852000000, 1], [1767855600000, 2], [1767859200000, 3], [1767862800000, 3], [1767866400000, 4], [1767870000000, 4], [1767873600000, 4], [1767877200000, 4], [1767880800000, 4], [1767884400000, 3], [1767888000000, 2], [1767891600000, 2], [1767895200000, 1], [1767898800000, 1], [1767902400000, 1], [1767906000000, 1], [1767909600000, 1], [1767913200000, 1], [1767916800000, 1], [1767920400000, 1], [1767924000000, 1], [1767927600000, 1], [1767931200000, 1], [1767934800000, 1], [1767938400000, 1], [1767942000000, 2], [1767945600000, 2], [1767949200000, 3], [1767952800000, 3], [1767956400000, 4], [1767960000000, 4], [1767963600000, 4], [1767967200000, 3], [1767970800000, 3], [1767974400000, 2], [1767978000000, 2], [1767981600000, 1], [1767985200000, 1], [1767988800000, 1], [1767992400000, 1], [1767996000000, 1], [1767999600000, 1], [1768003200000, 1], [1768006800000, 1], [1768010400000, 1], [1768014000000, 1], [1768017600000, 1], [1768021200000, 1], [1768024800000, 1], [1768028400000, 2], [1768032000000, 2], [1768035600000, 3], [1768039200000, 4], [1768042800000, 4], [1768046400000, 4], [1768050000000, 4], [1768053600000, 4], [1768057200000, 3], [1768060800000, 2], [1768064400000, 1], [1768068000000, 1], [1768071600000, 1], [1768075200000, 1], [1768078800000, 1], [1768082400000, 1], [1768086000000, 1], [1768089600000, 1], [1768093200000, 1], [1768096800000, 1], [1768100400000, 1], [1768104000000, 1], [1768107600000, 1], [1768111200000, 1], [1768114800000, 2], [1768118400000, 2], [1768122000000, 3], [1768125600000, 3], [1768129200000, 4], [1768132800000, 4], [1768136400000, 4], [1768140000000, 4], [1768143600000, 3], [1768147200000, 2], [1768150800000, 1], [1768154400000, 1], [1768158000000, 1], [1768161600000, 1], [1768165200000, 1], [1768168800000, 1], [1768172400000, 1] ] }, { id: "w2", name: "Week 2 by hour", type: "area", xaxis: { type: "datetime" }, stroke: { width: 1.5, curve: "smooth" }, fill: { opacity: 0.2 }, data: [ [1768176000000, 1], [1768179600000, 2], [1768183200000, 1], [1768186800000, 1], [1768190400000, 1], [1768194000000, 2], [1768197600000, 2], [1768201200000, 3], [1768204800000, 4], [1768208400000, 5], [1768212000000, 6], [1768215600000, 7], [1768219200000, 7], [1768222800000, 6], [1768226400000, 6], [1768230000000, 5], [1768233600000, 4], [1768237200000, 3], [1768240800000, 1], [1768244400000, 1], [1768248000000, 2], [1768251600000, 2], [1768255200000, 1], [1768258800000, 1], [1768262400000, 1], [1768266000000, 1], [1768269600000, 1], [1768273200000, 1], [1768276800000, 1], [1768280400000, 1], [1768284000000, 2], [1768287600000, 3], [1768291200000, 4], [1768294800000, 5], [1768298400000, 6], [1768302000000, 7], [1768305600000, 7], [1768309200000, 7], [1768312800000, 6], [1768316400000, 5], [1768320000000, 4], [1768323600000, 3], [1768327200000, 1], [1768330800000, 2], [1768334400000, 1], [1768338000000, 1], [1768341600000, 1], [1768345200000, 2], [1768348800000, 1], [1768352400000, 1], [1768356000000, 2], [1768359600000, 2], [1768363200000, 1], [1768366800000, 2], [1768370400000, 1], [1768374000000, 3], [1768377600000, 4], [1768381200000, 5], [1768384800000, 5], [1768388400000, 6], [1768392000000, 6], [1768395600000, 6], [1768399200000, 6], [1768402800000, 5], [1768406400000, 4], [1768410000000, 2], [1768413600000, 1], [1768417200000, 2], [1768420800000, 1], [1768424400000, 2], [1768428000000, 1], [1768431600000, 1], [1768435200000, 1], [1768438800000, 2], [1768442400000, 1], [1768446000000, 1], [1768449600000, 2], [1768453200000, 1], [1768456800000, 2], [1768460400000, 3], [1768464000000, 4], [1768467600000, 6], [1768471200000, 6], [1768474800000, 7], [1768478400000, 6], [1768482000000, 7], [1768485600000, 6], [1768489200000, 5], [1768492800000, 4], [1768496400000, 3], [1768500000000, 1], [1768503600000, 1], [1768507200000, 1], [1768510800000, 2], [1768514400000, 1], [1768518000000, 1], [1768521600000, 1], [1768525200000, 1], [1768528800000, 2], [1768532400000, 1], [1768536000000, 1], [1768539600000, 2], [1768543200000, 1], [1768546800000, 2], [1768550400000, 4], [1768554000000, 6], [1768557600000, 6], [1768561200000, 6], [1768564800000, 6], [1768568400000, 6], [1768572000000, 6], [1768575600000, 5], [1768579200000, 4], [1768582800000, 3], [1768586400000, 2], [1768590000000, 1], [1768593600000, 1], [1768597200000, 1], [1768600800000, 2], [1768604400000, 1], [1768608000000, 1], [1768611600000, 1], [1768615200000, 2], [1768618800000, 1], [1768622400000, 2], [1768626000000, 1], [1768629600000, 1], [1768633200000, 2], [1768636800000, 4], [1768640400000, 5], [1768644000000, 5], [1768647600000, 6], [1768651200000, 6], [1768654800000, 6], [1768658400000, 6], [1768662000000, 5], [1768665600000, 4], [1768669200000, 3], [1768672800000, 2], [1768676400000, 1], [1768680000000, 1], [1768683600000, 1], [1768687200000, 1], [1768690800000, 1], [1768694400000, 2], [1768698000000, 1], [1768701600000, 2], [1768705200000, 1], [1768708800000, 2], [1768712400000, 2], [1768716000000, 1], [1768719600000, 2], [1768723200000, 4], [1768726800000, 5], [1768730400000, 6], [1768734000000, 6], [1768737600000, 7], [1768741200000, 6], [1768744800000, 6], [1768748400000, 5], [1768752000000, 4], [1768755600000, 3], [1768759200000, 1], [1768762800000, 1], [1768766400000, 1], [1768770000000, 2], [1768773600000, 2], [1768777200000, 2] ] }, { id: "w3", name: "Week 3 by hour", type: "area", xaxis: { type: "datetime" }, stroke: { width: 1.5, curve: "smooth" }, fill: { opacity: 0.2 }, data: [ [1768780800000, 1], [1768784400000, 2], [1768788000000, 1], [1768791600000, 2], [1768795200000, 1], [1768798800000, 2], [1768802400000, 1], [1768806000000, 3], [1768809600000, 4], [1768813200000, 6], [1768816800000, 7], [1768820400000, 8], [1768824000000, 8], [1768827600000, 7], [1768831200000, 7], [1768834800000, 6], [1768838400000, 5], [1768842000000, 4], [1768845600000, 1], [1768849200000, 2], [1768852800000, 2], [1768856400000, 1], [1768860000000, 1], [1768863600000, 2], [1768867200000, 1], [1768870800000, 2], [1768874400000, 1], [1768878000000, 2], [1768881600000, 1], [1768885200000, 2], [1768888800000, 2], [1768892400000, 3], [1768896000000, 4], [1768899600000, 6], [1768903200000, 7], [1768906800000, 8], [1768910400000, 8], [1768914000000, 8], [1768917600000, 7], [1768921200000, 6], [1768924800000, 5], [1768928400000, 3], [1768932000000, 1], [1768935600000, 1], [1768939200000, 2], [1768942800000, 2], [1768946400000, 2], [1768950000000, 1], [1768953600000, 2], [1768957200000, 2], [1768960800000, 1], [1768964400000, 2], [1768968000000, 2], // ... truncated, use Copy or open the full config 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 drilldown-column-drilldown-zoom.json --out drilldown-column-drilldown-zoom.svg --with-table` (save the options above as JSON first)