]> git.ipfire.org Git - thirdparty/Chart.js.git/commitdiff
Some more line options
authorEvert Timberg <evert.timberg@gmail.com>
Thu, 4 Jun 2015 00:46:35 +0000 (20:46 -0400)
committerEvert Timberg <evert.timberg@gmail.com>
Thu, 4 Jun 2015 00:46:35 +0000 (20:46 -0400)
docs/01-Line-Chart.md

index 7ab8166a3aea1236be0cbf6eedc3f00bd19e7a4f..0800eb5b4d74d3c0ddfdc665b7cb981bb6275432 100644 (file)
@@ -27,24 +27,39 @@ var data = {
                {
                        label: "My First dataset",
 
-                       // String or array - if an array is specified, allows changing the value for the point at the given index
-                       fillColor: "rgba(220,220,220,0.2)",
+                       // Boolean - if true fill the area under the line
+                       fill: false,
 
-                       // String or array - if an array is specified, allows changing the value for the point at the given index
-                       strokeColor: "rgba(220,220,220,1)",
+                       // String - the color to fill the area under the line with if fill is true
+                       backgroundColor: "rgba(220,220,220,0.2)",
 
-                       // String or array - if an array is specified, allows changing the value for the point at the given index
-                       pointColor: "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 - if an array is specified, allows changing the value for the point at the given index
-                       pointStrokeColor: "#fff",
+                       // String or array - Line color
+                       borderColor: "rgba(220,220,220,1)",
 
-                       // String or array - if an array is specified, allows changing the value for the point at the given index
-                       pointHighlightFill: "#fff",
+                       // String or array - Point stroke color
+                       pointBorderColor: "rgba(220,220,220,1)",
 
-                       // String or array - if an array is specified, allows changing the value for the point at the given index
-                       pointHighlightStroke: "rgba(220,220,220,1)",
+                       // String or array - Point fill color
+                       pointBackgroundColor: "#fff",
 
+                       // Number or array - Stroke width of point border
+                       pointBorderWidth: 1,
+
+                       // Number or array - Radius of point when hovered
+                       pointHoverRadius: 5
+
+                       // String or array - point background color when hovered
+                       pointHoverBackgroundColor: "rgba(220,220,220,1)"
+
+                       // Point border color when hovered
+                       pointHoverBorderColor: "rgba(220,220,220,1)"
+
+                       // Number or array - border width of point when hovered
+                       pointBorderWidth: 2,
+
+                       // The actual data
                        data: [65, 59, 80, 81, 56, 55, 40],
 
                        // String - If specified, binds the dataset to a certain y-axis. If not specified, the first y-axis is used.
@@ -52,12 +67,16 @@ var data = {
                },
                {
                        label: "My Second dataset",
-                       fillColor: "rgba(151,187,205,0.2)",
-                       strokeColor: "rgba(151,187,205,1)",
-                       pointColor: "rgba(151,187,205,1)",
-                       pointStrokeColor: "#fff",
-                       pointHighlightFill: "#fff",
-                       pointHighlightStroke: "rgba(151,187,205,1)",
+                       fill: false,
+                       backgroundColor: "rgba(220,220,220,0.2)",
+                       borderColor: "rgba(220,220,220,1)",
+                       pointBorderColor: "rgba(220,220,220,1)",
+                       pointBackgroundColor: "#fff",
+                       pointBorderWidth: 1,
+                       pointHoverRadius: 5,
+                       pointHoverBackgroundColor: "rgba(220,220,220,1)",
+                       pointHoverBorderColor: "rgba(220,220,220,1)",
+                       pointBorderWidth: 2,
                        data: [28, 48, 40, 19, 86, 27, 90]
                }
        ]