diff --git a/builder/index.html b/builder/index.html
index 1ef3034..324bdb5 100755
--- a/builder/index.html
+++ b/builder/index.html
@@ -418,6 +418,7 @@
startControlSection('Series');
bindColor({target: chart.seriesSet[0].options, name: 'Series line color', propertyName: 'strokeStyle', optional: true, enabled: true, opacity: 1, emptyValue: 'none'});
bindColor({target: chart.seriesSet[0].options, name: 'Series fill color', propertyName: 'fillStyle', optional: true, enabled: false, opacity: 0.3});
+ bindCheckBox({target: chart.seriesSet[0].options, name: 'Fill to the bottom of the canvas', propertyName: 'fillToBottom'});
bindRange({target: chart.seriesSet[0].options, name: 'Series line width', propertyName: 'lineWidth', min: 0.5, max: 5, scale: 10});
bindDropDown({
target: chart.seriesSet[0].options,
diff --git a/smoothie.d.ts b/smoothie.d.ts
index ff572ad..ed072fa 100644
--- a/smoothie.d.ts
+++ b/smoothie.d.ts
@@ -18,6 +18,11 @@ export interface ITimeSeriesPresentationOptions {
*/
interpolation?: "linear" | "step" | "bezier";
tooltipLabel?: string;
+ /**
+ * Determines how far on the Y axis the fill region spans. Truthy value (default) - to the
+ * bottom of the canvas, falsy value - to 0.
+ */
+ fillToBottom?: boolean;
}
export declare class TimeSeries {
diff --git a/smoothie.js b/smoothie.js
index c2abb28..2af8f15 100644
--- a/smoothie.js
+++ b/smoothie.js
@@ -109,6 +109,7 @@
* v1.36.1: Fix a potential XSS when `tooltipLabel` or `strokeStyle` are controlled by users, by @WofWca
* v1.36.2: fix: 1px lines jumping 1px left and right at rational `millisPerPixel`, by @WofWca
* perf: improve `render()` performane a bit, by @WofWca
+ * v1.37: Add `fillToBottom` option to fill timeSeries to 0 instead of to the bottom of the canvas, by @socketpair & @WofWca (#140)
*/
// Date.now polyfill
@@ -493,7 +494,9 @@
SmoothieChart.defaultSeriesPresentationOptions = {
lineWidth: 1,
- strokeStyle: '#ffffff'
+ strokeStyle: '#ffffff',
+ // Maybe default to false in the next breaking version.
+ fillToBottom: true,
};
/**
@@ -507,7 +510,8 @@
* strokeStyle: '#ffffff',
* fillStyle: undefined,
* interpolation: undefined;
- * tooltipLabel: undefined
+ * tooltipLabel: undefined,
+ * fillToBottom: true,
* }
*
*/
@@ -1051,8 +1055,11 @@
if (seriesOptions.fillStyle) {
// Close up the fill region.
- context.lineTo(lastX, dimensions.height + lineWidthMaybeZero + 1);
- context.lineTo(firstX, dimensions.height + lineWidthMaybeZero + 1);
+ var fillEndY = seriesOptions.fillToBottom
+ ? dimensions.height + lineWidthMaybeZero + 1
+ : valueToYPosition(0, 0);
+ context.lineTo(lastX, fillEndY);
+ context.lineTo(firstX, fillEndY);
context.fillStyle = seriesOptions.fillStyle;
context.fill();