Add a new `offset` option to scales to add extra space at edges and remove the `includeOffset` argument from `getPixelForValue()` and `getPixelForTick()`. The bar controller now automatically calculates the bar width to avoid overlaps. When `offsetGridLines` is true, grid lines move to the left by one half of the tick interval, and labels don't move.
| -----| ---- | --------| -----------
| `type` | `String` | | Type of scale being employed. Custom scales can be created and registered with a string key. This allows changing the type of an axis for a chart.
| `position` | `String` | | Position of the axis in the chart. Possible values are: `'top'`, `'left'`, `'bottom'`, `'right'`
+| `offset` | `Boolean` | `false` | If true, extra space is added to the both edges and the axis is scaled to fit into the chart area. This is set to `true` in the bar chart by default.
| `id` | `String` | | The ID is used to link datasets and scale axes together. [more...](#axis-id)
| `gridLines` | `Object` | | Grid line configuration. [more...](../styling.md#grid-line-configuration)
| `scaleLabel` | `Object` | | Scale title configuration. [more...](../labelling.md#scale-title-configuration)
}
}
});
-```
\ No newline at end of file
+```
| `zeroLineColor` | Color | `'rgba(0, 0, 0, 0.25)'` | Stroke color of the grid line for the first index (index 0).
| `zeroLineBorderDash` | `Number[]` | `[]` | Length and spacing of dashes of the grid line for the first index (index 0). See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash)
| `zeroLineBorderDashOffset` | `Number` | `0` | Offset for line dashes of the grid line for the first index (index 0). See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset)
-| `offsetGridLines` | `Boolean` | `false` | If true, labels are shifted to be between grid lines. This is used in the bar chart and should not generally be used.
+| `offsetGridLines` | `Boolean` | `false` | If true, grid lines will be shifted to be between labels. This is set to `true` in the bar chart by default.
## 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.
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
-| `barPercentage` | `Number` | `0.9` | Percent (0-1) of the available width each bar should be within the category percentage. 1.0 will take the whole category width and put the bars right next to each other. [more...](#barpercentage-vs-categorypercentage)
-| `categoryPercentage` | `Number` | `0.8` | Percent (0-1) of the available width (the space between the gridlines for small datasets) for each data-point to use for the bars. [more...](#barpercentage-vs-categorypercentage)
-| `barThickness` | `Number` | | Manually set width of each bar in pixels. If not set, the bars are sized automatically using `barPercentage` and `categoryPercentage`;
-| `maxBarThickness` | `Number` | | Set this to ensure that the automatically sized bars are not sized thicker than this. Only works if barThickness is not set (automatic sizing is enabled).
-| `gridLines.offsetGridLines` | `Boolean` | `true` | If true, the bars for a particular data point fall between the grid lines. If false, the grid line will go right down the middle of the bars. [more...](#offsetgridlines)
+| `barPercentage` | `Number` | `0.9` | Percent (0-1) of the available width each bar should be within the category width. 1.0 will take the whole category width and put the bars right next to each other. [more...](#barpercentage-vs-categorypercentage)
+| `categoryPercentage` | `Number` | `0.8` | Percent (0-1) of the available width each category should be within the sample width. [more...](#barpercentage-vs-categorypercentage)
+| `barThickness` | `Number` | | Manually set width of each bar in pixels. If not set, the base sample widths are calculated automatically so that they take the full available widths without overlap. Then, the bars are sized using `barPercentage` and `categoryPercentage`.
+| `maxBarThickness` | `Number` | | Set this to ensure that bars are not sized thicker than this.
+| `gridLines.offsetGridLines` | `Boolean` | `true` | If true, the bars for a particular data point fall between the grid lines. The grid line will move to the left by one half of the tick interval. If false, the grid line will go right down the middle of the bars. [more...](#offsetgridlines)
### offsetGridLines
-If true, the bars for a particular data point fall between the grid lines. If false, the grid line will go right down the middle of the bars. It is unlikely that this will ever need to be changed in practice. It exists more as a way to reuse the axis code by configuring the existing axis slightly differently.
+If true, the bars for a particular data point fall between the grid lines. The grid line will move to the left by one half of the tick interval, which is the space between the grid lines. If false, the grid line will go right down the middle of the bars. This is set to true for a bar chart while false for other charts by default.
-This setting applies to the axis configuration for a bar chart. If axes are added to the chart, this setting will need to be set for each new axis.
+This setting applies to the axis configuration. If axes are added to the chart, this setting will need to be set for each new axis.
```javascript
options = {
categoryPercentage: 0.8,
barPercentage: 0.9,
+ // offset settings
+ offset: true,
+
// grid line settings
gridLines: {
offsetGridLines: true
categoryPercentage: 0.8,
barPercentage: 0.9,
+ // offset settings
+ offset: true,
+
// grid line settings
gridLines: {
offsetGridLines: true
getRuler: function() {
var me = this;
var scale = me.getIndexScale();
- var options = scale.options;
var stackCount = me.getStackCount();
- var fullSize = scale.isHorizontal() ? scale.width : scale.height;
- var tickSize = fullSize / scale.getTicks().length;
- var categorySize = tickSize * options.categoryPercentage;
- var fullBarSize = categorySize / stackCount;
- var barSize = fullBarSize * options.barPercentage;
-
- barSize = Math.min(
- helpers.valueOrDefault(options.barThickness, barSize),
- helpers.valueOrDefault(options.maxBarThickness, Infinity));
+ var datasetIndex = me.index;
+ var pixels = [];
+ var isHorizontal = scale.isHorizontal();
+ var start = isHorizontal ? scale.left : scale.top;
+ var end = start + (isHorizontal ? scale.width : scale.height);
+ var i, ilen;
+
+ for (i = 0, ilen = me.getMeta().data.length; i < ilen; ++i) {
+ pixels.push(scale.getPixelForValue(null, i, datasetIndex));
+ }
return {
+ pixels: pixels,
+ start: start,
+ end: end,
stackCount: stackCount,
- tickSize: tickSize,
- categorySize: categorySize,
- categorySpacing: tickSize - categorySize,
- fullBarSize: fullBarSize,
- barSize: barSize,
- barSpacing: fullBarSize - barSize,
scale: scale
};
},
*/
calculateBarIndexPixels: function(datasetIndex, index, ruler) {
var me = this;
- var scale = ruler.scale;
- var isCombo = me.chart.isCombo;
+ var options = ruler.scale.options;
var stackIndex = me.getStackIndex(datasetIndex);
- var base = scale.getPixelForValue(null, index, datasetIndex, isCombo);
- var size = ruler.barSize;
+ var pixels = ruler.pixels;
+ var base = pixels[index];
+ var length = pixels.length;
+ var start = ruler.start;
+ var end = ruler.end;
+ var leftSampleSize, rightSampleSize, leftCategorySize, rightCategorySize, fullBarSize, size;
+
+ if (length === 1) {
+ leftSampleSize = base > start ? base - start : end - base;
+ rightSampleSize = base < end ? end - base : base - start;
+ } else {
+ if (index > 0) {
+ leftSampleSize = (base - pixels[index - 1]) / 2;
+ if (index === length - 1) {
+ rightSampleSize = leftSampleSize;
+ }
+ }
+ if (index < length - 1) {
+ rightSampleSize = (pixels[index + 1] - base) / 2;
+ if (index === 0) {
+ leftSampleSize = rightSampleSize;
+ }
+ }
+ }
+
+ leftCategorySize = leftSampleSize * options.categoryPercentage;
+ rightCategorySize = rightSampleSize * options.categoryPercentage;
+ fullBarSize = (leftCategorySize + rightCategorySize) / ruler.stackCount;
+ size = fullBarSize * options.barPercentage;
+
+ size = Math.min(
+ helpers.valueOrDefault(options.barThickness, size),
+ helpers.valueOrDefault(options.maxBarThickness, Infinity));
- base -= isCombo ? ruler.tickSize / 2 : 0;
- base += ruler.fullBarSize * stackIndex;
- base += ruler.categorySpacing / 2;
- base += ruler.barSpacing / 2;
+ base -= leftCategorySize;
+ base += fullBarSize * stackIndex;
+ base += (fullBarSize - size) / 2;
return {
size: size,
// Desired view properties
_model: {
- x: reset ? xScale.getPixelForDecimal(0.5) : xScale.getPixelForValue(typeof data === 'object' ? data : NaN, index, dsIndex, me.chart.isCombo),
+ x: reset ? xScale.getPixelForDecimal(0.5) : xScale.getPixelForValue(typeof data === 'object' ? data : NaN, index, dsIndex),
y: reset ? yScale.getBasePixel() : yScale.getPixelForValue(data, index, dsIndex),
// Appearance
radius: reset ? 0 : custom.radius ? custom.radius : me.getRadius(data),
var xScale = me.getScaleForId(meta.xAxisID);
var pointOptions = me.chart.options.elements.point;
var x, y;
- var labels = me.chart.data.labels || [];
- var includeOffset = (labels.length === 1 || dataset.data.length === 1) || me.chart.isCombo;
// Compatibility: If the properties are defined with only the old name, use those values
if ((dataset.radius !== undefined) && (dataset.pointRadius === undefined)) {
dataset.pointHitRadius = dataset.hitRadius;
}
- x = xScale.getPixelForValue(typeof value === 'object' ? value : NaN, index, datasetIndex, includeOffset);
+ x = xScale.getPixelForValue(typeof value === 'object' ? value : NaN, index, datasetIndex);
y = reset ? yScale.getBasePixel() : me.calculatePointY(value, index, datasetIndex);
// Utility
}
}, me);
- if (types.length > 1) {
- for (var i = 1; i < types.length; i++) {
- if (types[i] !== types[i - 1]) {
- me.isCombo = true;
- break;
- }
- }
- }
-
return newControllers;
},
defaults._set('scale', {
display: true,
position: 'left',
+ offset: false,
// grid line settings
gridLines: {
return labels;
}
+function getLineValue(scale, index, offsetGridLines) {
+ var lineValue = scale.getPixelForTick(index);
+
+ if (offsetGridLines) {
+ if (index === 0) {
+ lineValue -= (scale.getPixelForTick(1) - lineValue) / 2;
+ } else {
+ lineValue -= (lineValue - scale.getPixelForTick(index - 1)) / 2;
+ }
+ }
+ return lineValue;
+}
+
module.exports = function(Chart) {
function computeTextSize(context, tick, font) {
getValueForPixel: helpers.noop,
// Used for tick location, should
- getPixelForTick: function(index, includeOffset) {
+ getPixelForTick: function(index) {
var me = this;
+ var offset = me.options.offset;
if (me.isHorizontal()) {
var innerWidth = me.width - (me.paddingLeft + me.paddingRight);
- var tickWidth = innerWidth / Math.max((me._ticks.length - ((me.options.gridLines.offsetGridLines) ? 0 : 1)), 1);
+ var tickWidth = innerWidth / Math.max((me._ticks.length - (offset ? 0 : 1)), 1);
var pixel = (tickWidth * index) + me.paddingLeft;
- if (includeOffset) {
+ if (offset) {
pixel += tickWidth / 2;
}
},
// Utility for getting the pixel location of a percentage of scale
- getPixelForDecimal: function(decimal /* , includeOffset*/) {
+ getPixelForDecimal: function(decimal) {
var me = this;
if (me.isHorizontal()) {
var innerWidth = me.width - (me.paddingLeft + me.paddingRight);
helpers.each(ticks, function(tick, index) {
var label = tick.label;
var lineWidth, lineColor, borderDash, borderDashOffset;
- if (index === (typeof me.zeroLineIndex !== 'undefined' ? me.zeroLineIndex : 0)) {
+ if (index === (typeof me.zeroLineIndex !== 'undefined' ? me.zeroLineIndex : 0) && (options.offset === gridLines.offsetGridLines)) {
// Draw the first index specially
lineWidth = gridLines.zeroLineWidth;
lineColor = gridLines.zeroLineColor;
labelY = me.bottom - labelYOffset;
}
- var xLineValue = me.getPixelForTick(index) + helpers.aliasPixel(lineWidth); // xvalues for grid lines
- labelX = me.getPixelForTick(index, gridLines.offsetGridLines) + optionTicks.labelOffset; // x values for optionTicks (need to consider offsetLabel option)
+ var xLineValue = getLineValue(me, index, gridLines.offsetGridLines && ticks.length > 1);
+ if (xLineValue < me.left) {
+ lineColor = 'rgba(0,0,0,0)';
+ }
+ xLineValue += helpers.aliasPixel(lineWidth);
+
+ labelX = me.getPixelForTick(index) + optionTicks.labelOffset; // x values for optionTicks (need to consider offsetLabel option)
tx1 = tx2 = x1 = x2 = xLineValue;
ty1 = yTickStart;
labelX = isLeft ? me.right - labelXOffset : me.left + labelXOffset;
- var yLineValue = me.getPixelForTick(index); // xvalues for grid lines
+ var yLineValue = getLineValue(me, index, gridLines.offsetGridLines && ticks.length > 1);
+ if (yLineValue < me.top) {
+ lineColor = 'rgba(0,0,0,0)';
+ }
yLineValue += helpers.aliasPixel(lineWidth);
- labelY = me.getPixelForTick(index, gridLines.offsetGridLines) + optionTicks.labelOffset;
+
+ labelY = me.getPixelForTick(index) + optionTicks.labelOffset;
tx1 = xTickStart;
tx2 = xTickEnd;
},
// Used to get data value locations. Value can either be an index or a numerical value
- getPixelForValue: function(value, index, datasetIndex, includeOffset) {
+ getPixelForValue: function(value, index) {
var me = this;
+ var offset = me.options.offset;
// 1 is added because we need the length but we have the indexes
- var offsetAmt = Math.max((me.maxIndex + 1 - me.minIndex - ((me.options.gridLines.offsetGridLines) ? 0 : 1)), 1);
+ var offsetAmt = Math.max((me.maxIndex + 1 - me.minIndex - (offset ? 0 : 1)), 1);
// If value is a data object, then index is the index in the data array,
// not the index of the scale. We need to change that.
var valueWidth = me.width / offsetAmt;
var widthOffset = (valueWidth * (index - me.minIndex));
- if (me.options.gridLines.offsetGridLines && includeOffset || me.maxIndex === me.minIndex && includeOffset) {
+ if (offset) {
widthOffset += (valueWidth / 2);
}
var valueHeight = me.height / offsetAmt;
var heightOffset = (valueHeight * (index - me.minIndex));
- if (me.options.gridLines.offsetGridLines && includeOffset) {
+ if (offset) {
heightOffset += (valueHeight / 2);
}
return me.top + Math.round(heightOffset);
},
- getPixelForTick: function(index, includeOffset) {
- return this.getPixelForValue(this.ticks[index], index + this.minIndex, null, includeOffset);
+ getPixelForTick: function(index) {
+ return this.getPixelForValue(this.ticks[index], index + this.minIndex, null);
},
getValueForPixel: function(pixel) {
var me = this;
+ var offset = me.options.offset;
var value;
- var offsetAmt = Math.max((me.ticks.length - ((me.options.gridLines.offsetGridLines) ? 0 : 1)), 1);
+ var offsetAmt = Math.max((me._ticks.length - (offset ? 0 : 1)), 1);
var horz = me.isHorizontal();
var valueDimension = (horz ? me.width : me.height) / offsetAmt;
pixel -= horz ? me.left : me.top;
- if (me.options.gridLines.offsetGridLines) {
+ if (offset) {
pixel -= (valueDimension / 2);
}
value = Math.round(pixel / valueDimension);
}
- return value;
+ return value + me.minIndex;
},
getBasePixel: function() {
return this.bottom;
return ticks;
}
+/**
+ * Returns the right and left offsets from edges in the form of {left, right}.
+ * Offsets are added when the `offset` option is true.
+ */
+function computeOffsets(table, ticks, min, max, options) {
+ var left = 0;
+ var right = 0;
+ var upper, lower;
+
+ if (options.offset && ticks.length) {
+ if (!options.time.min) {
+ upper = ticks.length > 1 ? ticks[1] : max;
+ lower = ticks[0];
+ left = (
+ interpolate(table, 'time', upper, 'pos') -
+ interpolate(table, 'time', lower, 'pos')
+ ) / 2;
+ }
+ if (!options.time.max) {
+ upper = ticks[ticks.length - 1];
+ lower = ticks.length > 1 ? ticks[ticks.length - 2] : min;
+ right = (
+ interpolate(table, 'time', upper, 'pos') -
+ interpolate(table, 'time', lower, 'pos')
+ ) / 2;
+ }
+ }
+
+ return {left: left, right: right};
+}
+
function ticksFromTimestamps(values, majorUnit) {
var ticks = [];
var i, ilen, value, major;
determineDataLimits: function() {
var me = this;
var chart = me.chart;
- var options = me.options;
- var min = parse(options.time.min, me) || MAX_INTEGER;
- var max = parse(options.time.max, me) || MIN_INTEGER;
+ var timeOpts = me.options.time;
+ var min = parse(timeOpts.min, me) || MAX_INTEGER;
+ var max = parse(timeOpts.max, me) || MIN_INTEGER;
var timestamps = [];
var datasets = [];
var labels = [];
me._minorFormat = formats[unit];
me._majorFormat = formats[majorUnit];
me._table = buildLookupTable(me._timestamps.data, min, max, options.distribution);
+ me._offsets = computeOffsets(me._table, ticks, min, max, options);
return ticksFromTimestamps(ticks, majorUnit);
},
var start = me._horizontal ? me.left : me.top;
var pos = interpolate(me._table, 'time', time, 'pos');
- return start + size * pos;
+ return start + size * (me._offsets.left + pos) / (me._offsets.left + 1 + me._offsets.right);
},
getPixelForValue: function(value, index, datasetIndex) {
var me = this;
var size = me._horizontal ? me.width : me.height;
var start = me._horizontal ? me.left : me.top;
- var pos = size ? (pixel - start) / size : 0;
+ var pos = (size ? (pixel - start) / size : 0) * (me._offsets.left + 1 + me._offsets.left) - me._offsets.right;
var time = interpolate(me._table, 'pos', pos, 'time');
return moment(time);
{x: 224, y: 32}
].forEach(function(values, i) {
expect(meta.data[i]._model.base).toBeCloseToPixel(484);
- expect(meta.data[i]._model.width).toBeCloseToPixel(40);
+ expect(meta.data[i]._model.width).toBeCloseToPixel(42);
expect(meta.data[i]._model.x).toBeCloseToPixel(values.x);
expect(meta.data[i]._model.y).toBeCloseToPixel(values.y);
});
{b: 258, x: 224, y: 32}
].forEach(function(values, i) {
expect(meta.data[i]._model.base).toBeCloseToPixel(values.b);
- expect(meta.data[i]._model.width).toBeCloseToPixel(40);
+ expect(meta.data[i]._model.width).toBeCloseToPixel(42);
expect(meta.data[i]._model.x).toBeCloseToPixel(values.x);
expect(meta.data[i]._model.y).toBeCloseToPixel(values.y);
});
};
});
});
+
+ describe('Bar thickness with a category scale', function() {
+ [undefined, 20].forEach(function(barThickness) {
+ describe('When barThickness is ' + barThickness, function() {
+ beforeEach(function() {
+ this.chart = window.acquireChart({
+ type: 'bar',
+ data: {
+ datasets: [{
+ data: [1, 2]
+ }, {
+ data: [1, 2]
+ }],
+ labels: ['label1', 'label2', 'label3']
+ },
+ options: {
+ scales: {
+ xAxes: [{
+ id: 'x',
+ type: 'category',
+ barThickness: barThickness
+ }],
+ yAxes: [{
+ type: 'linear'
+ }]
+ }
+ }
+ });
+ });
+
+ it('should correctly set bar width', function() {
+ var chart = this.chart;
+ var expected, i, ilen, meta;
+
+ if (barThickness) {
+ expected = barThickness;
+ } else {
+ var scale = chart.scales.x;
+ var options = chart.options.scales.xAxes[0];
+ var categoryPercentage = options.categoryPercentage;
+ var barPercentage = options.barPercentage;
+ var tickInterval = scale.getPixelForTick(1) - scale.getPixelForTick(0);
+
+ expected = tickInterval * categoryPercentage / 2 * barPercentage;
+ }
+
+ for (i = 0, ilen = chart.data.datasets.length; i < ilen; ++i) {
+ meta = chart.getDatasetMeta(i);
+ expect(meta.data[0]._model.width).toBeCloseToPixel(expected);
+ expect(meta.data[1]._model.width).toBeCloseToPixel(expected);
+ }
+ });
+
+ it('should correctly set bar width if maxBarThickness is specified', function() {
+ var chart = this.chart;
+ var options = chart.options.scales.xAxes[0];
+ var i, ilen, meta;
+
+ options.maxBarThickness = 10;
+ chart.update();
+
+ for (i = 0, ilen = chart.data.datasets.length; i < ilen; ++i) {
+ meta = chart.getDatasetMeta(i);
+ expect(meta.data[0]._model.width).toBeCloseToPixel(10);
+ expect(meta.data[1]._model.width).toBeCloseToPixel(10);
+ }
+ });
+ });
+ });
+ });
+
+ describe('Bar thickness with a time scale', function() {
+ ['auto', 'data', 'labels'].forEach(function(source) {
+ ['series', 'linear'].forEach(function(distribution) {
+ describe('When ticks.source is "' + source + '", distribution is "' + distribution + '"', function() {
+ beforeEach(function() {
+ this.chart = window.acquireChart({
+ type: 'bar',
+ data: {
+ datasets: [{
+ data: [1, 2, 3]
+ }, {
+ data: [1, 2, 3]
+ }],
+ labels: ['2017', '2018', '2020']
+ },
+ options: {
+ scales: {
+ xAxes: [{
+ id: 'x',
+ type: 'time',
+ time: {
+ unit: 'year',
+ parser: 'YYYY'
+ },
+ ticks: {
+ source: source
+ },
+ offset: true,
+ distribution: distribution
+ }],
+ yAxes: [{
+ type: 'linear'
+ }]
+ }
+ }
+ });
+ });
+
+ it('should correctly set bar width', function() {
+ var chart = this.chart;
+ var scale = chart.scales.x;
+ var options = chart.options.scales.xAxes[0];
+ var categoryPercentage = options.categoryPercentage;
+ var barPercentage = options.barPercentage;
+ var firstInterval = scale.getPixelForValue('2018') - scale.getPixelForValue('2017');
+ var firstExpected = firstInterval * categoryPercentage / 2 * barPercentage;
+ var lastInterval = scale.getPixelForValue('2020') - scale.getPixelForValue('2018');
+ var lastExpected = lastInterval * categoryPercentage / 2 * barPercentage;
+ var i, ilen, meta;
+
+ for (i = 0, ilen = chart.data.datasets.length; i < ilen; ++i) {
+ meta = chart.getDatasetMeta(i);
+ expect(meta.data[0]._model.width).toBeCloseToPixel(firstExpected);
+ expect(meta.data[1]._model.width).toBeCloseToPixel((firstExpected + lastExpected) / 2);
+ expect(meta.data[2]._model.width).toBeCloseToPixel(lastExpected);
+ }
+ });
+
+ it('should correctly set bar width if maxBarThickness is specified', function() {
+ var chart = this.chart;
+ var options = chart.options.scales.xAxes[0];
+ var i, ilen, meta;
+
+ options.maxBarThickness = 10;
+ chart.update();
+
+ for (i = 0, ilen = chart.data.datasets.length; i < ilen; ++i) {
+ meta = chart.getDatasetMeta(i);
+ expect(meta.data[0]._model.width).toBeCloseToPixel(10);
+ expect(meta.data[1]._model.width).toBeCloseToPixel(10);
+ expect(meta.data[2]._model.width).toBeCloseToPixel(10);
+ }
+ });
+ });
+ });
+ });
+ });
});
var meta = chart.getDatasetMeta(0);
// 1 point
var point = meta.data[0];
- expect(point._model.x).toBeCloseToPixel(262);
+ expect(point._model.x).toBeCloseToPixel(27);
// 2 points
chart.data.labels = ['One', 'Two'];
borderDashOffset: 0.0
},
position: 'right',
+ offset: false,
scaleLabel: {
display: false,
labelString: '',
borderDashOffset: 0.0
},
position: 'left',
+ offset: false,
scaleLabel: {
display: false,
labelString: '',
borderDashOffset: 0.0
},
position: 'bottom',
+ offset: false,
scaleLabel: {
display: false,
labelString: '',
});
var xScale = chart.scales.xScale0;
- expect(xScale.getPixelForValue(0, 0, 0, false)).toBeCloseToPixel(23);
- expect(xScale.getPixelForValue(0, 0, 0, true)).toBeCloseToPixel(23);
- expect(xScale.getValueForPixel(33)).toBe(0);
+ expect(xScale.getPixelForValue(0, 0, 0)).toBeCloseToPixel(23);
+ expect(xScale.getValueForPixel(23)).toBe(0);
- expect(xScale.getPixelForValue(0, 4, 0, false)).toBeCloseToPixel(487);
- expect(xScale.getPixelForValue(0, 4, 0, true)).toBeCloseToPixel(487);
+ expect(xScale.getPixelForValue(0, 4, 0)).toBeCloseToPixel(487);
expect(xScale.getValueForPixel(487)).toBe(4);
- xScale.options.gridLines.offsetGridLines = true;
+ xScale.options.offset = true;
+ chart.update();
- expect(xScale.getPixelForValue(0, 0, 0, false)).toBeCloseToPixel(23);
- expect(xScale.getPixelForValue(0, 0, 0, true)).toBeCloseToPixel(69);
- expect(xScale.getValueForPixel(33)).toBe(0);
- expect(xScale.getValueForPixel(78)).toBe(0);
+ expect(xScale.getPixelForValue(0, 0, 0)).toBeCloseToPixel(69);
+ expect(xScale.getValueForPixel(69)).toBe(0);
- expect(xScale.getPixelForValue(0, 4, 0, false)).toBeCloseToPixel(395);
- expect(xScale.getPixelForValue(0, 4, 0, true)).toBeCloseToPixel(441);
+ expect(xScale.getPixelForValue(0, 4, 0)).toBeCloseToPixel(441);
expect(xScale.getValueForPixel(397)).toBe(4);
- expect(xScale.getValueForPixel(441)).toBe(4);
});
it ('Should get the correct pixel for a value when there are repeated labels', function() {
});
var xScale = chart.scales.xScale0;
- expect(xScale.getPixelForValue('tick_1', 0, 0, false)).toBeCloseToPixel(23);
- expect(xScale.getPixelForValue('tick_1', 1, 0, false)).toBeCloseToPixel(139);
+ expect(xScale.getPixelForValue('tick_1', 0, 0)).toBeCloseToPixel(23);
+ expect(xScale.getPixelForValue('tick_1', 1, 0)).toBeCloseToPixel(139);
});
it ('Should get the correct pixel for a value when horizontal and zoomed', function() {
});
var xScale = chart.scales.xScale0;
- expect(xScale.getPixelForValue(0, 1, 0, false)).toBeCloseToPixel(23);
- expect(xScale.getPixelForValue(0, 1, 0, true)).toBeCloseToPixel(23);
+ expect(xScale.getPixelForValue(0, 1, 0)).toBeCloseToPixel(23);
+ expect(xScale.getPixelForValue(0, 3, 0)).toBeCloseToPixel(496);
- expect(xScale.getPixelForValue(0, 3, 0, false)).toBeCloseToPixel(496);
- expect(xScale.getPixelForValue(0, 3, 0, true)).toBeCloseToPixel(496);
+ xScale.options.offset = true;
+ chart.update();
- xScale.options.gridLines.offsetGridLines = true;
-
- expect(xScale.getPixelForValue(0, 1, 0, false)).toBeCloseToPixel(23);
- expect(xScale.getPixelForValue(0, 1, 0, true)).toBeCloseToPixel(102);
-
- expect(xScale.getPixelForValue(0, 3, 0, false)).toBeCloseToPixel(338);
- expect(xScale.getPixelForValue(0, 3, 0, true)).toBeCloseToPixel(419);
+ expect(xScale.getPixelForValue(0, 1, 0)).toBeCloseToPixel(102);
+ expect(xScale.getPixelForValue(0, 3, 0)).toBeCloseToPixel(417);
});
it ('should get the correct pixel for a value when vertical', function() {
});
var yScale = chart.scales.yScale0;
- expect(yScale.getPixelForValue(0, 0, 0, false)).toBe(32);
- expect(yScale.getPixelForValue(0, 0, 0, true)).toBe(32);
+ expect(yScale.getPixelForValue(0, 0, 0)).toBe(32);
expect(yScale.getValueForPixel(32)).toBe(0);
- expect(yScale.getPixelForValue(0, 4, 0, false)).toBe(484);
- expect(yScale.getPixelForValue(0, 4, 0, true)).toBe(484);
+ expect(yScale.getPixelForValue(0, 4, 0)).toBe(484);
expect(yScale.getValueForPixel(484)).toBe(4);
- yScale.options.gridLines.offsetGridLines = true;
+ yScale.options.offset = true;
+ chart.update();
- expect(yScale.getPixelForValue(0, 0, 0, false)).toBe(32);
- expect(yScale.getPixelForValue(0, 0, 0, true)).toBe(77);
- expect(yScale.getValueForPixel(32)).toBe(0);
+ expect(yScale.getPixelForValue(0, 0, 0)).toBe(77);
expect(yScale.getValueForPixel(77)).toBe(0);
- expect(yScale.getPixelForValue(0, 4, 0, false)).toBe(394);
- expect(yScale.getPixelForValue(0, 4, 0, true)).toBe(439);
- expect(yScale.getValueForPixel(394)).toBe(4);
+ expect(yScale.getPixelForValue(0, 4, 0)).toBe(439);
expect(yScale.getValueForPixel(439)).toBe(4);
});
var yScale = chart.scales.yScale0;
- expect(yScale.getPixelForValue(0, 1, 0, false)).toBe(32);
- expect(yScale.getPixelForValue(0, 1, 0, true)).toBe(32);
-
- expect(yScale.getPixelForValue(0, 3, 0, false)).toBe(484);
- expect(yScale.getPixelForValue(0, 3, 0, true)).toBe(484);
-
- yScale.options.gridLines.offsetGridLines = true;
+ expect(yScale.getPixelForValue(0, 1, 0)).toBe(32);
+ expect(yScale.getPixelForValue(0, 3, 0)).toBe(484);
- expect(yScale.getPixelForValue(0, 1, 0, false)).toBe(32);
- expect(yScale.getPixelForValue(0, 1, 0, true)).toBe(107);
+ yScale.options.offset = true;
+ chart.update();
- expect(yScale.getPixelForValue(0, 3, 0, false)).toBe(333);
- expect(yScale.getPixelForValue(0, 3, 0, true)).toBe(409);
+ expect(yScale.getPixelForValue(0, 1, 0)).toBe(107);
+ expect(yScale.getPixelForValue(0, 3, 0)).toBe(409);
});
});
borderDashOffset: 0.0
},
position: 'left',
+ offset: false,
scaleLabel: {
display: false,
labelString: '',
borderDashOffset: 0.0
},
position: 'left',
+ offset: false,
scaleLabel: {
display: false,
labelString: '',
callback: defaultConfig.pointLabels.callback, // make this nicer, then check explicitly below
},
position: 'chartArea',
+ offset: false,
scaleLabel: {
display: false,
labelString: '',
borderDashOffset: 0.0
},
position: 'bottom',
+ offset: false,
scaleLabel: {
display: false,
labelString: '',
});
});
});
+
+ ['auto', 'data', 'labels'].forEach(function(source) {
+ ['series', 'linear'].forEach(function(distribution) {
+ describe('when ticks.source is "' + source + '" and distribution is "' + distribution + '"', function() {
+ beforeEach(function() {
+ this.chart = window.acquireChart({
+ type: 'line',
+ data: {
+ labels: ['2017', '2019', '2020', '2025', '2042'],
+ datasets: [{data: [0, 1, 2, 3, 4, 5]}]
+ },
+ options: {
+ scales: {
+ xAxes: [{
+ id: 'x',
+ type: 'time',
+ time: {
+ parser: 'YYYY'
+ },
+ ticks: {
+ source: source
+ },
+ distribution: distribution
+ }]
+ }
+ }
+ });
+ });
+
+ it ('should not add offset from the edges', function() {
+ var scale = this.chart.scales.x;
+
+ expect(scale.getPixelForValue('2017')).toBeCloseToPixel(scale.left);
+ expect(scale.getPixelForValue('2042')).toBeCloseToPixel(scale.left + scale.width);
+ });
+
+ it ('should add offset from the edges if offset is true', function() {
+ var chart = this.chart;
+ var scale = chart.scales.x;
+ var options = chart.options.scales.xAxes[0];
+
+ options.offset = true;
+ chart.update();
+
+ var numTicks = scale.ticks.length;
+ var firstTickInterval = scale.getPixelForTick(1) - scale.getPixelForTick(0);
+ var lastTickInterval = scale.getPixelForTick(numTicks - 1) - scale.getPixelForTick(numTicks - 2);
+
+ expect(scale.getPixelForValue('2017')).toBeCloseToPixel(scale.left + firstTickInterval / 2);
+ expect(scale.getPixelForValue('2042')).toBeCloseToPixel(scale.left + scale.width - lastTickInterval / 2);
+ });
+
+ it ('should not add offset if min and max extend the labels range', function() {
+ var chart = this.chart;
+ var scale = chart.scales.x;
+ var options = chart.options.scales.xAxes[0];
+
+ options.time.min = '2012';
+ options.time.max = '2051';
+ chart.update();
+
+ expect(scale.getPixelForValue('2012')).toBeCloseToPixel(scale.left);
+ expect(scale.getPixelForValue('2051')).toBeCloseToPixel(scale.left + scale.width);
+ });
+
+ it ('should not add offset if min and max extend the labels range and offset is true', function() {
+ var chart = this.chart;
+ var scale = chart.scales.x;
+ var options = chart.options.scales.xAxes[0];
+
+ options.time.min = '2012';
+ options.time.max = '2051';
+ options.offset = true;
+ chart.update();
+
+ expect(scale.getPixelForValue('2012')).toBeCloseToPixel(scale.left);
+ expect(scale.getPixelForValue('2051')).toBeCloseToPixel(scale.left + scale.width);
+ });
+ });
+ });
+ });
});
projects / thirdparty / Chart.js.git / commitdiff
