<td>When <code>dataColor</code> is a string, it will set the color for both border and fill color of dots and bars. Applicable for styles <code>dot-size</code>, <code>bar-size</code>, and <code>line</code>. When an object, it can contain the properties descibed below.</td>
<td>When <code>dataColor</code> is a string, it will set the color for both border and fill color of dots and bars. Applicable for styles <code>dot-size</code>, <code>bar-size</code>, and <code>line</code>. When an object, it can contain the properties descibed below.</td>
</tr>
</tr>
<tr>
<td>dataColor.fill</td>
<trparent="dataColor"class="hidden">
<tdclass="indent">dataColor.fill</td>
<td>string</td>
<td>string</td>
<td>'#7DC1FF'</td>
<td>'#7DC1FF'</td>
<td>The fill color of the dots or bars. Applicable when using styles <code>dot-size</code>, <code>bar-size</code>, or <code>line</code>.</td>
<td>The fill color of the dots or bars. Applicable when using styles <code>dot-size</code>, <code>bar-size</code>, or <code>line</code>.</td>
</tr>
</tr>
<tr>
<td>dataColor.stroke</td>
<trparent="dataColor"class="hidden">
<tdclass="indent">dataColor.stroke</td>
<td>string</td>
<td>string</td>
<td>'#3267D2'</td>
<td>'#3267D2'</td>
<td>The border color of the dots or bars. Applicable when using styles <code>dot-size</code> or <code>bar-size</code>.</td>
<td>The border color of the dots or bars. Applicable when using styles <code>dot-size</code> or <code>bar-size</code>.</td>
</tr>
</tr>
<tr>
<td>dataColor.strokeWidth</td>
<trparent="dataColor"class="hidden">
<tdclass="indent">dataColor.strokeWidth</td>
<td>number</td>
<td>number</td>
<td>1</td>
<td>1</td>
<td>The line width of dots, bars and lines. Applicable for all styles.</td>
<td>The line width of dots, bars and lines. Applicable for all styles.</td>
<td>When a boolean, applies the value only to <code>itemsAlwaysDraggable.item</code>.</td>
</tr>
<trparent="itemsAlwaysDraggable"class="hidden">
<tdclass="indent">itemsAlwaysDraggable.item</td>
<td>boolean</td>
<td>boolean</td>
<td><code>false</code></td>
<td><code>false</code></td>
<td>If true, all items in the Timeline are draggable without being selected. If false, only the selected item(s) are draggable.</td>
<td>If true, all items in the Timeline are draggable without being selected. If false, only the selected item(s) are draggable.</td>
</tr>
</tr>
<trparent="itemsAlwaysDraggable"class="hidden">
<tdclass="indent">itemsAlwaysDraggable.range</td>
<td>boolean</td>
<td><code>false</code></td>
<td>If true, range of all items in the Timeline is draggable without being selected. If false, range is only draggable for the selected item(s). Only applicable when option <code>itemsAlwaysDraggable.item</code> is set <code>true</code>. </td>
<p>The <code>itemsAlwaysDraggable</code> option allows to drag items around without first selecting them. When <code>itemsAlwaysDraggable.range</code> is set to <code>true</code>, the range can be changed without selection as well.</p>
<divid="mytimeline"></div>
<script>
var container = document.getElementById('mytimeline'),
items = new vis.DataSet();
for (var i = 10; i >= 0; i--) {
var start = new Date(new Date().getTime() + i * 100000);
items.add({
id: i,
content: "item " + i,
start: start,
end: new Date(start.getTime() + 100000)
});
}
var options = {
start: new Date(),
end: new Date(new Date().getTime() + 1000000),
editable: true,
itemsAlwaysDraggable: {
item: true,
range: true
}
};
var timeline = new vis.Timeline(container, items, null, options);
Yotam Berkowitz
7 years ago