| ---- | ---- | ------- | -----------
| `display` | `boolean` | `true` | If false, do not display grid lines for this axis.
| `circular` | `boolean` | `false` | If true, gridlines are circular (on radar chart only).
-| `color` | <code>Color|Color[]</code> | `'rgba(0, 0, 0, 0.1)'` | The color of the grid lines. If specified as an array, the first color applies to the first grid line, the second to the second grid line and so on.
+| `color` | <code>Color|Color[]|function</code> | `'rgba(0, 0, 0, 0.1)'` | The color of the grid lines. If specified as an array, the first color applies to the first grid line, the second to the second grid line and so on.
| `borderDash` | `number[]` | `[]` | Length and spacing of dashes on grid lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
-| `borderDashOffset` | `number` | `0.0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
-| `lineWidth` | <code>number|number[]</code> | `1` | Stroke width of grid lines.
+| `borderDashOffset` | <code>number|function</code> | `0.0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
+| `lineWidth` | <code>number|number[]|function</code> | `1` | Stroke width of grid lines.
| `drawBorder` | `boolean` | `true` | If true, draw border at the edge between the axis and the chart area.
| `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.
| `offsetGridLines` | `boolean` | `false` | If true, grid lines will be shifted to be between labels. This is set to `true` for a bar chart by default.
| `z` | `number` | `0` | z-index of gridline layer. Values <= 0 are drawn under datasets, > 0 on top.
+For function arguments, the function is passed a context object that is of the form:
+
+```javscript
+{
+ scale: // Scale object
+ tick: // Tick object
+}
+```
+
## Tick Configuration
The tick configuration is nested under the scale configuration in the `ticks` key. It defines options for the tick marks that are generated by the axis.
### Customizability
* `custom` attribute of elements was removed. Please use scriptable options
-* The `zeroLine*` options of axes were removed.
+* The `zeroLine*` options of axes were removed. Use scriptable scale options instead.
* The `hover` property of scriptable options `context` object was renamed to `active` to align it with the datalabels plugin.
### Options
}, {
title: 'Grid lines style',
path: 'scales/gridlines-style.html'
+ }, {
+ title: 'Scriptable Grid lines',
+ path: 'scales/gridlines-scriptable.html'
}, {
title: 'Multiline labels',
path: 'scales/multiline-labels.html'
--- /dev/null
+<!doctype html>
+<html>
+
+<head>
+ <title>Grid Lines Scriptable Settings</title>
+ <script src="../../dist/Chart.min.js"></script>
+ <script src="../utils.js"></script>
+ <style>
+ canvas{
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ }
+ </style>
+</head>
+
+<body>
+ <div style="width:75%;">
+ <canvas id="canvas"></canvas>
+ </div>
+ <script>
+ var config = {
+ type: 'line',
+ data: {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [{
+ label: 'My First dataset',
+ backgroundColor: window.chartColors.red,
+ borderColor: window.chartColors.red,
+ data: [10, 30, 39, 20, 25, 34, -10],
+ fill: false,
+ }, {
+ label: 'My Second dataset',
+ fill: false,
+ backgroundColor: window.chartColors.blue,
+ borderColor: window.chartColors.blue,
+ data: [18, 33, 22, 19, 11, -39, 30],
+ }]
+ },
+ options: {
+ responsive: true,
+ title: {
+ display: true,
+ text: 'Grid Line Settings'
+ },
+ scales: {
+ yAxes: [{
+ gridLines: {
+ drawBorder: false,
+ color: function(context) {
+ if (context.tick.value > 0) {
+ return window.chartColors.green;
+ } else if (context.tick.value < 0) {
+ return window.chartColors.red;
+ }
+
+ return '#000000';
+ },
+ },
+ }]
+ }
+ }
+ };
+
+ window.onload = function() {
+ var ctx = document.getElementById('canvas').getContext('2d');
+ window.myLine = new Chart(ctx, config);
+ };
+ </script>
+</body>
+
+</html>
const isArray = helpers.isArray;
const isNullOrUndef = helpers.isNullOrUndef;
const valueOrDefault = helpers.valueOrDefault;
-const valueAtIndexOrDefault = helpers.valueAtIndexOrDefault;
+const resolve = helpers.options.resolve;
defaults._set('scale', {
display: true,
fontStyle: valueOrDefault(nestedOpts.fontStyle, options.fontStyle),
lineHeight: valueOrDefault(nestedOpts.lineHeight, options.lineHeight)
}), {
- color: helpers.options.resolve([nestedOpts.fontColor, options.fontColor, defaults.global.defaultFontColor])
+ color: resolve([nestedOpts.fontColor, options.fontColor, defaults.global.defaultFontColor])
});
}
var isHorizontal = me.isHorizontal();
var ticks = me._ticksToDraw;
var ticksLength = ticks.length + (offsetGridLines ? 1 : 0);
+ var context;
var tl = getTickMarkLength(gridLines);
var items = [];
- var axisWidth = gridLines.drawBorder ? valueAtIndexOrDefault(gridLines.lineWidth, 0, 0) : 0;
+
+ context = {
+ scale: me,
+ tick: ticks[0],
+ };
+ var axisWidth = gridLines.drawBorder ? resolve([gridLines.lineWidth, 0], context, 0) : 0;
var axisHalfWidth = axisWidth / 2;
var alignPixel = helpers._alignPixel;
var alignBorderValue = function(pixel) {
for (i = 0; i < ticksLength; ++i) {
tick = ticks[i] || {};
- const lineWidth = valueAtIndexOrDefault(gridLines.lineWidth, i, 1);
- const lineColor = valueAtIndexOrDefault(gridLines.color, i, 'rgba(0,0,0,0.1)');
+ context = {
+ scale: me,
+ tick,
+ };
+
+ const lineWidth = resolve([gridLines.lineWidth], context, i);
+ const lineColor = resolve([gridLines.color], context, i);
const borderDash = gridLines.borderDash || [];
- const borderDashOffset = gridLines.borderDashOffset || 0.0;
+ const borderDashOffset = resolve([gridLines.borderDashOffset], context, i);
lineValue = getPixelForGridLine(me, tick._index || i, offsetGridLines);
var ctx = me.ctx;
var chart = me.chart;
var alignPixel = helpers._alignPixel;
- var axisWidth = gridLines.drawBorder ? valueAtIndexOrDefault(gridLines.lineWidth, 0, 0) : 0;
+ var context = {
+ scale: me,
+ tick: me._ticksToDraw[0],
+ };
+ var axisWidth = gridLines.drawBorder ? resolve([gridLines.lineWidth, 0], context, 0) : 0;
var items = me._gridLineItems || (me._gridLineItems = me._computeGridLineItems(chartArea));
var width, color, i, ilen, item;
if (axisWidth) {
// Draw the line at the edge of the axis
var firstLineWidth = axisWidth;
- var lastLineWidth = valueAtIndexOrDefault(gridLines.lineWidth, items.ticksLength - 1, 1);
+ context = {
+ scale: me,
+ tick: me._ticksToDraw[items.ticksLength - 1],
+ };
+ var lastLineWidth = resolve([gridLines.lineWidth, 1], context, items.ticksLength - 1);
var borderValue = items.borderValue;
var x1, x2, y1, y2;
}
ctx.lineWidth = axisWidth;
- ctx.strokeStyle = valueAtIndexOrDefault(gridLines.color, 0);
+ ctx.strokeStyle = resolve([gridLines.color], context, 0);
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
projects / thirdparty / Chart.js.git / commitdiff
