archive-gh-me/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2025-12-08 20:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Update colours + example values in docs

Browse Source
This commit is contained in:
Nick Downie 2016-04-23 14:25:58 +01:00
parent 32db92c7e1
commit 527e7d9b7a
5 changed files with 67 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
docs/02-Line-Chart.md
View File

@ -37,17 +37,17 @@ var data = {
label: "My First dataset",
// Boolean - if true fill the area under the line
fill: false,
// Tension - bezier curve tension of the line. Set to 0 to draw straight lines connecting points
// Used to be called "tension" but was renamed for consistency. The old option name continues to work for compatibility.
lineTension: 0.1,
fill: false,
// Tension - bezier curve tension of the line. Set to 0 to draw straight lines connecting points
// Used to be called "tension" but was renamed for consistency. The old option name continues to work for compatibility.
lineTension: 0.1,
// String - the color to fill the area under the line with if fill is true
backgroundColor: "rgba(220,220,220,0.2)",
backgroundColor: "rgba(75,192,192,0.4)",
// String - Line color
borderColor: "rgba(220,220,220,1)",
// String - Line color
borderColor: "rgba(75,192,192,1)",
// String - cap style of the line. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap
borderCapStyle: 'butt',
@ -59,39 +59,39 @@ var data = {
borderDashOffset: 0.0,
// String - line join style. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin
borderJoinStyle: 'miter',
// The properties below allow an array to be specified to change the value of the item at the given index
borderJoinStyle: 'miter',
// String or Array - Point stroke color
pointBorderColor: "rgba(220,220,220,1)",
// The properties below allow an array to be specified to change the value of the item at the given index
// String or Array - Point fill color
// String or Array - Point stroke color
pointBorderColor: "rgba(75,192,192,1)",
// String or Array - Point fill color
pointBackgroundColor: "#fff",
// Number or Array - Stroke width of point border
// Number or Array - Stroke width of point border
pointBorderWidth: 1,
// Number or Array - Radius of point when hovered
// Number or Array - Radius of point when hovered
pointHoverRadius: 5,
// String or Array - point background color when hovered
pointHoverBackgroundColor: "rgba(220,220,220,1)",
// String or Array - point background color when hovered
pointHoverBackgroundColor: "rgba(75,192,192,1)",
// String or Array - Point border color when hovered
// String or Array - Point border color when hovered
pointHoverBorderColor: "rgba(220,220,220,1)",
// Number or Array - border width of point when hovered
pointHoverBorderWidth: 2,
// Number or Array - border width of point when hovered
pointHoverBorderWidth: 2,
// Number or Array - the pixel size of the point shape. Can be set to 0 to not render a circle over the point
// Used to be called "radius" but was renamed for consistency. The old option name continues to work for compatibility.
pointRadius: 1,
// Number or Array - the pixel size of the non-displayed point that reacts to mouse hover events
//
// Used to be called "hitRadius" but was renamed for consistency. The old option name continues to work for compatibility.
pointHitRadius: 10,
// Number or Array - the pixel size of the point shape. Can be set to 0 to not render a circle over the point
// Used to be called "radius" but was renamed for consistency. The old option name continues to work for compatibility.
pointRadius: 1,
// Number or Array - the pixel size of the non-displayed point that reacts to mouse hover events
//
// Used to be called "hitRadius" but was renamed for consistency. The old option name continues to work for compatibility.
pointHitRadius: 10,
// The actual data
data: [65, 59, 80, 81, 56, 55, 40],
@ -102,14 +102,14 @@ var data = {
{
label: "My Second dataset",
fill: false,
backgroundColor: "rgba(220,220,220,0.2)",
borderColor: "rgba(220,220,220,1)",
pointBorderColor: "rgba(220,220,220,1)",
backgroundColor: "rgba(255,205,86,0.4)",
borderColor: "rgba(255,205,86,1)",
pointBorderColor: "rgba(255,205,86,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(220,220,220,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBackgroundColor: "rgba(255,205,86,1)",
pointHoverBorderColor: "rgba(255,205,86,1)",
pointHoverBorderWidth: 2,
data: [28, 48, 40, 19, 86, 27, 90]
}

16
docs/03-Bar-Chart.md
View File

@ -32,19 +32,19 @@ var data = {
// The properties below allow an array to be specified to change the value of the item at the given index
// String or array - the bar color
backgroundColor: "rgba(220,220,220,0.2)",
backgroundColor: "rgba(255,99,132,0.2)",
// String or array - bar stroke color
borderColor: "rgba(220,220,220,1)",
borderColor: "rgba(255,99,132,1)",
// Number or array - bar border width
borderWidth: 1,
// String or array - fill color when hovered
hoverBackgroundColor: "rgba(220,220,220,0.2)",
hoverBackgroundColor: "rgba(255,99,132,0.4)",
// String or array - border color when hovered
hoverBorderColor: "rgba(220,220,220,1)",
hoverBorderColor: "rgba(255,99,132,1)",
// The actual data
data: [65, 59, 80, 81, 56, 55, 40],
@ -54,11 +54,11 @@ var data = {
},
{
label: "My Second dataset",
backgroundColor: "rgba(220,220,220,0.2)",
borderColor: "rgba(220,220,220,1)",
backgroundColor: "rgba(54,162,235,0.2)",
borderColor: "rgba(54,162,235,1)",
borderWidth: 1,
hoverBackgroundColor: "rgba(220,220,220,0.2)",
hoverBorderColor: "rgba(220,220,220,1)",
hoverBackgroundColor: "rgba(54,162,235,0.4)",
hoverBorderColor: "rgba(54,162,235,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]

16
docs/04-Radar-Chart.md
View File

@ -29,22 +29,22 @@ var data = {
datasets: [
{
label: "My First dataset",
backgroundColor: "rgba(220,220,220,0.2)",
borderColor: "rgba(220,220,220,1)",
pointBackgroundColor: "rgba(220,220,220,1)",
backgroundColor: "rgba(179,181,198,0.2)",
borderColor: "rgba(179,181,198,1)",
pointBackgroundColor: "rgba(179,181,198,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderColor: "rgba(179,181,198,1)",
data: [65, 59, 90, 81, 56, 55, 40]
},
{
label: "My Second dataset",
backgroundColor: "rgba(151,187,205,0.2)",
borderColor: "rgba(151,187,205,1)",
pointBackgroundColor: "rgba(151,187,205,1)",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
pointBackgroundColor: "rgba(255,99,132,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(151,187,205,1)",
pointHoverBorderColor: "rgba(255,99,132,1)",
data: [28, 48, 40, 19, 96, 27, 100]
}
]

22
docs/05-Polar-Area-Chart.md
View File

@ -27,18 +27,18 @@ new Chart(ctx, {
var data = {
datasets: [{
data: [
10,
32,
53,
14,
22,
11,
16,
7,
3,
14
],
backgroundColor: [
"#F7464A",
"#46BFBD",
"#FDB45C",
"#949FB1",
"#4D5360",
"#FF6384",
"#4BC0C0",
"#FFCE56",
"#E7E9ED",
"#36A2EB"
],
label: 'My dataset' // for legend
}],
@ -47,7 +47,7 @@ var data = {
"Green",
"Yellow",
"Grey",
"Dark Grey"
"Blue"
]
};
```

12
docs/06-Pie-Doughnut-Chart.md
View File

@ -53,14 +53,14 @@ var data = {
{
data: [300, 50, 100],
backgroundColor: [
"#F7464A",
"#46BFBD",
"#FDB45C"
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF5A5E",
"#5AD3D1",
"#FFC870"
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}]
};