1"use strict";(self.webpackChunkgosling_website=self.webpackChunkgosling_website||[]).push([[9430],{43131:(e,i,s)=>{s.r(i),s.d(i,{assets:()=>c,contentTitle:()=>r,default:()=>h,frontMatter:()=>o,metadata:()=>a,toc:()=>l});var n=s(74848),t=s(28453);const o={title:"Responsive Visualizations",description:"Make your visualization responsive to the screen size"},r=void 0,a={id:"fixed-responsive",title:"Responsive Visualizations",description:"Make your visualization responsive to the screen size",source:"@site/versioned_docs/version-0.17.1/fixed-responsive.mdx",sourceDirName:".",slug:"/fixed-responsive",permalink:"/docs/0.17.1/fixed-responsive",draft:!1,unlisted:!1,editUrl:"https://github.com/gosling-lang/gosling-website/edit/main/versioned_docs/version-0.17.1/fixed-responsive.mdx",tags:[],version:"0.17.1",frontMatter:{title:"Responsive Visualizations",description:"Make your visualization responsive to the screen size"},sidebar:"docs",previous:{title:"Semantic Zoom",permalink:"/docs/0.17.1/semantic-zoom"},next:{title:"Grammar Reference",permalink:"/docs/0.17.1/reference"}},c={},l=[{value:"Responsive size",id:"responsive-size",level:2},{value:"Fixed size",id:"fixed-size",level:2}];function d(e){const i={code:"code",h2:"h2",p:"p",pre:"pre",...(0,t.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(i.p,{children:"Gosling visualizations can be responsive or fixed to the screen size."}),"\n",(0,n.jsx)(i.h2,{id:"responsive-size",children:"Responsive size"}),"\n",(0,n.jsxs)(i.p,{children:["A Gosling visualization can be made responsive to the screen size by setting the ",(0,n.jsx)(i.code,{children:"responsiveSize"})," property in the root of the Gosling specification. When the screen size changes, the visualization will automatically adjust its size to fit the screen."]}),"\n",(0,n.jsx)(i.p,{children:"Here is an example of a Gosling specification with responsive size enabled:"}),"\n",(0,n.jsx)(i.pre,{children:(0,n.jsx)(i.code,{className:"language-javascript",children:"{\n // highlight-start\n responsiveSize: { width: true },\n // highlight-end\n // ... rest of the Gosling spec\n}\n"})}),"\n",(0,n.jsx)(i.h2,{id:"fixed-size",children:"Fixed size"}),"\n",(0,n.jsxs)(i.p,{children:["A Gosling visualization can have a fixed size by setting the ",(0,n.jsx)(i.code,{children:"width"})," and ",(0,n.jsx)(i.code,{children:"height"})," properties. The tracks will have a fixed size regardless of the screen size."]}),"\n",(0,n.jsxs)(i.p,{children:["When the ",(0,n.jsx)(i.code,{children:"width"})," and ",(0,n.jsx)(i.code,{children:"height"})," properties are set in the root of the spec, all tracks will have this height and width unless they are overridden in the track specification."]}),"\n",(0,n.jsx)(i.pre,{children:(0,n.jsx)(i.code,{className:"language-javascript",children:"{\n // highlight-start\n width: 800,\n height: 200,\n // highlight-end\n // ... rest of the Gosling spec\n}\n"})})]})}function h(e={}){const{wrapper:i}={...(0,t.R)(),...e.components};return i?(0,n.jsx)(i,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}},28453:(e,i,s)=>{s.d(i,{R:()=>r,x:()=>a});var n=s(96540);const t={},o=n.createContext(t);function r(e){const i=n.useContext(o);return n.useMemo((function(){return"function"==typeof e?e(i):{...i,...e}}),[i,e])}function a(e){let i;return i=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:r(e.components),n.createElement(o.Provider,{value:i},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.