It's that easy to get started using Chart.js! From here you can explore the many options that can help you customise your charts with scales, tooltips, labels, colors, custom actions, and much more.
-### Global chart configuration
+### Global Chart Configuration
This concept was introduced in Chart.js 1.0 to keep configuration DRY, and allow for changing options globally across chart types, avoiding the need to specify options for each instance, or the default for a particular chart type.
<canvas width="250" height="125"></canvas>
</div>
-### Example usage
+### Example Usage
```javascript
var myLineChart = new Chart(ctx, {
type: 'line',
options: options
});
```
-### Data structure
+### Data Structure
The following options can be included in a line chart dataset to configure options for that specific dataset.
The label key on each dataset is optional, and can be used when generating a scale for the chart.
-### Chart options
+### Chart Options
These are the customisation options specific to Line charts. These options are merged with the [global chart configuration options](#getting-started-global-chart-configuration), and form the options of the chart.
<canvas width="250" height="125"></canvas>
</div>
-### Example usage
+### Example Usage
```javascript
var myBarChart = new Chart(ctx, {
type: 'bar',
});
```
-### Data structure
+### Data Structure
The following options can be included in a bar chart dataset to configure options for that specific dataset.
Some properties can be specified as an array. If these are set to an array value, the first value applies to the first bar, the second value to the second bar, and so on.
<canvas width="250" height="125"></canvas>
</div>
-### Example usage
+### Example Usage
```javascript
var myRadarChart = new Chart(ctx, {
});
```
-### Data structure
+### Data Structure
The following options can be included in a radar chart dataset to configure options for that specific dataset.
<canvas width="250" height="125"></canvas>
</div>
-### Example usage
+### Example Usage
```javascript
new Chart(ctx, {
});
```
-### Data structure
+### Data Structure
The following options can be included in a polar area chart dataset to configure options for that specific dataset.
```
As you can see, for the chart data you pass in an array of objects, with a value and a colour. The value attribute should be a number, while the color attribute should be a string. Similar to CSS, for this string you can use HEX notation, RGB, RGBA or HSL.
-### Chart options
+### Chart Options
These are the customisation options specific to Polar Area charts. These options are merged with the [global chart configuration options](#getting-started-global-chart-configuration), and form the options of the chart.
</div>
<br>
-### Example usage
+### Example Usage
```javascript
// For a pie chart
});
```
-### Data structure
+### Data Structure
Property | Type | Usage
--- | --- | ---
For a pie chart, datasets need to contain an array of data points. The data points should be a number, Chart.js will total all of the numbers and calculate the relative proportion of each. You can also add an array of background colors. The color attributes should be a string. Similar to CSS, for this string you can use HEX notation, RGB, RGBA or HSL.
-### Chart options
+### Chart Options
These are the customisation options specific to Pie & Doughnut charts. These options are merged with the [global chart configuration options](#getting-started-global-chart-configuration), and form the options of the chart.
</div>
<br>
-### Example usage
+### Example Usage
```javascript
// For a bubble chart
});
```
-### Data structure
+### Data Structure
Property | Type | Usage
--- | --- | ---
}
```
-### Chart options
+### Chart Options
The bubble chart has no unique configuration options. To configure options common to all of the bubbles, the point element options are used.
---
-### Prototype methods
+### Prototype Methods
For each chart, there are a set of global prototype methods on the shared `ChartType` which you may find useful. These are available on all charts created with Chart.js, but for the examples, let's use a line chart we've made.
See `sample/line-customTooltips.html` for examples on how to get started.
-### Writing new scale types
+### Writing New Scale Types
Starting with Chart.js 2.0 scales can be individually extended. Scales should always derive from Chart.Scale.
}
```
-### Writing new chart types
+### Writing New Chart Types
Chart.js 2.0 introduces the concept of controllers for each dataset. Like scales, new controllers can be written as needed.
}
```
-### Extending existing chart types
+### Extending Existing Chart Types
Extending or replacing an existing controller type is easy. Simply replace the constructor for one of the built in types with your own.
projects / thirdparty / Chart.js.git / commitdiff
