initial commit

This commit is contained in:
2017-12-14 10:17:13 +01:00
commit db72cb61d3
6942 changed files with 1773088 additions and 0 deletions
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff
+963
View File
@@ -0,0 +1,963 @@
<!DOCTYPE HTML>
<html lang="" >
<head>
<meta charset="UTF-8">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Charts · 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="line.html" />
<link rel="prev" href="../configuration/elements.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="../general/">
<a href="../general/">
General
</a>
<ul class="articles">
<li class="chapter " data-level="1.3.1" data-path="../general/responsive.html">
<a href="../general/responsive.html">
Responsive
</a>
</li>
<li class="chapter " data-level="1.3.2" data-path="../general/interactions/">
<a href="../general/interactions/">
Interactions
</a>
<ul class="articles">
<li class="chapter " data-level="1.3.2.1" data-path="../general/interactions/events.html">
<a href="../general/interactions/events.html">
Events
</a>
</li>
<li class="chapter " data-level="1.3.2.2" data-path="../general/interactions/modes.html">
<a href="../general/interactions/modes.html">
Modes
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.3.3" data-path="../general/options.html">
<a href="../general/options.html">
Options
</a>
</li>
<li class="chapter " data-level="1.3.4" data-path="../general/colors.html">
<a href="../general/colors.html">
Colors
</a>
</li>
<li class="chapter " data-level="1.3.5" data-path="../general/fonts.html">
<a href="../general/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 active" data-level="1.5" data-path="./">
<a href="./">
Charts
</a>
<ul class="articles">
<li class="chapter " data-level="1.5.1" data-path="line.html">
<a href="line.html">
Line
</a>
</li>
<li class="chapter " data-level="1.5.2" data-path="bar.html">
<a href="bar.html">
Bar
</a>
</li>
<li class="chapter " data-level="1.5.3" data-path="radar.html">
<a href="radar.html">
Radar
</a>
</li>
<li class="chapter " data-level="1.5.4" data-path="doughnut.html">
<a href="doughnut.html">
Doughnut & Pie
</a>
</li>
<li class="chapter " data-level="1.5.5" data-path="polar.html">
<a href="polar.html">
Polar Area
</a>
</li>
<li class="chapter " data-level="1.5.6" data-path="bubble.html">
<a href="bubble.html">
Bubble
</a>
</li>
<li class="chapter " data-level="1.5.7" data-path="scatter.html">
<a href="scatter.html">
Scatter
</a>
</li>
<li class="chapter " data-level="1.5.8" data-path="area.html">
<a href="area.html">
Area
</a>
</li>
<li class="chapter " data-level="1.5.9" data-path="mixed.html">
<a href="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=".." >Charts</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="charts">Charts</h1>
<p>Chart.js comes with built-in chart types:</p>
<ul>
<li><a href="line.html">line</a></li>
<li><a href="bar.html">bar</a></li>
<li><a href="radar.html">radar</a></li>
<li><a href="polar.html">polar area</a></li>
<li><a href="doughnut.html">doughnut and pie</a></li>
<li><a href="bubble.html">bubble</a></li>
</ul>
<p><a href="area.html">Area charts</a> can be built from a line or radar chart using the dataset <code>fill</code> option.</p>
<p>To create a new chart type, see the <a href="../developers/charts.html#new-charts">developer notes</a></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="../configuration/elements.html" class="navigation navigation-prev " aria-label="Previous page: Elements">
<i class="fa fa-angle-left"></i>
</a>
<a href="line.html" class="navigation navigation-next " aria-label="Next page: Line">
<i class="fa fa-angle-right"></i>
</a>
</div>
<script>
var gitbook = gitbook || [];
gitbook.push(function() {
gitbook.page.hasChanged({"page":{"title":"Charts","level":"1.5","depth":1,"next":{"title":"Line","level":"1.5.1","depth":2,"path":"charts/line.md","ref":"charts/line.md","articles":[]},"previous":{"title":"Elements","level":"1.4.6","depth":2,"path":"configuration/elements.md","ref":"configuration/elements.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":"charts/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>
File diff suppressed because it is too large Load Diff
+981
View File
@@ -0,0 +1,981 @@
<!DOCTYPE HTML>
<html lang="" >
<head>
<meta charset="UTF-8">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Mixed · 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="../axes/" />
<link rel="prev" href="area.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="../general/">
<a href="../general/">
General
</a>
<ul class="articles">
<li class="chapter " data-level="1.3.1" data-path="../general/responsive.html">
<a href="../general/responsive.html">
Responsive
</a>
</li>
<li class="chapter " data-level="1.3.2" data-path="../general/interactions/">
<a href="../general/interactions/">
Interactions
</a>
<ul class="articles">
<li class="chapter " data-level="1.3.2.1" data-path="../general/interactions/events.html">
<a href="../general/interactions/events.html">
Events
</a>
</li>
<li class="chapter " data-level="1.3.2.2" data-path="../general/interactions/modes.html">
<a href="../general/interactions/modes.html">
Modes
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.3.3" data-path="../general/options.html">
<a href="../general/options.html">
Options
</a>
</li>
<li class="chapter " data-level="1.3.4" data-path="../general/colors.html">
<a href="../general/colors.html">
Colors
</a>
</li>
<li class="chapter " data-level="1.3.5" data-path="../general/fonts.html">
<a href="../general/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="./">
<a href="./">
Charts
</a>
<ul class="articles">
<li class="chapter " data-level="1.5.1" data-path="line.html">
<a href="line.html">
Line
</a>
</li>
<li class="chapter " data-level="1.5.2" data-path="bar.html">
<a href="bar.html">
Bar
</a>
</li>
<li class="chapter " data-level="1.5.3" data-path="radar.html">
<a href="radar.html">
Radar
</a>
</li>
<li class="chapter " data-level="1.5.4" data-path="doughnut.html">
<a href="doughnut.html">
Doughnut & Pie
</a>
</li>
<li class="chapter " data-level="1.5.5" data-path="polar.html">
<a href="polar.html">
Polar Area
</a>
</li>
<li class="chapter " data-level="1.5.6" data-path="bubble.html">
<a href="bubble.html">
Bubble
</a>
</li>
<li class="chapter " data-level="1.5.7" data-path="scatter.html">
<a href="scatter.html">
Scatter
</a>
</li>
<li class="chapter " data-level="1.5.8" data-path="area.html">
<a href="area.html">
Area
</a>
</li>
<li class="chapter active" data-level="1.5.9" data-path="mixed.html">
<a href="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=".." >Mixed</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="mixed-chart-types">Mixed Chart Types</h1>
<p>With Chart.js, it is possible to create mixed charts that are a combination of two or more different chart types. A common example is a bar chart that also includes a line dataset.</p>
<p>Creating a mixed chart starts with the initialization of a basic chart.</p>
<pre><code class="lang-javascript"><span class="hljs-keyword">var</span> myChart = <span class="hljs-keyword">new</span> Chart(ctx, {
type: <span class="hljs-string">&apos;bar&apos;</span>,
data: data,
options: options
});
</code></pre>
<p>At this point we have a standard bar chart. Now we need to convert one of the datasets to a line dataset.</p>
<pre><code class="lang-javascript"><span class="hljs-keyword">var</span> mixedChart = <span class="hljs-keyword">new</span> Chart(ctx, {
type: <span class="hljs-string">&apos;bar&apos;</span>,
data: {
datasets: [{
label: <span class="hljs-string">&apos;Bar Dataset&apos;</span>,
data: [<span class="hljs-number">10</span>, <span class="hljs-number">20</span>, <span class="hljs-number">30</span>, <span class="hljs-number">40</span>]
}, {
label: <span class="hljs-string">&apos;Line Dataset&apos;</span>,
data: [<span class="hljs-number">50</span>, <span class="hljs-number">50</span>, <span class="hljs-number">50</span>, <span class="hljs-number">50</span>],
<span class="hljs-comment">// Changes this dataset to become a line</span>
type: <span class="hljs-string">&apos;line&apos;</span>
}],
labels: [<span class="hljs-string">&apos;January&apos;</span>, <span class="hljs-string">&apos;February&apos;</span>, <span class="hljs-string">&apos;March&apos;</span>, <span class="hljs-string">&apos;April&apos;</span>]
},
options: options
});
</code></pre>
<p>At this point we have a chart rendering how we&apos;d like. It&apos;s important to note that the default options for a line chart are not merged in this case. Only the options for the default type are merged in. In this case, that means that the default options for a bar chart are merged because that is the type specified by the <code>type</code> field.</p>
<p><div class="chartjs-wrapper"><canvas id="chartjs-7" class="chartjs" width="undefined" height="undefined"></canvas><script>new Chart(document.getElementById("chartjs-7"),{"type":"bar","data":{"labels":["January","February","March","April"],"datasets":[{"label":"Bar Dataset","data":[10,20,30,40],"borderColor":"rgb(255, 99, 132)","backgroundColor":"rgba(255, 99, 132, 0.2)"},{"label":"Line Dataset","data":[50,50,50,50],"type":"line","fill":false,"borderColor":"rgb(54, 162, 235)"}]},"options":{"scales":{"yAxes":[{"ticks":{"beginAtZero":true}}]}}});</script></div></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="area.html" class="navigation navigation-prev " aria-label="Previous page: Area">
<i class="fa fa-angle-left"></i>
</a>
<a href="../axes/" class="navigation navigation-next " aria-label="Next page: Axes">
<i class="fa fa-angle-right"></i>
</a>
</div>
<script>
var gitbook = gitbook || [];
gitbook.push(function() {
gitbook.page.hasChanged({"page":{"title":"Mixed","level":"1.5.9","depth":2,"next":{"title":"Axes","level":"1.6","depth":1,"path":"axes/README.md","ref":"axes/README.md","articles":[{"title":"Cartesian","level":"1.6.1","depth":2,"path":"axes/cartesian/README.md","ref":"axes/cartesian/README.md","articles":[{"title":"Category","level":"1.6.1.1","depth":3,"path":"axes/cartesian/category.md","ref":"axes/cartesian/category.md","articles":[]},{"title":"Linear","level":"1.6.1.2","depth":3,"path":"axes/cartesian/linear.md","ref":"axes/cartesian/linear.md","articles":[]},{"title":"Logarithmic","level":"1.6.1.3","depth":3,"path":"axes/cartesian/logarithmic.md","ref":"axes/cartesian/logarithmic.md","articles":[]},{"title":"Time","level":"1.6.1.4","depth":3,"path":"axes/cartesian/time.md","ref":"axes/cartesian/time.md","articles":[]}]},{"title":"Radial","level":"1.6.2","depth":2,"path":"axes/radial/README.md","ref":"axes/radial/README.md","articles":[{"title":"Linear","level":"1.6.2.1","depth":3,"path":"axes/radial/linear.md","ref":"axes/radial/linear.md","articles":[]}]},{"title":"Labelling","level":"1.6.3","depth":2,"path":"axes/labelling.md","ref":"axes/labelling.md","articles":[]},{"title":"Styling","level":"1.6.4","depth":2,"path":"axes/styling.md","ref":"axes/styling.md","articles":[]}]},"previous":{"title":"Area","level":"1.5.8","depth":2,"path":"charts/area.md","ref":"charts/area.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":"charts/mixed.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>
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff
+992
View File
@@ -0,0 +1,992 @@
<!DOCTYPE HTML>
<html lang="" >
<head>
<meta charset="UTF-8">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Scatter · 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="area.html" />
<link rel="prev" href="bubble.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="../general/">
<a href="../general/">
General
</a>
<ul class="articles">
<li class="chapter " data-level="1.3.1" data-path="../general/responsive.html">
<a href="../general/responsive.html">
Responsive
</a>
</li>
<li class="chapter " data-level="1.3.2" data-path="../general/interactions/">
<a href="../general/interactions/">
Interactions
</a>
<ul class="articles">
<li class="chapter " data-level="1.3.2.1" data-path="../general/interactions/events.html">
<a href="../general/interactions/events.html">
Events
</a>
</li>
<li class="chapter " data-level="1.3.2.2" data-path="../general/interactions/modes.html">
<a href="../general/interactions/modes.html">
Modes
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.3.3" data-path="../general/options.html">
<a href="../general/options.html">
Options
</a>
</li>
<li class="chapter " data-level="1.3.4" data-path="../general/colors.html">
<a href="../general/colors.html">
Colors
</a>
</li>
<li class="chapter " data-level="1.3.5" data-path="../general/fonts.html">
<a href="../general/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="./">
<a href="./">
Charts
</a>
<ul class="articles">
<li class="chapter " data-level="1.5.1" data-path="line.html">
<a href="line.html">
Line
</a>
</li>
<li class="chapter " data-level="1.5.2" data-path="bar.html">
<a href="bar.html">
Bar
</a>
</li>
<li class="chapter " data-level="1.5.3" data-path="radar.html">
<a href="radar.html">
Radar
</a>
</li>
<li class="chapter " data-level="1.5.4" data-path="doughnut.html">
<a href="doughnut.html">
Doughnut & Pie
</a>
</li>
<li class="chapter " data-level="1.5.5" data-path="polar.html">
<a href="polar.html">
Polar Area
</a>
</li>
<li class="chapter " data-level="1.5.6" data-path="bubble.html">
<a href="bubble.html">
Bubble
</a>
</li>
<li class="chapter active" data-level="1.5.7" data-path="scatter.html">
<a href="scatter.html">
Scatter
</a>
</li>
<li class="chapter " data-level="1.5.8" data-path="area.html">
<a href="area.html">
Area
</a>
</li>
<li class="chapter " data-level="1.5.9" data-path="mixed.html">
<a href="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=".." >Scatter</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="scatter-chart">Scatter Chart</h1>
<p>Scatter charts are based on basic line charts with the x axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties. The example below creates a scatter chart with 3 points.</p>
<pre><code class="lang-javascript"><span class="hljs-keyword">var</span> scatterChart = <span class="hljs-keyword">new</span> Chart(ctx, {
type: <span class="hljs-string">&apos;scatter&apos;</span>,
data: {
datasets: [{
label: <span class="hljs-string">&apos;Scatter Dataset&apos;</span>,
data: [{
x: <span class="hljs-number">-10</span>,
y: <span class="hljs-number">0</span>
}, {
x: <span class="hljs-number">0</span>,
y: <span class="hljs-number">10</span>
}, {
x: <span class="hljs-number">10</span>,
y: <span class="hljs-number">5</span>
}]
}]
},
options: {
scales: {
xAxes: [{
type: <span class="hljs-string">&apos;linear&apos;</span>,
position: <span class="hljs-string">&apos;bottom&apos;</span>
}]
}
}
});
</code></pre>
<h2 id="dataset-properties">Dataset Properties</h2>
<p>The scatter chart supports all of the same properties as the <a href="line.html#dataset-properties">line chart</a>.</p>
<h2 id="data-structure">Data Structure</h2>
<p>Unlike the line chart where data can be supplied in two different formats, the scatter chart only accepts data in a point format.</p>
<pre><code class="lang-javascript">data: [{
x: <span class="hljs-number">10</span>,
y: <span class="hljs-number">20</span>
}, {
x: <span class="hljs-number">15</span>,
y: <span class="hljs-number">10</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="bubble.html" class="navigation navigation-prev " aria-label="Previous page: Bubble">
<i class="fa fa-angle-left"></i>
</a>
<a href="area.html" class="navigation navigation-next " aria-label="Next page: Area">
<i class="fa fa-angle-right"></i>
</a>
</div>
<script>
var gitbook = gitbook || [];
gitbook.push(function() {
gitbook.page.hasChanged({"page":{"title":"Scatter","level":"1.5.7","depth":2,"next":{"title":"Area","level":"1.5.8","depth":2,"path":"charts/area.md","ref":"charts/area.md","articles":[]},"previous":{"title":"Bubble","level":"1.5.6","depth":2,"path":"charts/bubble.md","ref":"charts/bubble.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":"charts/scatter.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>