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();