<!DOCTYPE HTML>
<html lang="" >
<head>
<meta charset="UTF-8">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Responsive ยท Chart.js documentation</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="">
<meta name="generator" content="GitBook 3.2.2">
<meta name="author" content="chartjs">
<link rel="stylesheet" href="../gitbook/style.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-search-plus/search.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-fontsettings/website.css">
<link rel="stylesheet" href="../style.css">
<meta name="HandheldFriendly" content="true"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
<link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
<link rel="next" href="device-pixel-ratio.html" />
<link rel="prev" href="./" />
<link rel="stylesheet" href="../gitbook/gitbook-plugin-chartjs/style.css">
<script src="../gitbook/gitbook-plugin-chartjs/Chart.bundle.js"></script>
<script src="../gitbook/gitbook-plugin-chartjs/chartjs-plugin-deferred.js"></script>
</head>
<body>
<div class="book">
<div class="book-summary">
<div id="book-search-input" role="search">
<input type="text" placeholder="Type to search" />
</div>
<nav role="navigation">
<ul class="summary">
<li class="chapter " data-level="1.1" data-path="../">
<a href="../">
Chart.js
</a>
</li>
<li class="chapter " data-level="1.2" data-path="../getting-started/">
<a href="../getting-started/">
Getting Started
</a>
<ul class="articles">
<li class="chapter " data-level="1.2.1" data-path="../getting-started/installation.html">
<a href="../getting-started/installation.html">
Installation
</a>
</li>
<li class="chapter " data-level="1.2.2" data-path="../getting-started/integration.html">
<a href="../getting-started/integration.html">
Integration
</a>
</li>
<li class="chapter " data-level="1.2.3" data-path="../getting-started/usage.html">
<a href="../getting-started/usage.html">
Usage
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.3" data-path="./">
<a href="./">
General
</a>
<ul class="articles">
<li class="chapter active" data-level="1.3.1" data-path="responsive.html">
<a href="responsive.html">
Responsive
</a>
</li>
<li class="chapter " data-level="1.3.2" data-path="device-pixel-ratio.html">
<a href="device-pixel-ratio.html">
Pixel Ratio
</a>
</li>
<li class="chapter " data-level="1.3.3" data-path="interactions/">
<a href="interactions/">
Interactions
</a>
<ul class="articles">
<li class="chapter " data-level="1.3.3.1" data-path="interactions/events.html">
<a href="interactions/events.html">
Events
</a>
</li>
<li class="chapter " data-level="1.3.3.2" data-path="interactions/modes.html">
<a href="interactions/modes.html">
Modes
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.3.4" data-path="options.html">
<a href="options.html">
Options
</a>
</li>
<li class="chapter " data-level="1.3.5" data-path="colors.html">
<a href="colors.html">
Colors
</a>
</li>
<li class="chapter " data-level="1.3.6" data-path="fonts.html">
<a href="fonts.html">
Fonts
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.4" data-path="../configuration/">
<a href="../configuration/">
Configuration
</a>
<ul class="articles">
<li class="chapter " data-level="1.4.1" data-path="../configuration/animations.html">
<a href="../configuration/animations.html">
Animations
</a>
</li>
<li class="chapter " data-level="1.4.2" data-path="../configuration/layout.html">
<a href="../configuration/layout.html">
Layout
</a>
</li>
<li class="chapter " data-level="1.4.3" data-path="../configuration/legend.html">
<a href="../configuration/legend.html">
Legend
</a>
</li>
<li class="chapter " data-level="1.4.4" data-path="../configuration/title.html">
<a href="../configuration/title.html">
Title
</a>
</li>
<li class="chapter " data-level="1.4.5" data-path="../configuration/tooltip.html">
<a href="../configuration/tooltip.html">
Tooltip
</a>
</li>
<li class="chapter " data-level="1.4.6" data-path="../configuration/elements.html">
<a href="../configuration/elements.html">
Elements
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.5" data-path="../charts/">
<a href="../charts/">
Charts
</a>
<ul class="articles">
<li class="chapter " data-level="1.5.1" data-path="../charts/line.html">
<a href="../charts/line.html">
Line
</a>
</li>
<li class="chapter " data-level="1.5.2" data-path="../charts/bar.html">
<a href="../charts/bar.html">
Bar
</a>
</li>
<li class="chapter " data-level="1.5.3" data-path="../charts/radar.html">
<a href="../charts/radar.html">
Radar
</a>
</li>
<li class="chapter " data-level="1.5.4" data-path="../charts/doughnut.html">
<a href="../charts/doughnut.html">
Doughnut & Pie
</a>
</li>
<li class="chapter " data-level="1.5.5" data-path="../charts/polar.html">
<a href="../charts/polar.html">
Polar Area
</a>
</li>
<li class="chapter " data-level="1.5.6" data-path="../charts/bubble.html">
<a href="../charts/bubble.html">
Bubble
</a>
</li>
<li class="chapter " data-level="1.5.7" data-path="../charts/scatter.html">
<a href="../charts/scatter.html">
Scatter
</a>
</li>
<li class="chapter " data-level="1.5.8" data-path="../charts/area.html">
<a href="../charts/area.html">
Area
</a>
</li>
<li class="chapter " data-level="1.5.9" data-path="../charts/mixed.html">
<a href="../charts/mixed.html">
Mixed
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.6" data-path="../axes/">
<a href="../axes/">
Axes
</a>
<ul class="articles">
<li class="chapter " data-level="1.6.1" data-path="../axes/cartesian/">
<a href="../axes/cartesian/">
Cartesian
</a>
<ul class="articles">
<li class="chapter " data-level="1.6.1.1" data-path="../axes/cartesian/category.html">
<a href="../axes/cartesian/category.html">
Category
</a>
</li>
<li class="chapter " data-level="1.6.1.2" data-path="../axes/cartesian/linear.html">
<a href="../axes/cartesian/linear.html">
Linear
</a>
</li>
<li class="chapter " data-level="1.6.1.3" data-path="../axes/cartesian/logarithmic.html">
<a href="../axes/cartesian/logarithmic.html">
Logarithmic
</a>
</li>
<li class="chapter " data-level="1.6.1.4" data-path="../axes/cartesian/time.html">
<a href="../axes/cartesian/time.html">
Time
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.6.2" data-path="../axes/radial/">
<a href="../axes/radial/">
Radial
</a>
<ul class="articles">
<li class="chapter " data-level="1.6.2.1" data-path="../axes/radial/linear.html">
<a href="../axes/radial/linear.html">
Linear
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.6.3" data-path="../axes/labelling.html">
<a href="../axes/labelling.html">
Labelling
</a>
</li>
<li class="chapter " data-level="1.6.4" data-path="../axes/styling.html">
<a href="../axes/styling.html">
Styling
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.7" data-path="../developers/">
<a href="../developers/">
Developers
</a>
<ul class="articles">
<li class="chapter " data-level="1.7.1" data-path="../developers/api.html">
<a href="../developers/api.html">
Chart.js API
</a>
</li>
<li class="chapter " data-level="1.7.2" data-path="../developers/updates.html">
<a href="../developers/updates.html">
Updating Charts
</a>
</li>
<li class="chapter " data-level="1.7.3" data-path="../developers/plugins.html">
<a href="../developers/plugins.html">
Plugins
</a>
</li>
<li class="chapter " data-level="1.7.4" data-path="../developers/charts.html">
<a href="../developers/charts.html">
New Charts
</a>
</li>
<li class="chapter " data-level="1.7.5" data-path="../developers/axes.html">
<a href="../developers/axes.html">
New Axes
</a>
</li>
<li class="chapter " data-level="1.7.6" data-path="../developers/contributing.html">
<a href="../developers/contributing.html">
Contributing
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.8" data-path="../notes/">
<a href="../notes/">
Additional Notes
</a>
<ul class="articles">
<li class="chapter " data-level="1.8.1" data-path="../notes/comparison.html">
<a href="../notes/comparison.html">
Comparison Table
</a>
</li>
<li class="chapter " data-level="1.8.2" data-path="../notes/extensions.html">
<a href="../notes/extensions.html">
Popular Extensions
</a>
</li>
<li class="chapter " data-level="1.8.3" data-path="../notes/license.html">
<a href="../notes/license.html">
License
</a>
</li>
</ul>
</li>
<li class="divider"></li>
<li>
<a href="https://www.gitbook.com" target="blank" class="gitbook-link">
Published with GitBook
</a>
</li>
</ul>
</nav>
</div>
<div class="book-body">
<div class="body-inner">
<div class="book-header" role="navigation">
<!-- Title -->
<h1>
<i class="fa fa-circle-o-notch fa-spin"></i>
<a href=".." >Responsive</a>
</h1>
</div>
<div class="page-wrapper" tabindex="-1" role="main">
<div class="page-inner">
<div class="search-plus" id="book-search-results">
<div class="search-noresults">
<section class="normal markdown-section">
<h1 id="responsive-charts">Responsive Charts</h1>
<p>When it comes to change the chart size based on the window size, a major limitation is that the canvas <em>render</em> size (<code>canvas.width</code> and <code>.height</code>) can <strong>not</strong> be expressed with relative values, contrary to the <em>display</em> size (<code>canvas.style.width</code> and <code>.height</code>). Furthermore, these sizes are independent from each other and thus the canvas <em>render</em> size does not adjust automatically based on the <em>display</em> size, making the rendering inaccurate.</p>
<p>The following examples <strong>do not work</strong>:</p>
<ul>
<li><code><canvas height="40vh" width="80vw"></code>: <strong>invalid</strong> values, the canvas doesn't resize (<a href="https://codepen.io/chartjs/pen/oWLZaR" target="_blank">example</a>)</li>
<li><code><canvas style="height:40vh; width:80vw"></code>: <strong>invalid</strong> behavior, the canvas is resized but becomes blurry (<a href="https://codepen.io/chartjs/pen/WjxpmO" target="_blank">example</a>)</li>
</ul>
<p>Chart.js provides a <a href="#configuration-options">few options</a> to enable responsiveness and control the resize behavior of charts by detecting when the canvas <em>display</em> size changes and update the <em>render</em> size accordingly.</p>
<h2 id="configuration-options">Configuration Options</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>responsive</code></td>
<td><code>Boolean</code></td>
<td><code>true</code></td>
<td>Resizes the chart canvas when its container does (<a href="#important-note">important note...</a>).</td>
</tr>
<tr>
<td><code>responsiveAnimationDuration</code></td>
<td><code>Number</code></td>
<td><code>0</code></td>
<td>Duration in milliseconds it takes to animate to new size after a resize event.</td>
</tr>
<tr>
<td><code>maintainAspectRatio</code></td>
<td><code>Boolean</code></td>
<td><code>true</code></td>
<td>Maintain the original canvas aspect ratio <code>(width / height)</code> when resizing.</td>
</tr>
<tr>
<td><code>onResize</code></td>
<td><code>Function</code></td>
<td><code>null</code></td>
<td>Called when a resize occurs. Gets passed two arguments: the chart instance and the new size.</td>
</tr>
</tbody>
</table>
<h2 id="important-note">Important Note</h2>
<p>Detecting when the canvas size changes can not be done directly from the <code>CANVAS</code> element. Chart.js uses its parent container to update the canvas <em>render</em> and <em>display</em> sizes. However, this method requires the container to be <strong>relatively positioned</strong> and <strong>dedicated to the chart canvas only</strong>. Responsiveness can then be achieved by setting relative values for the container size (<a href="https://codepen.io/chartjs/pen/YVWZbz" target="_blank">example</a>):</p>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"chart-container"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"position: relative; height:40vh; width:80vw"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">canvas</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"chart"</span>></span><span class="hljs-tag"></<span class="hljs-name">canvas</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
</code></pre>
<p>The chart can also be programmatically resized by modifying the container size:</p>
<pre><code class="lang-javascript">chart.canvas.parentNode.style.height = <span class="hljs-string">'128px'</span>;
</code></pre>
<h2 id="printing-resizeable-charts">Printing Resizeable Charts</h2>
<p>CSS media queries allow changing styles when printing a page. The CSS applied from these media queries may cause charts to need to resize. However, the resize won't happen automatically. To support resizing charts when printing, one needs to hook the <a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint" target="_blank">onbeforeprint</a> event and manually trigger resizing of each chart.</p>
<pre><code class="lang-javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">beforePrintHandler</span> (<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> id <span class="hljs-keyword">in</span> Chart.instances) {
Chart.instances[id].resize()
}
}
</code></pre>
</section>
</div>
<div class="search-results">
<div class="has-results">
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
<ul class="search-results-list"></ul>
</div>
<div class="no-results">
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="./" class="navigation navigation-prev " aria-label="Previous page: General">
<i class="fa fa-angle-left"></i>
</a>
<a href="device-pixel-ratio.html" class="navigation navigation-next " aria-label="Next page: Pixel Ratio">
<i class="fa fa-angle-right"></i>
</a>
</div>
<script>
var gitbook = gitbook || [];
gitbook.push(function() {
gitbook.page.hasChanged({"page":{"title":"Responsive","level":"1.3.1","depth":2,"next":{"title":"Pixel Ratio","level":"1.3.2","depth":2,"path":"general/device-pixel-ratio.md","ref":"general/device-pixel-ratio.md","articles":[]},"previous":{"title":"General","level":"1.3","depth":1,"path":"general/README.md","ref":"general/README.md","articles":[{"title":"Responsive","level":"1.3.1","depth":2,"path":"general/responsive.md","ref":"general/responsive.md","articles":[]},{"title":"Pixel Ratio","level":"1.3.2","depth":2,"path":"general/device-pixel-ratio.md","ref":"general/device-pixel-ratio.md","articles":[]},{"title":"Interactions","level":"1.3.3","depth":2,"path":"general/interactions/README.md","ref":"general/interactions/README.md","articles":[{"title":"Events","level":"1.3.3.1","depth":3,"path":"general/interactions/events.md","ref":"general/interactions/events.md","articles":[]},{"title":"Modes","level":"1.3.3.2","depth":3,"path":"general/interactions/modes.md","ref":"general/interactions/modes.md","articles":[]}]},{"title":"Options","level":"1.3.4","depth":2,"path":"general/options.md","ref":"general/options.md","articles":[]},{"title":"Colors","level":"1.3.5","depth":2,"path":"general/colors.md","ref":"general/colors.md","articles":[]},{"title":"Fonts","level":"1.3.6","depth":2,"path":"general/fonts.md","ref":"general/fonts.md","articles":[]}]},"dir":"ltr"},"config":{"plugins":["-lunr","-search","search-plus","anchorjs","chartjs","ga"],"root":"./docs","styles":{"website":"style.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"anchorjs":{"icon":"#","placement":"left","visible":"always"},"ga":{"configuration":"auto","token":"UA-28909194-3"},"theme-default":{"styles":{"website":"style.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false},"search-plus":{},"chartjs":{"defaults":null},"highlight":{},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2}},"theme":"default","author":"chartjs","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"title":"Chart.js documentation","gitbook":"3.2.2"},"file":{"path":"general/responsive.md","mtime":"2018-03-01T21:46:31.679Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2018-03-01T21:50:47.970Z"},"basePath":"..","book":{"language":""}});
});
</script>
</div>
<script src="../gitbook/gitbook.js"></script>
<script src="../gitbook/theme.js"></script>
<script src="../gitbook/gitbook-plugin-search-plus/jquery.mark.min.js"></script>
<script src="../gitbook/gitbook-plugin-search-plus/search.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.1.0/anchor.min.js"></script>
<script src="../gitbook/gitbook-plugin-anchorjs/anchor-style.js"></script>
<script src="../gitbook/gitbook-plugin-ga/plugin.js"></script>
<script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>
<script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
</body>
</html>