From: Nick Downie Date: Sat, 23 Apr 2016 13:25:58 +0000 (+0100) Subject: Update colours + example values in docs X-Git-Tag: 2.1.0~52^2~1 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=527e7d9b7a5fe198e9cf096890bc30fb6a4bdafc;p=thirdparty%2FChart.js.git Update colours + example values in docs --- diff --git a/docs/02-Line-Chart.md b/docs/02-Line-Chart.md index aa10c4d8f..4f03fd462 100644 --- a/docs/02-Line-Chart.md +++ b/docs/02-Line-Chart.md @@ -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', + + // 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 - pointBorderColor: "rgba(220,220,220,1)", + // String or Array - Point stroke color + pointBorderColor: "rgba(75,192,192,1)", - // String or Array - Point fill color + // 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 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 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] } diff --git a/docs/03-Bar-Chart.md b/docs/03-Bar-Chart.md index d59a63715..dab2de5bd 100644 --- a/docs/03-Bar-Chart.md +++ b/docs/03-Bar-Chart.md @@ -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] } ] diff --git a/docs/04-Radar-Chart.md b/docs/04-Radar-Chart.md index 939a69e55..cdf04f395 100644 --- a/docs/04-Radar-Chart.md +++ b/docs/04-Radar-Chart.md @@ -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] } ] diff --git a/docs/05-Polar-Area-Chart.md b/docs/05-Polar-Area-Chart.md index fb2a44a3a..c3d696d87 100644 --- a/docs/05-Polar-Area-Chart.md +++ b/docs/05-Polar-Area-Chart.md @@ -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" ] }; ``` diff --git a/docs/06-Pie-Doughnut-Chart.md b/docs/06-Pie-Doughnut-Chart.md index b54c1bcfe..b1fef2288 100644 --- a/docs/06-Pie-Doughnut-Chart.md +++ b/docs/06-Pie-Doughnut-Chart.md @@ -53,14 +53,14 @@ var data = { { data: [300, 50, 100], backgroundColor: [ - "#F7464A", - "#46BFBD", - "#FDB45C" + "#FF6384", + "#36A2EB", + "#FFCE56" ], hoverBackgroundColor: [ - "#FF5A5E", - "#5AD3D1", - "#FFC870" + "#FF6384", + "#36A2EB", + "#FFCE56" ] }] };