Radial linear scale array properties for line width and color

This commit is contained in:
Evert Timberg 2016-06-07 20:09:33 -04:00
parent 5f7865c741
commit a687749ed4
3 changed files with 8 additions and 5 deletions

View File

@ -44,8 +44,8 @@ The grid line configuration is nested under the scale configuration in the `grid
Name | Type | Default | Description Name | Type | Default | Description
--- | --- | --- | --- --- | --- | --- | ---
display | Boolean | true | display | Boolean | true |
color | Color | "rgba(0, 0, 0, 0.1)" | Color of the grid lines. color | Color or Array[Color] | "rgba(0, 0, 0, 0.1)" | Color of the grid lines.
lineWidth | Number | 1 | Stroke width of grid lines lineWidth | Number or Array[Number] | 1 | Stroke width of grid lines
drawBorder | Boolean | true | If true draw border on the edge of the chart drawBorder | Boolean | true | If true draw border on the edge of the chart
drawOnChartArea | Boolean | true | If true, draw lines on the chart area inside the axis lines. This is useful when there are multiple axes and you need to control which grid lines are drawn drawOnChartArea | Boolean | true | If true, draw lines on the chart area inside the axis lines. This is useful when there are multiple axes and you need to control which grid lines are drawn
drawTicks | Boolean | true | If true, draw lines beside the ticks in the axis area beside the chart. drawTicks | Boolean | true | If true, draw lines beside the ticks in the axis area beside the chart.

View File

@ -66,6 +66,9 @@
}, },
scale: { scale: {
reverse: false, reverse: false,
gridLines: {
color: ['black', 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']
},
ticks: { ticks: {
beginAtZero: true beginAtZero: true
} }

View File

@ -296,9 +296,9 @@ module.exports = function(Chart) {
var yHeight = me.yCenter - yCenterOffset; var yHeight = me.yCenter - yCenterOffset;
// Draw circular lines around the scale // Draw circular lines around the scale
if (gridLineOpts.display) { if (gridLineOpts.display && index !== 0) {
ctx.strokeStyle = gridLineOpts.color; ctx.strokeStyle = helpers.getValueAtIndexOrDefault(gridLineOpts.color, index - 1);
ctx.lineWidth = gridLineOpts.lineWidth; ctx.lineWidth = helpers.getValueAtIndexOrDefault(gridLineOpts.lineWidth, index - 1);
if (opts.lineArc) { if (opts.lineArc) {
// Draw circular arcs between the points // Draw circular arcs between the points