initial commit
This commit is contained in:
+989
@@ -0,0 +1,989 @@
|
||||
|
||||
<!DOCTYPE HTML>
|
||||
<html lang="" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
<title>Colors · GitBook</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="fonts.html" />
|
||||
|
||||
|
||||
<link rel="prev" href="options.html" />
|
||||
|
||||
|
||||
<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 " 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="interactions/">
|
||||
|
||||
<a href="interactions/">
|
||||
|
||||
|
||||
Interactions
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
<ul class="articles">
|
||||
|
||||
|
||||
<li class="chapter " data-level="1.3.2.1" data-path="interactions/events.html">
|
||||
|
||||
<a href="interactions/events.html">
|
||||
|
||||
|
||||
Events
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li class="chapter " data-level="1.3.2.2" data-path="interactions/modes.html">
|
||||
|
||||
<a href="interactions/modes.html">
|
||||
|
||||
|
||||
Modes
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="chapter " data-level="1.3.3" data-path="options.html">
|
||||
|
||||
<a href="options.html">
|
||||
|
||||
|
||||
Options
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li class="chapter active" data-level="1.3.4" data-path="colors.html">
|
||||
|
||||
<a href="colors.html">
|
||||
|
||||
|
||||
Colors
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li class="chapter " data-level="1.3.5" 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=".." >Colors</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="colors">Colors</h1>
|
||||
<p>When supplying colors to Chart options, you can use a number of formats. You can specify the color as a string in hexadecimal, RGB, or HSL notations. If a color is needed, but not specified, Chart.js will use the global default color. This color is stored at <code>Chart.defaults.global.defaultColor</code>. It is initially set to <code>'rgba(0, 0, 0, 0.1)'</code></p>
|
||||
<p>You can also pass a <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient" target="_blank">CanvasGradient</a> object. You will need to create this before passing to the chart, but using it you can achieve some interesting effects.</p>
|
||||
<h2 id="patterns-and-gradients">Patterns and Gradients</h2>
|
||||
<p>An alternative option is to pass a <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern" target="_blank">CanvasPattern</a> or <a href="https://developer.mozilla.org/en/docs/Web/API/CanvasGradient" target="_blank">CanvasGradient</a> object instead of a string colour. </p>
|
||||
<p>For example, if you wanted to fill a dataset with a pattern from an image you could do the following.</p>
|
||||
<pre><code class="lang-javascript"><span class="hljs-keyword">var</span> img = <span class="hljs-keyword">new</span> Image();
|
||||
img.src = <span class="hljs-string">'https://example.com/my_image.png'</span>;
|
||||
img.onload = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">var</span> ctx = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'canvas'</span>).getContext(<span class="hljs-string">'2d'</span>);
|
||||
<span class="hljs-keyword">var</span> fillPattern = ctx.createPattern(img, <span class="hljs-string">'repeat'</span>);
|
||||
|
||||
<span class="hljs-keyword">var</span> chart = <span class="hljs-keyword">new</span> Chart(ctx, {
|
||||
data: {
|
||||
labels: [<span class="hljs-string">'Item 1'</span>, <span class="hljs-string">'Item 2'</span>, <span class="hljs-string">'Item 3'</span>],
|
||||
datasets: [{
|
||||
data: [<span class="hljs-number">10</span>, <span class="hljs-number">20</span>, <span class="hljs-number">30</span>],
|
||||
backgroundColor: fillPattern
|
||||
}]
|
||||
}
|
||||
})
|
||||
}
|
||||
</code></pre>
|
||||
<p>Using pattern fills for data graphics can help viewers with vision deficiencies (e.g. color-blindness or partial sight) to <a href="http://betweentwobrackets.com/data-graphics-and-colour-vision/" target="_blank">more easily understand your data</a>.</p>
|
||||
<p>Using the <a href="https://github.com/ashiguruma/patternomaly" target="_blank">Patternomaly</a> library you can generate patterns to fill datasets.</p>
|
||||
<pre><code class="lang-javascript"><span class="hljs-keyword">var</span> chartData = {
|
||||
datasets: [{
|
||||
data: [<span class="hljs-number">45</span>, <span class="hljs-number">25</span>, <span class="hljs-number">20</span>, <span class="hljs-number">10</span>],
|
||||
backgroundColor: [
|
||||
pattern.draw(<span class="hljs-string">'square'</span>, <span class="hljs-string">'#ff6384'</span>),
|
||||
pattern.draw(<span class="hljs-string">'circle'</span>, <span class="hljs-string">'#36a2eb'</span>),
|
||||
pattern.draw(<span class="hljs-string">'diamond'</span>, <span class="hljs-string">'#cc65fe'</span>),
|
||||
pattern.draw(<span class="hljs-string">'triangle'</span>, <span class="hljs-string">'#ffce56'</span>),
|
||||
]
|
||||
}],
|
||||
labels: [<span class="hljs-string">'Red'</span>, <span class="hljs-string">'Blue'</span>, <span class="hljs-string">'Purple'</span>, <span class="hljs-string">'Yellow'</span>]
|
||||
};
|
||||
</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="options.html" class="navigation navigation-prev " aria-label="Previous page: Options">
|
||||
<i class="fa fa-angle-left"></i>
|
||||
</a>
|
||||
|
||||
|
||||
<a href="fonts.html" class="navigation navigation-next " aria-label="Next page: Fonts">
|
||||
<i class="fa fa-angle-right"></i>
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var gitbook = gitbook || [];
|
||||
gitbook.push(function() {
|
||||
gitbook.page.hasChanged({"page":{"title":"Colors","level":"1.3.4","depth":2,"next":{"title":"Fonts","level":"1.3.5","depth":2,"path":"general/fonts.md","ref":"general/fonts.md","articles":[]},"previous":{"title":"Options","level":"1.3.3","depth":2,"path":"general/options.md","ref":"general/options.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":{},"gitbook":"3.2.2"},"file":{"path":"general/colors.md","mtime":"2017-10-28T15:03:49.266Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-10-28T15:09:53.587Z"},"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/3.1.1/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>
|
||||
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
# Device Pixel Ratio
|
||||
|
||||
By default the chart's canvas will use a 1:1 pixel ratio, unless the physical display has a higher pixel ratio (e.g. Retina displays).
|
||||
|
||||
For applications where a chart will be converted to a bitmap, or printed to a higher DPI medium it can be desirable to render the chart at a higher resolution than the default.
|
||||
|
||||
Setting `devicePixelRatio` to a value other than 1 will force the canvas size to be scaled by that amount, relative to the container size. There should be no visible difference on screen; the difference will only be visible when the image is zoomed or printed.
|
||||
|
||||
## Configuration Options
|
||||
|
||||
| Name | Type | Default | Description
|
||||
| ---- | ---- | ------- | -----------
|
||||
| `devicePixelRatio` | `Number` | window.devicePixelRatio | Override the window's default devicePixelRatio.
|
||||
+1006
File diff suppressed because it is too large
Load Diff
+961
@@ -0,0 +1,961 @@
|
||||
|
||||
<!DOCTYPE HTML>
|
||||
<html lang="" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
<title>General · GitBook</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="responsive.html" />
|
||||
|
||||
|
||||
<link rel="prev" href="../getting-started/usage.html" />
|
||||
|
||||
|
||||
<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 active" data-level="1.3" data-path="./">
|
||||
|
||||
<a href="./">
|
||||
|
||||
|
||||
General
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
<ul class="articles">
|
||||
|
||||
|
||||
<li class="chapter " 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="interactions/">
|
||||
|
||||
<a href="interactions/">
|
||||
|
||||
|
||||
Interactions
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
<ul class="articles">
|
||||
|
||||
|
||||
<li class="chapter " data-level="1.3.2.1" data-path="interactions/events.html">
|
||||
|
||||
<a href="interactions/events.html">
|
||||
|
||||
|
||||
Events
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li class="chapter " data-level="1.3.2.2" data-path="interactions/modes.html">
|
||||
|
||||
<a href="interactions/modes.html">
|
||||
|
||||
|
||||
Modes
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="chapter " data-level="1.3.3" data-path="options.html">
|
||||
|
||||
<a href="options.html">
|
||||
|
||||
|
||||
Options
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li class="chapter " data-level="1.3.4" data-path="colors.html">
|
||||
|
||||
<a href="colors.html">
|
||||
|
||||
|
||||
Colors
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li class="chapter " data-level="1.3.5" 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=".." >General</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="general-configuration">General Configuration</h1>
|
||||
<p>These sections describe general configuration options that can apply elsewhere in the documentation.</p>
|
||||
<ul>
|
||||
<li><a href="responsive.html">Responsive</a> defines responsive chart options that apply to all charts.</li>
|
||||
<li><a href="device-pixel-ratio.md">Device Pixel Ratio</a> defines the ratio between display pixels and rendered pixels.</li>
|
||||
<li><a href="interactions/">Interactions</a> defines options that reflect how hovering chart elements works.</li>
|
||||
<li><a href="options.html">Options</a> scriptable and indexable options syntax.</li>
|
||||
<li><a href="colors.html">Colors</a> defines acceptable color values.</li>
|
||||
<li><a href="fonts.html">Font</a> defines various font options.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</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="../getting-started/usage.html" class="navigation navigation-prev " aria-label="Previous page: Usage">
|
||||
<i class="fa fa-angle-left"></i>
|
||||
</a>
|
||||
|
||||
|
||||
<a href="responsive.html" class="navigation navigation-next " aria-label="Next page: Responsive">
|
||||
<i class="fa fa-angle-right"></i>
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var gitbook = gitbook || [];
|
||||
gitbook.push(function() {
|
||||
gitbook.page.hasChanged({"page":{"title":"General","level":"1.3","depth":1,"next":{"title":"Responsive","level":"1.3.1","depth":2,"path":"general/responsive.md","ref":"general/responsive.md","articles":[]},"previous":{"title":"Usage","level":"1.2.3","depth":2,"path":"getting-started/usage.md","ref":"getting-started/usage.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":{},"gitbook":"3.2.2"},"file":{"path":"general/README.md","mtime":"2017-10-28T15:03:49.266Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-10-28T15:09:53.587Z"},"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/3.1.1/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>
|
||||
|
||||
+994
@@ -0,0 +1,994 @@
|
||||
|
||||
<!DOCTYPE HTML>
|
||||
<html lang="" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
<title>Events · GitBook</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="modes.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 " 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="./">
|
||||
|
||||
<a href="./">
|
||||
|
||||
|
||||
Interactions
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
<ul class="articles">
|
||||
|
||||
|
||||
<li class="chapter active" data-level="1.3.2.1" data-path="events.html">
|
||||
|
||||
<a href="events.html">
|
||||
|
||||
|
||||
Events
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li class="chapter " data-level="1.3.2.2" data-path="modes.html">
|
||||
|
||||
<a href="modes.html">
|
||||
|
||||
|
||||
Modes
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="chapter " data-level="1.3.3" data-path="../options.html">
|
||||
|
||||
<a href="../options.html">
|
||||
|
||||
|
||||
Options
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li class="chapter " data-level="1.3.4" data-path="../colors.html">
|
||||
|
||||
<a href="../colors.html">
|
||||
|
||||
|
||||
Colors
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li class="chapter " data-level="1.3.5" 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="../.." >Events</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="events">Events</h1>
|
||||
<p>The following properties define how the chart interacts with events.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>events</code></td>
|
||||
<td><code>String[]</code></td>
|
||||
<td><code>["mousemove", "mouseout", "click", "touchstart", "touchmove", "touchend"]</code></td>
|
||||
<td>The <code>events</code> option defines the browser events that the chart should listen to for tooltips and hovering. <a href="#event-option">more...</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>onHover</code></td>
|
||||
<td><code>Function</code></td>
|
||||
<td><code>null</code></td>
|
||||
<td>Called when any of the events fire. Called in the context of the chart and passed the event and an array of active elements (bars, points, etc).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>onClick</code></td>
|
||||
<td><code>Function</code></td>
|
||||
<td><code>null</code></td>
|
||||
<td>Called if the event is of type 'mouseup' or 'click'. Called in the context of the chart and passed the event and an array of active elements</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2 id="event-option">Event Option</h2>
|
||||
<p>For example, to have the chart only respond to click events, you could do</p>
|
||||
<pre><code class="lang-javascript"><span class="hljs-keyword">var</span> chart = <span class="hljs-keyword">new</span> Chart(ctx, {
|
||||
type: <span class="hljs-string">'line'</span>,
|
||||
data: data,
|
||||
options: {
|
||||
<span class="hljs-comment">// This chart will not respond to mousemove, etc</span>
|
||||
events: [<span class="hljs-string">'click'</span>]
|
||||
}
|
||||
});
|
||||
</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: Interactions">
|
||||
<i class="fa fa-angle-left"></i>
|
||||
</a>
|
||||
|
||||
|
||||
<a href="modes.html" class="navigation navigation-next " aria-label="Next page: Modes">
|
||||
<i class="fa fa-angle-right"></i>
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var gitbook = gitbook || [];
|
||||
gitbook.push(function() {
|
||||
gitbook.page.hasChanged({"page":{"title":"Events","level":"1.3.2.1","depth":3,"next":{"title":"Modes","level":"1.3.2.2","depth":3,"path":"general/interactions/modes.md","ref":"general/interactions/modes.md","articles":[]},"previous":{"title":"Interactions","level":"1.3.2","depth":2,"path":"general/interactions/README.md","ref":"general/interactions/README.md","articles":[{"title":"Events","level":"1.3.2.1","depth":3,"path":"general/interactions/events.md","ref":"general/interactions/events.md","articles":[]},{"title":"Modes","level":"1.3.2.2","depth":3,"path":"general/interactions/modes.md","ref":"general/interactions/modes.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":{},"gitbook":"3.2.2"},"file":{"path":"general/interactions/events.md","mtime":"2017-10-28T15:03:49.266Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-10-28T15:09:53.587Z"},"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/3.1.1/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>
|
||||
|
||||
+989
@@ -0,0 +1,989 @@
|
||||
|
||||
<!DOCTYPE HTML>
|
||||
<html lang="" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
<title>Interactions · GitBook</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="events.html" />
|
||||
|
||||
|
||||
<link rel="prev" href="../responsive.html" />
|
||||
|
||||
|
||||
<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 " data-level="1.3.1" data-path="../responsive.html">
|
||||
|
||||
<a href="../responsive.html">
|
||||
|
||||
|
||||
Responsive
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li class="chapter active" data-level="1.3.2" data-path="./">
|
||||
|
||||
<a href="./">
|
||||
|
||||
|
||||
Interactions
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
<ul class="articles">
|
||||
|
||||
|
||||
<li class="chapter " data-level="1.3.2.1" data-path="events.html">
|
||||
|
||||
<a href="events.html">
|
||||
|
||||
|
||||
Events
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li class="chapter " data-level="1.3.2.2" data-path="modes.html">
|
||||
|
||||
<a href="modes.html">
|
||||
|
||||
|
||||
Modes
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="chapter " data-level="1.3.3" data-path="../options.html">
|
||||
|
||||
<a href="../options.html">
|
||||
|
||||
|
||||
Options
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li class="chapter " data-level="1.3.4" data-path="../colors.html">
|
||||
|
||||
<a href="../colors.html">
|
||||
|
||||
|
||||
Colors
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li class="chapter " data-level="1.3.5" 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="../.." >Interactions</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="interactions">Interactions</h1>
|
||||
<p>The hover configuration is passed into the <code>options.hover</code> namespace. The global hover configuration is at <code>Chart.defaults.global.hover</code>. To configure which events trigger chart interactions, see <a href="events.html#events">events</a>. </p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>mode</code></td>
|
||||
<td><code>String</code></td>
|
||||
<td><code>'nearest'</code></td>
|
||||
<td>Sets which elements appear in the tooltip. See <a href="modes.html#interaction-modes">Interaction Modes</a> for details.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>intersect</code></td>
|
||||
<td><code>Boolean</code></td>
|
||||
<td><code>true</code></td>
|
||||
<td>if true, the hover mode only applies when the mouse position intersects an item on the chart.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>axis</code></td>
|
||||
<td><code>String</code></td>
|
||||
<td><code>'x'</code></td>
|
||||
<td>Can be set to <code>'x'</code>, <code>'y'</code>, or <code>'xy'</code> to define which directions are used in calculating distances. Defaults to <code>'x'</code> for <code>index</code> mode and <code>'xy'</code> in <code>dataset</code> and <code>nearest</code> modes.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>animationDuration</code></td>
|
||||
<td><code>Number</code></td>
|
||||
<td><code>400</code></td>
|
||||
<td>Duration in milliseconds it takes to animate hover style changes.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
</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="../responsive.html" class="navigation navigation-prev " aria-label="Previous page: Responsive">
|
||||
<i class="fa fa-angle-left"></i>
|
||||
</a>
|
||||
|
||||
|
||||
<a href="events.html" class="navigation navigation-next " aria-label="Next page: Events">
|
||||
<i class="fa fa-angle-right"></i>
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var gitbook = gitbook || [];
|
||||
gitbook.push(function() {
|
||||
gitbook.page.hasChanged({"page":{"title":"Interactions","level":"1.3.2","depth":2,"next":{"title":"Events","level":"1.3.2.1","depth":3,"path":"general/interactions/events.md","ref":"general/interactions/events.md","articles":[]},"previous":{"title":"Responsive","level":"1.3.1","depth":2,"path":"general/responsive.md","ref":"general/responsive.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":{},"gitbook":"3.2.2"},"file":{"path":"general/interactions/README.md","mtime":"2017-10-28T15:03:49.266Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-10-28T15:09:53.587Z"},"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/3.1.1/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>
|
||||
|
||||
+1044
File diff suppressed because it is too large
Load Diff
+987
@@ -0,0 +1,987 @@
|
||||
|
||||
<!DOCTYPE HTML>
|
||||
<html lang="" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
<title>Options · GitBook</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="colors.html" />
|
||||
|
||||
|
||||
<link rel="prev" href="interactions/modes.html" />
|
||||
|
||||
|
||||
<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 " 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="interactions/">
|
||||
|
||||
<a href="interactions/">
|
||||
|
||||
|
||||
Interactions
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
<ul class="articles">
|
||||
|
||||
|
||||
<li class="chapter " data-level="1.3.2.1" data-path="interactions/events.html">
|
||||
|
||||
<a href="interactions/events.html">
|
||||
|
||||
|
||||
Events
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li class="chapter " data-level="1.3.2.2" data-path="interactions/modes.html">
|
||||
|
||||
<a href="interactions/modes.html">
|
||||
|
||||
|
||||
Modes
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="chapter active" data-level="1.3.3" data-path="options.html">
|
||||
|
||||
<a href="options.html">
|
||||
|
||||
|
||||
Options
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li class="chapter " data-level="1.3.4" data-path="colors.html">
|
||||
|
||||
<a href="colors.html">
|
||||
|
||||
|
||||
Colors
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li class="chapter " data-level="1.3.5" 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=".." >Options</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="options">Options</h1>
|
||||
<h2 id="scriptable-options">Scriptable Options</h2>
|
||||
<p>Scriptable options also accept a function which is called for each data and that takes the unique argument <code>context</code> representing contextual information (see <a href="options.html#option-context">option context</a>).</p>
|
||||
<p>Example:</p>
|
||||
<pre><code class="lang-javascript">color: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">context</span>) </span>{
|
||||
<span class="hljs-keyword">var</span> index = context.dataIndex;
|
||||
<span class="hljs-keyword">var</span> value = context.dataset.data[index];
|
||||
<span class="hljs-keyword">return</span> value < <span class="hljs-number">0</span> ? <span class="hljs-string">'red'</span> : <span class="hljs-comment">// draw negative values in red</span>
|
||||
index % <span class="hljs-number">2</span> ? <span class="hljs-string">'blue'</span> : <span class="hljs-comment">// else, alternate values in blue and green</span>
|
||||
<span class="hljs-string">'green'</span>;
|
||||
}
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p><strong>Note:</strong> scriptable options are only supported by a few bubble chart options.</p>
|
||||
</blockquote>
|
||||
<h2 id="indexable-options">Indexable Options</h2>
|
||||
<p>Indexable options also accept an array in which each item corresponds to the element at the same index. Note that this method requires to provide as many items as data, so, in most cases, using a <a href="#scriptable-options">function</a> is more appropriated if supported.</p>
|
||||
<p>Example:</p>
|
||||
<pre><code class="lang-javascript">color: [
|
||||
<span class="hljs-string">'red'</span>, <span class="hljs-comment">// color for data at index 0</span>
|
||||
<span class="hljs-string">'blue'</span>, <span class="hljs-comment">// color for data at index 1</span>
|
||||
<span class="hljs-string">'green'</span>, <span class="hljs-comment">// color for data at index 2</span>
|
||||
<span class="hljs-string">'black'</span>, <span class="hljs-comment">// color for data at index 3</span>
|
||||
<span class="hljs-comment">//...</span>
|
||||
]
|
||||
</code></pre>
|
||||
<h2 id="option-context">Option Context</h2>
|
||||
<p>The option context is used to give contextual information when resolving options and currently only applies to <a href="#scriptable-options">scriptable options</a>.</p>
|
||||
<p>The context object contains the following properties:</p>
|
||||
<ul>
|
||||
<li><code>chart</code>: the associated chart</li>
|
||||
<li><code>dataIndex</code>: index of the current data</li>
|
||||
<li><code>dataset</code>: dataset at index <code>datasetIndex</code></li>
|
||||
<li><code>datasetIndex</code>: index of the current dataset</li>
|
||||
</ul>
|
||||
<p><strong>Important</strong>: since the context can represent different types of entities (dataset, data, etc.), some properties may be <code>undefined</code> so be sure to test any context property before using it.</p>
|
||||
|
||||
|
||||
</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="interactions/modes.html" class="navigation navigation-prev " aria-label="Previous page: Modes">
|
||||
<i class="fa fa-angle-left"></i>
|
||||
</a>
|
||||
|
||||
|
||||
<a href="colors.html" class="navigation navigation-next " aria-label="Next page: Colors">
|
||||
<i class="fa fa-angle-right"></i>
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var gitbook = gitbook || [];
|
||||
gitbook.push(function() {
|
||||
gitbook.page.hasChanged({"page":{"title":"Options","level":"1.3.3","depth":2,"next":{"title":"Colors","level":"1.3.4","depth":2,"path":"general/colors.md","ref":"general/colors.md","articles":[]},"previous":{"title":"Modes","level":"1.3.2.2","depth":3,"path":"general/interactions/modes.md","ref":"general/interactions/modes.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":{},"gitbook":"3.2.2"},"file":{"path":"general/options.md","mtime":"2017-10-28T15:03:49.266Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-10-28T15:09:53.587Z"},"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/3.1.1/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>
|
||||
|
||||
+1005
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user