mirror of
https://github.com/chartjs/Chart.js.git
synced 2025-12-08 20:36:08 +00:00
Add live samples back to docs for each chart type
This commit is contained in:
etimberg
Evert Timberg
parent
35dcfe00b1
commit
9ea18065ad
@ -1,6 +1,56 @@
|
||||
# Bar
|
||||
A bar chart provides a way of showing data values represented as vertical bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side.
|
||||
|
||||
{% chartjs %}
|
||||
{
|
||||
"type": "bar",
|
||||
"data": {
|
||||
"labels": [
|
||||
"January",
|
||||
"February",
|
||||
"March",
|
||||
"April",
|
||||
"May",
|
||||
"June",
|
||||
"July"
|
||||
],
|
||||
"datasets": [{
|
||||
"label": "My First Dataset",
|
||||
"data": [65, 59, 80, 81, 56, 55, 40],
|
||||
"fill": false,
|
||||
"backgroundColor": [
|
||||
"rgba(255, 99, 132, 0.2)",
|
||||
"rgba(255, 159, 64, 0.2)",
|
||||
"rgba(255, 205, 86, 0.2)",
|
||||
"rgba(75, 192, 192, 0.2)",
|
||||
"rgba(54, 162, 235, 0.2)",
|
||||
"rgba(153, 102, 255, 0.2)",
|
||||
"rgba(201, 203, 207, 0.2)"
|
||||
],
|
||||
"borderColor": [
|
||||
"rgb(255, 99, 132)",
|
||||
"rgb(255, 159, 64)",
|
||||
"rgb(255, 205, 86)",
|
||||
"rgb(75, 192, 192)",
|
||||
"rgb(54, 162, 235)",
|
||||
"rgb(153, 102, 255)",
|
||||
"rgb(201, 203, 207)"
|
||||
],
|
||||
"borderWidth": 1
|
||||
}]
|
||||
},
|
||||
"options": {
|
||||
"scales": {
|
||||
"yAxes": [{
|
||||
"ticks": {
|
||||
"beginAtZero": true
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
{% endchartjs %}
|
||||
|
||||
## Example Usage
|
||||
```javascript
|
||||
var myBarChart = new Chart(ctx, {
|
||||
@ -133,6 +183,47 @@ The following dataset properties are specific to stacked bar charts.
|
||||
|
||||
# Horizontal Bar Chart
|
||||
A horizontal bar chart is a variation on a vertical bar chart. It is sometimes used to show trend data, and the comparison of multiple data sets side by side.
|
||||
{% chartjs %}
|
||||
{
|
||||
"type": "horizontalBar",
|
||||
"data": {
|
||||
"labels": ["January", "February", "March", "April", "May", "June", "July"],
|
||||
"datasets": [{
|
||||
"label": "My First Dataset",
|
||||
"data": [65, 59, 80, 81, 56, 55, 40],
|
||||
"fill": false,
|
||||
"backgroundColor": [
|
||||
"rgba(255, 99, 132, 0.2)",
|
||||
"rgba(255, 159, 64, 0.2)",
|
||||
"rgba(255, 205, 86, 0.2)",
|
||||
"rgba(75, 192, 192, 0.2)",
|
||||
"rgba(54, 162, 235, 0.2)",
|
||||
"rgba(153, 102, 255, 0.2)",
|
||||
"rgba(201, 203, 207, 0.2)"
|
||||
],
|
||||
"borderColor": [
|
||||
"rgb(255, 99, 132)",
|
||||
"rgb(255, 159, 64)",
|
||||
"rgb(255, 205, 86)",
|
||||
"rgb(75, 192, 192)",
|
||||
"rgb(54, 162, 235)",
|
||||
"rgb(153, 102, 255)",
|
||||
"rgb(201, 203, 207)"
|
||||
],
|
||||
"borderWidth": 1
|
||||
}]
|
||||
},
|
||||
"options": {
|
||||
"scales": {
|
||||
"xAxes": [{
|
||||
"ticks": {
|
||||
"beginAtZero": true
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
{% endchartjs %}
|
||||
|
||||
## Example
|
||||
```javascript
|
||||
|
||||
@ -2,6 +2,27 @@
|
||||
|
||||
A bubble chart is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the corresponding horizontal and vertical axes. The third dimension is represented by the size of the individual bubbles.
|
||||
|
||||
{% chartjs %}
|
||||
{
|
||||
"type": "bubble",
|
||||
"data": {
|
||||
"datasets": [{
|
||||
"label": "First Dataset",
|
||||
"data": [{
|
||||
"x": 20,
|
||||
"y": 30,
|
||||
"r": 15
|
||||
}, {
|
||||
"x": 40,
|
||||
"y": 10,
|
||||
"r": 10
|
||||
}],
|
||||
"backgroundColor": "rgb(255, 99, 132)"
|
||||
}]
|
||||
},
|
||||
}
|
||||
{% endchartjs %}
|
||||
|
||||
## Example Usage
|
||||
|
||||
```javascript
|
||||
|
||||
@ -7,6 +7,28 @@ Pie and doughnut charts are effectively the same class in Chart.js, but have one
|
||||
|
||||
They are also registered under two aliases in the `Chart` core. Other than their different default value, and different alias, they are exactly the same.
|
||||
|
||||
{% chartjs %}
|
||||
{
|
||||
"type": "doughnut",
|
||||
"data": {
|
||||
"labels": [
|
||||
"Red",
|
||||
"Blue",
|
||||
"Yellow",
|
||||
],
|
||||
"datasets": [{
|
||||
"label": "My First Dataset",
|
||||
"data": [300, 50, 100],
|
||||
"backgroundColor": [
|
||||
"rgb(255, 99, 132)",
|
||||
"rgb(54, 162, 235)",
|
||||
"rgb(255, 205, 86)",
|
||||
]
|
||||
}]
|
||||
},
|
||||
}
|
||||
{% endchartjs %}
|
||||
|
||||
## Example Usage
|
||||
|
||||
```javascript
|
||||
|
||||
@ -1,6 +1,33 @@
|
||||
# Line
|
||||
A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets.
|
||||
|
||||
{% chartjs %}
|
||||
{
|
||||
"type": "line",
|
||||
"data": {
|
||||
"labels": [
|
||||
"January",
|
||||
"February",
|
||||
"March",
|
||||
"April",
|
||||
"May",
|
||||
"June",
|
||||
"July"
|
||||
],
|
||||
"datasets": [{
|
||||
"label": "My First Dataset",
|
||||
"data": [65, 59, 80, 81, 56, 55, 40],
|
||||
"fill": false,
|
||||
"borderColor": "rgb(75, 192, 192)",
|
||||
"lineTension": 0.1
|
||||
}]
|
||||
},
|
||||
"options": {
|
||||
|
||||
}
|
||||
}
|
||||
{% endchartjs %}
|
||||
|
||||
## Example Usage
|
||||
```javascript
|
||||
var myLineChart = new Chart(ctx, {
|
||||
|
||||
@ -34,4 +34,39 @@ var mixedChart = new Chart(ctx, {
|
||||
});
|
||||
```
|
||||
|
||||
At this point we have a chart rendering how we'd like. It'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 `type` field.
|
||||
At this point we have a chart rendering how we'd like. It'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 `type` field.
|
||||
|
||||
{% chartjs %}
|
||||
{
|
||||
"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
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
{% endchartjs %}
|
||||
|
||||
@ -4,6 +4,32 @@ Polar area charts are similar to pie charts, but each segment has the same angle
|
||||
|
||||
This type of chart is often useful when we want to show a comparison data similar to a pie chart, but also show a scale of values for context.
|
||||
|
||||
{% chartjs %}
|
||||
{
|
||||
"type": "polarArea",
|
||||
"data": {
|
||||
"labels": [
|
||||
"Red",
|
||||
"Green",
|
||||
"Yellow",
|
||||
"Grey",
|
||||
"Blue"
|
||||
],
|
||||
"datasets": [{
|
||||
"label": "My First Dataset",
|
||||
"data": [11, 16, 7, 3, 14],
|
||||
"backgroundColor": [
|
||||
"rgb(255, 99, 132)",
|
||||
"rgb(75, 192, 192)",
|
||||
"rgb(255, 205, 86)",
|
||||
"rgb(201, 203, 207)",
|
||||
"rgb(54, 162, 235)"
|
||||
]
|
||||
}]
|
||||
},
|
||||
}
|
||||
{% endchartjs %}
|
||||
|
||||
## Example Usage
|
||||
|
||||
```javascript
|
||||
|
||||
@ -3,6 +3,54 @@ A radar chart is a way of showing multiple data points and the variation between
|
||||
|
||||
They are often useful for comparing the points of two or more different data sets.
|
||||
|
||||
{% chartjs %}
|
||||
{
|
||||
"type": "radar",
|
||||
"data": {
|
||||
"labels": [
|
||||
"Eating",
|
||||
"Drinking",
|
||||
"Sleeping",
|
||||
"Designing",
|
||||
"Coding",
|
||||
"Cycling",
|
||||
"Running"
|
||||
],
|
||||
"datasets": [{
|
||||
"label": "My First Dataset",
|
||||
"data": [65, 59, 90, 81, 56, 55, 40],
|
||||
"fill": true,
|
||||
"backgroundColor": "rgba(255, 99, 132, 0.2)",
|
||||
"borderColor": "rgb(255, 99, 132)",
|
||||
"pointBackgroundColor": "rgb(255, 99, 132)",
|
||||
"pointBorderColor": "#fff",
|
||||
"pointHoverBackgroundColor": "#fff",
|
||||
"pointHoverBorderColor": "rgb(255, 99, 132)",
|
||||
"fill": true
|
||||
}, {
|
||||
"label": "My Second Dataset",
|
||||
"data": [28, 48, 40, 19, 96, 27, 100],
|
||||
"fill": true,
|
||||
"backgroundColor": "rgba(54, 162, 235, 0.2)",
|
||||
"borderColor": "rgb(54, 162, 235)",
|
||||
"pointBackgroundColor": "rgb(54, 162, 235)",
|
||||
"pointBorderColor": "#fff",
|
||||
"pointHoverBackgroundColor": "#fff",
|
||||
"pointHoverBorderColor": "rgb(54, 162, 235)",
|
||||
"fill": true
|
||||
}]
|
||||
},
|
||||
"options": {
|
||||
"elements": {
|
||||
"line": {
|
||||
"tension": 0,
|
||||
"borderWidth": 3
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
{% endchartjs %}
|
||||
|
||||
## Example Usage
|
||||
```javascript
|
||||
var myRadarChart = new Chart(ctx, {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user