label: "My First dataset",
// Boolean - if true fill the area under the line
- fill: false,\r
-\r
- // Tension - bezier curve tension of the line. Set to 0 to draw straight lines connecting points\r
- // Used to be called "tension" but was renamed for consistency. The old option name continues to work for compatibility.\r
- lineTension: 0.1,\r
+ 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)",\r
+ backgroundColor: "rgba(75,192,192,0.4)",
- // String - Line color\r
- 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',
borderDashOffset: 0.0,
// String - line join style. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin
- borderJoinStyle: 'miter',\r
-\r
- // The properties below allow an array to be specified to change the value of the item at the given index\r
+ borderJoinStyle: 'miter',
+
+ // The properties below allow an array to be specified to change the value of the item at the given index
- // String or Array - Point stroke color\r
- pointBorderColor: "rgba(220,220,220,1)",
+ // String or Array - Point stroke color
+ pointBorderColor: "rgba(75,192,192,1)",
- // String or Array - Point fill color\r
+ // String or Array - Point fill color
pointBackgroundColor: "#fff",
- // Number or Array - Stroke width of point border\r
+ // Number or Array - Stroke width of point border
pointBorderWidth: 1,
- // Number or Array - Radius of point when hovered\r
+ // Number or Array - Radius of point when hovered
pointHoverRadius: 5,
- // String or Array - point background color when hovered\r
- 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\r
+ // String or Array - Point border color when hovered
pointHoverBorderColor: "rgba(220,220,220,1)",
- // Number or Array - border width of point when hovered\r
- pointHoverBorderWidth: 2,\r
+ // 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 point shape. Can be set to 0 to not render a circle over the point\r
- // Used to be called "radius" but was renamed for consistency. The old option name continues to work for compatibility.\r
- pointRadius: 1,\r
-\r
- // Number or Array - the pixel size of the non-displayed point that reacts to mouse hover events\r
- //\r
- // Used to be called "hitRadius" but was renamed for consistency. The old option name continues to work for compatibility.\r
- pointHitRadius: 10,\r
+ // 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],
{
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]
}
// 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],
},
{
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]
}
]
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]
}
]
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
}],
"Green",
"Yellow",
"Grey",
- "Dark Grey"
+ "Blue"
]
};
```
{
data: [300, 50, 100],
backgroundColor: [
- "#F7464A",
- "#46BFBD",
- "#FDB45C"
+ "#FF6384",
+ "#36A2EB",
+ "#FFCE56"
],
hoverBackgroundColor: [
- "#FF5A5E",
- "#5AD3D1",
- "#FFC870"
+ "#FF6384",
+ "#36A2EB",
+ "#FFCE56"
]
}]
};