diff --git a/README.md b/README.md
index f466a7f..8ad0b93 100644
--- a/README.md
+++ b/README.md
@@ -52,6 +52,7 @@ myChart
| xTickFormat([function]) | X axis tick label formatter function, as pass-through to [d3-axis](https://github.com/d3/d3-axis#axis_tickFormat). By default, it uses a [multi-scale time format](https://bl.ocks.org/mbostock/4149176). | |
| dateMarker([date object]) | Getter/setter for the date marker to show as a vertical line. If a falsy value is used, no marker is shown. | `null` |
| minSegmentDuration([number]) | Getter/setter for the minimum time duration (in msecs) of a segment in order for it to be shown. | 0 |
+| minSegmentWidth([number]) | Getter/setter for the minimum displayed px width of a segment. | 1 |
| getNLines() | Returns number of timelines currently visible in the chart. | - |
| getTotalNLines() | Returns total number of timelines in the chart. | - |
| zQualitative([boolean]) | Getter/setter for whether the segment data color values are categorical (true) or quantitative (false). This will affect how the color legend is presented, and changing it will automatically toggle the `zColorScale` between defaults. | false |
diff --git a/src/index.d.ts b/src/index.d.ts
index 410489f..656a9a2 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -60,6 +60,8 @@ export interface TimelinesChartGenericInstance {
dateMarker(date: TS | null | boolean): ChainableInstance;
minSegmentDuration(): number;
minSegmentDuration(duration: number): ChainableInstance;
+ minSegmentWidth(): number;
+ minSegmentWidth(width: number): ChainableInstance;
getNLines(): number;
getTotalNLines(): number;
diff --git a/src/timelines.js b/src/timelines.js
index 32765cf..5474197 100644
--- a/src/timelines.js
+++ b/src/timelines.js
@@ -127,6 +127,7 @@ export default Kapsule({
}
},
minSegmentDuration: {},
+ minSegmentWidth: { default: 1 },
zColorScale: { default: d3ScaleSequential(interpolateRdYlBu) },
zQualitative: { default: false, onChange(discrete, state) {
state.zColorScale = discrete
@@ -1003,7 +1004,7 @@ export default Kapsule({
return state.xScale(d.timeRange[0])-hoverEnlarge/2;
})
.attr('width', function (d) {
- return d3Max([1, state.xScale(d.timeRange[1])-state.xScale(d.timeRange[0])])+hoverEnlarge;
+ return d3Max([state.minSegmentWidth, state.xScale(d.timeRange[1])-state.xScale(d.timeRange[0])])+hoverEnlarge;
})
.attr('y', function (d) {
return state.yScale(d.group+'+&+'+d.label)-(state.lineHeight+hoverEnlarge)/2;
@@ -1018,7 +1019,7 @@ export default Kapsule({
return state.xScale(d.timeRange[0]);
})
.attr('width', function (d) {
- return d3Max([1, state.xScale(d.timeRange[1])-state.xScale(d.timeRange[0])]);
+ return d3Max([state.minSegmentWidth, state.xScale(d.timeRange[1])-state.xScale(d.timeRange[0])]);
})
.attr('y', function (d) {
return state.yScale(d.group+'+&+'+d.label)-state.lineHeight/2;
@@ -1038,7 +1039,7 @@ export default Kapsule({
return state.xScale(d.timeRange[0]);
})
.attr('width', function (d) {
- return d3Max([1, state.xScale(d.timeRange[1])-state.xScale(d.timeRange[0])]);
+ return d3Max([state.minSegmentWidth, state.xScale(d.timeRange[1])-state.xScale(d.timeRange[0])]);
})
.attr('y', function (d) {
return state.yScale(d.group+'+&+'+d.label)-state.lineHeight/2;