Visual Components
/
/
/
Basics
Last updated

Basics

The Time Series widget displays a sequence of data points, typically consisting of successive measurements made over a time interval. In this tutorial, learn the basics of creating and navigating a Time Series widget. To create a Time Series widget and connect the widget tools to the plot, use the code below.

# Create Time Series Widget

To add curve data to the Time Series widget either from a DataTable or from a DataTableView, use the code below.

import { Group } from "@int/geotoolkit/scene/Group.ts";
import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { TimeSeriesWidget } from "@int/geotoolkit/widgets/TimeSeriesWidget.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { getDataTables } from "/src/code/TimeSeries/data.ts";
function createScene(canvas) {
  const startDate = new Date(2013, 0, 1).getTime();
  const endDate = new Date(2014, 0, 1).getTime();
  const dataTableViews = getDataTables(startDate, endDate);
  const curveIndice = [0, 1];
  const names = ["CALI", "GR"];
  const colors = [
    "rgba(21, 101, 192, 0.85)",
    "rgba(239, 108, 0, 0.85)"
  ];
  function createWidget() {
    const options = {
      "title": {
        "visible": false
      },
      "model": new Group().setModelLimits(new Rect(startDate, 0, endDate, 1)),
      "curveaxis": {
        "visible": true,
        "autocoloraxis": true,
        "autocolorlabel": true,
        "titlevisible": true,
        "axiswidth": 30,
        "compact": true
      },
      "curvelimits": {
        "visible": false
      }
    };
    const widget = new TimeSeriesWidget(options);
    widget.scaleModel(2);
    curveIndice.forEach((curveIndex, index) => {
      widget.addCurve({
        "name": names[index],
        "uri": "//test//" + names[index].toLowerCase(),
        "data": dataTableViews[curveIndex],
        "properties": {
          "autoscale": true,
          "axisautolabelrotation": true,
          "neatlimits": true,
          "unit": "INS",
          "linestyle": {
            "color": colors[index],
            "width": 2
          }
        }
      });
    });
    widget.setOptions({
      "lastupdatedate": {
        "followcursor": true
      }
    });
    return widget;
  }
  return new Plot({
    "canvaselement": canvas,
    "root": createWidget()
  });
}
export { createScene };

createScene(document.querySelector('[ref="plot"]'));

# Curve Selection

Curves can be selected through mouse clicks. Click the legend or the curve to designate it as the selected curve. In the example below, the selected curve is given a dash linestyle.

import { Group } from "@int/geotoolkit/scene/Group.ts";
import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { TimeSeriesWidget } from "@int/geotoolkit/widgets/TimeSeriesWidget.ts";
import { ScrollBarType } from "@int/geotoolkit/widgets/timeseries/ScrollBarType.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Events as SelectionEvents } from "@int/geotoolkit/controls/tools/Selection.ts";
import { Patterns } from "@int/geotoolkit/attributes/LineStyle.ts";
import { getDataTables } from "/src/code/TimeSeries/data.ts";
function createScene(canvas) {
  const startDate = new Date(2013, 0, 1).getTime();
  const endDate = new Date(2014, 0, 1).getTime();
  const dataTableViews = getDataTables(startDate, endDate);
  const curveIndice = [0, 1, 2];
  const names = ["CALI", "CALI1", "GR"];
  const colors = [
    "rgba(21, 101, 192, 0.85)",
    "rgba(239, 108, 0, 0.85)",
    "rgba(124, 179, 66, 0.85)"
  ];
  function configScrollBar(widget) {
    widget.setOptions({
      "curveaxis": {
        "visible": true,
        "autocoloraxis": true,
        "autocolorlabel": true,
        "titlevisible": true
      },
      "scrollbar": {
        "type": ScrollBarType.Simple,
        "height": 10,
        "options": {
          "resizable": true,
          "rounded": true,
          "minscrollbutton": {
            "visible": false
          },
          "maxscrollbutton": {
            "visible": false
          }
        }
      },
      "lastupdatedate": {
        "followcursor": true
      }
    });
  }
  function customizeSelection(widget) {
    let selection = {};
    widget.on(SelectionEvents.onSelectionChanged, (eventName, widget2, eventArgs) => {
      const curveId = eventArgs.getId();
      let curveProps;
      let timeSeriesObject, lineStyleOptions;
      if (selection["id"] != null) {
        timeSeriesObject = widget2.getTimeSeriesObjectById(selection["id"]);
        curveProps = timeSeriesObject.getCurveOptions();
        if (curveProps != null && curveProps["linestyle"] != null) {
          lineStyleOptions = curveProps["linestyle"].getProperties();
          lineStyleOptions["pattern"] = selection["pattern"];
          lineStyleOptions["width"] -= 1;
          curveProps["linestyle"].setProperties(lineStyleOptions);
          selection = {};
        }
      }
      if (curveId != null) {
        timeSeriesObject = widget2.getTimeSeriesObjectById(curveId);
        curveProps = timeSeriesObject.getCurveOptions();
        if (curveProps != null && curveProps["linestyle"] != null) {
          lineStyleOptions = curveProps["linestyle"].getProperties();
          selection["pattern"] = lineStyleOptions["pattern"];
          lineStyleOptions["width"] += 1;
          lineStyleOptions["pattern"] = Patterns.ShortDash;
          curveProps["linestyle"].setProperties(lineStyleOptions);
          selection["id"] = curveId;
        }
      }
      eventArgs.preventDefault();
    });
  }
  function createWidget() {
    const options = {
      "title": {
        "visible": false
      },
      "model": new Group().setModelLimits(new Rect(startDate, 0, endDate, 1)),
      "curveaxis": {
        "visible": true,
        "autocoloraxis": true,
        "autocolorlabel": true,
        "titlevisible": true,
        "axiswidth": 30,
        "compact": true
      },
      "curvelimits": {
        "visible": false
      }
    };
    const widget = new TimeSeriesWidget(options);
    widget.scaleModel(2);
    curveIndice.forEach((curveIndex, index) => {
      widget.addCurve({
        "name": names[index],
        "uri": "//test//" + names[index].toLowerCase(),
        "data": dataTableViews[curveIndex],
        "properties": {
          "autoscale": true,
          "axisautolabelrotation": true,
          "neatlimits": true,
          "unit": "INS",
          "linestyle": {
            "color": colors[index],
            "width": 2
          }
        }
      });
    });
    configScrollBar(widget);
    customizeSelection(widget);
    return widget;
  }
  return new Plot({
    "canvaselement": canvas,
    "root": createWidget()
  });
}
export { createScene };

createScene(document.querySelector('[ref="plot"]'));

# Changing Visual Order

Curves in a Time Series widget belong in a visual order, rendered from first to last. To bring a curve to the front, use changeVisualOrder to alter the visual ordering of the curves. In the example below, clicking a curve brings it to the front and increases its line width.

import { Group } from "@int/geotoolkit/scene/Group.ts";
import { Shape } from "@int/geotoolkit/scene/shapes/Shape.ts";
import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { TimeSeriesWidget } from "@int/geotoolkit/widgets/TimeSeriesWidget.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Events as SelectionEvents, Selection } from "@int/geotoolkit/controls/tools/Selection.ts";
import { LegendItem } from "@int/geotoolkit/controls/shapes/LegendItem.ts";
import { NodeOrder } from "@int/geotoolkit/scene/CompositeNode.ts";
import { from } from "@int/geotoolkit/selection/from.ts";
import { getDataTables } from "/src/code/TimeSeries/data.ts";
let widget = null;
let selectionID;
function bringFront() {
  widget.changeVisualOrder(selectionID, NodeOrder.Last);
}
function sendBack() {
  widget.changeVisualOrder(selectionID, NodeOrder.First);
}
function bringForward() {
  widget.changeVisualOrder(selectionID, NodeOrder.Forward);
}
function sendBackward() {
  widget.changeVisualOrder(selectionID, NodeOrder.Backward);
}
function createScene(canvas, cb) {
  const startDate = new Date(2013, 0, 1).getTime();
  const endDate = new Date(2014, 0, 1).getTime();
  const dataTableViews = getDataTables(startDate, endDate);
  const curveIndice = [0, 1, 2];
  const names = ["CALI", "GR", "GR2"];
  const colors = [
    "rgba(21, 101, 192, 0.85)",
    "rgba(239, 108, 0, 0.85)",
    "rgba(124, 179, 66, 0.85)"
  ];
  function createSelectionTool(widget2) {
    return new Selection().on(SelectionEvents.onPick, (evt, sender, args) => {
      selectionID = null;
      const nodes = args.getSelection();
      const curves = widget2.getCurves();
      nodes.forEach((node) => {
        if (node instanceof Shape) {
          if (curves.indexOf(node.getId()) >= 0) {
            selectionID = node.getId();
          }
        } else if (node instanceof LegendItem) {
          if (curves.indexOf(node.getObject().getId()) >= 0) {
            selectionID = node.getObject().getId();
          }
        } else if (node instanceof Group && node.getId() === "curveaxisgroup") {
          const axiscomponent = from(node).where('node => class(node) == "geotoolkit.scene.shapes.Text" || class(node) == "geotoolkit.axis.Axis"').selectFirst();
          if (axiscomponent != null && curves.indexOf(axiscomponent.getId()) >= 0) {
            selectionID = axiscomponent.getId();
          }
        }
      });
      cb(selectionID != null);
    });
  }
  function createWidget() {
    const options = {
      "title": {
        "visible": false
      },
      "model": new Group().setModelLimits(new Rect(startDate, 0, endDate, 1)),
      "curveaxis": {
        "visible": true,
        "autocoloraxis": true,
        "autocolorlabel": true,
        "titlevisible": true,
        "axiswidth": 30,
        "compact": true
      },
      "curvelimits": {
        "visible": false
      }
    };
    widget = new TimeSeriesWidget(options);
    widget.scaleModel(2);
    curveIndice.forEach((curveIndex, index) => {
      widget.addCurve({
        "name": names[index],
        "uri": "//test//" + names[index].toLowerCase(),
        "data": dataTableViews[curveIndex],
        "properties": {
          "autoscale": true,
          "axisautolabelrotation": true,
          "neatlimits": true,
          "unit": "INS",
          "linestyle": {
            "color": colors[index],
            "width": 3
          }
        }
      });
    });
    widget.connectTool(createSelectionTool(widget));
    return widget;
  }
  return new Plot({
    "canvaselement": canvas,
    "root": createWidget()
  });
}
export { bringForward, bringFront, createScene, sendBack, sendBackward };

createScene(document.querySelector('[ref="plot"]'), (isSeriesSelected) => {
            this.isSeriesSelected = isSeriesSelected;
        });

# Zoom Tools

Click the Zoom In tool to enlarge one magnification level. Click the Zoom Out tool to reduce one magnification level. The Rubber Band Zoom tool allows clicking and dragging to select any area and automatically zoom to the area when the mouse is released. To clear any zoom, click the Zoom To Fit tool. To enable this tool, see the code below.

import { Group } from "@int/geotoolkit/scene/Group.ts";
import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { TimeSeriesWidget } from "@int/geotoolkit/widgets/TimeSeriesWidget.ts";
import { ScrollBarType } from "@int/geotoolkit/widgets/timeseries/ScrollBarType.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { getDataTables } from "/src/code/TimeSeries/data.ts";
function createScene(canvas) {
  const startDate = new Date(2013, 0, 1).getTime();
  const endDate = new Date(2014, 0, 1).getTime();
  const dataTableViews = getDataTables(startDate, endDate);
  const curveIndice = [0, 1, 2];
  const names = ["CALI", "CALI1", "GR"];
  const colors = [
    "rgba(21, 101, 192, 0.85)",
    "rgba(239, 108, 0, 0.85)",
    "rgba(124, 179, 66, 0.85)"
  ];
  function configScrollBar(widget) {
    widget.setOptions({
      "curveaxis": {
        "visible": true,
        "autocoloraxis": true,
        "autocolorlabel": true,
        "titlevisible": true
      },
      "scrollbar": {
        "type": ScrollBarType.Simple,
        "height": 10,
        "options": {
          "resizable": true,
          "rounded": true,
          "minscrollbutton": {
            "visible": false
          },
          "maxscrollbutton": {
            "visible": false
          }
        }
      },
      "lastupdatedate": {
        "followcursor": true
      }
    });
  }
  function createWidget() {
    const options = {
      "title": {
        "visible": false
      },
      "model": new Group().setModelLimits(new Rect(startDate, 0, endDate, 1)),
      "curveaxis": {
        "visible": true,
        "autocoloraxis": true,
        "autocolorlabel": true,
        "titlevisible": true,
        "axiswidth": 30,
        "compact": true
      },
      "curvelimits": {
        "visible": false
      }
    };
    const widget = new TimeSeriesWidget(options);
    widget.scaleModel(2);
    curveIndice.forEach((curveIndex, index) => {
      widget.addCurve({
        "name": names[index],
        "uri": "//test//" + names[index].toLowerCase(),
        "data": dataTableViews[curveIndex],
        "properties": {
          "autoscale": true,
          "axisautolabelrotation": true,
          "neatlimits": true,
          "unit": "INS",
          "linestyle": {
            "color": colors[index],
            "width": 2
          }
        }
      });
    });
    widget.setOptions({
      "lastupdatedate": {
        "followcursor": true
      }
    });
    configScrollBar(widget);
    return widget;
  }
  return new Plot({
    "canvaselement": canvas,
    "root": createWidget()
  });
}
export { createScene };

createScene(document.querySelector('[ref="plot"]'));

# Default Tools

The Time Series widget comes equipped with a number of default tools that provide useful basic functionality.

  • Use the horizontal scrollbar to scroll along the x-axis. to change the current visible date and time limits, click and drag the ends of the light blue scrollbar.
  • The Time Series widget has a default tooltip legend tool. When mousing over a data point, the tooltip will display the value of the point as well as information pertaining to the relevant curve.
  • Interval buttons adjust visible date and time limits to specific time intervals, such as hours, days, weeks, months, etc. 
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { TimeSeriesWidget } from "@int/geotoolkit/widgets/TimeSeriesWidget.ts";
import { ScrollBarType } from "@int/geotoolkit/widgets/timeseries/ScrollBarType.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { getDataTables } from "/src/code/TimeSeries/data.ts";
function createScene(canvas) {
  const startDate = new Date(2013, 0, 1).getTime();
  const endDate = new Date(2014, 0, 1).getTime();
  const dataTableViews = getDataTables(startDate, endDate);
  const curveIndice = [0, 1, 2];
  const names = ["CALI", "CALI1", "GR"];
  const colors = [
    "rgba(21, 101, 192, 0.85)",
    "rgba(239, 108, 0, 0.85)",
    "rgba(124, 179, 66, 0.85)"
  ];
  function configScrollBar(widget) {
    widget.setOptions({
      "curveaxis": {
        "visible": true,
        "autocoloraxis": true,
        "autocolorlabel": true,
        "titlevisible": true
      },
      "scrollbar": {
        "type": ScrollBarType.Simple,
        "height": 10,
        "options": {
          "resizable": true,
          "rounded": true,
          "minscrollbutton": {
            "visible": false
          },
          "maxscrollbutton": {
            "visible": false
          }
        }
      },
      "lastupdatedate": {
        "followcursor": true
      }
    });
  }
  function createWidget() {
    const options = {
      "title": {
        "visible": false
      },
      "model": new Group().setModelLimits(new Rect(startDate, 0, endDate, 1)),
      "curveaxis": {
        "visible": true,
        "autocoloraxis": true,
        "autocolorlabel": true,
        "titlevisible": true,
        "axiswidth": 30,
        "compact": true
      },
      "curvelimits": {
        "visible": false
      }
    };
    const widget = new TimeSeriesWidget(options);
    widget.scaleModel(2);
    curveIndice.forEach((curveIndex, index) => {
      widget.addCurve({
        "name": names[index],
        "uri": "//test//" + names[index].toLowerCase(),
        "data": dataTableViews[curveIndex],
        "properties": {
          "autoscale": true,
          "axisautolabelrotation": true,
          "neatlimits": true,
          "unit": "INS",
          "linestyle": {
            "color": colors[index],
            "width": 2
          }
        }
      });
    });
    widget.setOptions({
      "lastupdatedate": {
        "followcursor": true
      }
    });
    configScrollBar(widget);
    return widget;
  }
  return new Plot({
    "canvaselement": canvas,
    "root": createWidget()
  });
}
export { createScene };

createScene(document.querySelector('[ref="plot"]'));

# Percentage Mode

This example shows how to create Percentage Mode for TimeSeriesWidget

import { TimeSeriesWidget } from "@int/geotoolkit/widgets/TimeSeriesWidget.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { getDataTables } from "/src/code/TimeSeries/data.ts";
function createScene(canvas) {
  const startDate = new Date(2013, 0, 1).getTime();
  const endDate = new Date(2014, 0, 1).getTime();
  const dataTableViews = getDataTables(startDate, endDate);
  function createTimeSeriesWidget() {
    const widget2 = new TimeSeriesWidget({
      "title": {
        "visible": false
      },
      "model": new Group().setModelLimits(new Rect(startDate, 0, endDate, 1)),
      "curveaxis": {
        "visible": true,
        "autocoloraxis": true,
        "autocolorlabel": true,
        "titlevisible": true,
        "axiswidth": 30,
        "compact": true
      },
      "curvelimits": {
        "visible": false
      }
    });
    widget2.scaleModel(2);
    return widget2;
  }
  function addCurves(widget2) {
    widget2.addCurve({
      "name": "Diesel",
      "uri": "//test//diesel",
      "data": dataTableViews[3],
      "properties": {
        "autoscale": true,
        "axisautolabelrotation": true,
        "neatlimits": true,
        "unit": "x1000 barrels",
        "linestyle": {
          "color": "rgba(124, 179, 66, 0.85)",
          "width": 2
        }
      }
    });
    widget2.addCurve({
      "name": "Asphalt",
      "uri": "//test//asphalt",
      "data": dataTableViews[5],
      "properties": {
        "autoscale": true,
        "axisautolabelrotation": true,
        "neatlimits": true,
        "unit": "x1000 barrels",
        "linestyle": {
          "color": "rgba(82, 82, 82, 0.85)",
          "width": 2
        }
      }
    });
    widget2.addCurve({
      "name": "Gasoline",
      "uri": "//test//gasoline",
      "data": dataTableViews[1],
      "properties": {
        "autoscale": true,
        "axisautolabelrotation": true,
        "neatlimits": true,
        "unit": "x1000 barrels",
        "linestyle": {
          "color": "rgba(21, 101, 192, 0.85)",
          "width": 2
        }
      }
    });
    widget2.setOptions({
      "lastupdatedate": {
        "followcursor": true
      },
      "percent": {
        "enabled": true,
        "tooltip": {
          "showoriginalvalue": true
        }
      }
    });
  }
  const widget = createTimeSeriesWidget();
  addCurves(widget);
  return new Plot({
    "canvaselement": canvas,
    "root": widget
  });
}
export { createScene };

createScene(document.querySelector('[ref="plot"]'));

# Stacked Mode

This example shows how to create Stacked Mode for TimeSeriesWidget


.cg-tooltip-holder {
  position: relative;
}

.cg-tooltip {
  position: absolute;
  display: block;
  padding: 2px 12px 3px 7px;
  overflow: visible !important;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  background: white !important;
  opacity: 0.9;
  color: #333333;
  border: solid 1px gray;
  border-radius: 5px;
  text-align: left;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 5px;
  margin: 0 !important;
  z-index: 10000;
  max-width: 400px;
  text-wrap: normal !important;
  white-space: normal !important;
}
/* Default setting for tooltip */
.cg-tooltip-container {
  position: absolute;
  display: block;
  overflow: visible !important;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 12px;
  padding: 3px 7px;
  background: #f7f7f7;
  color: #333333;
  border: 1px solid #938e8e;
  opacity: 0.8;
  text-align: left;
  box-shadow: 3px 3px 10px #888;
  margin: 0 !important;
  z-index: 10000;
  max-width: 400px;
  text-wrap: normal !important;
  white-space: normal !important;
  user-select: none;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .cg-tooltip-container {
    border-radius: 0;
  }
}
/* Default left arrow for tooltip */
.cg-tooltip-arrow-left::before {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  left: 0;
  top: 50%;
  border: 5px solid transparent;
  border-left: 0;
  border-right: 5px solid  #938e8e;
  transform: translate(calc(-100%), -50%);
}
.cg-tooltip-arrow-left::after {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  left: 0;
  top: 50%;
  border: 4px solid transparent;
  border-left: 0;
  border-right: 4px solid #f7f7f7;
  transform: translate(calc(-100%), -50%);
}
/* Default top arrow for tooltip */
.cg-tooltip-arrow-top::before {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  left: 50%;
  top: 0;
  border: 5px solid transparent;
  border-top: 0;
  border-bottom: 5px solid #938e8e;
  transform: translate(-50%, -100%);
}
.cg-tooltip-arrow-top::after {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  left: 50%;
  top: 0;
  border: 4px solid transparent;
  border-top: 0;
  border-bottom: 4px solid #f7f7f7;
  transform: translate(-50%, -100%);
}
/* Default right arrow for tooltip */
.cg-tooltip-arrow-right::before {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  right: 0;
  top: 50%;
  border: 5px solid transparent;
  border-right: 0;
  border-left: 5px solid #938e8e;
  transform: translate(100%, -50%);
}
.cg-tooltip-arrow-right::after {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  right: 0;
  top: 50%;
  border: 4px solid transparent;
  border-right: 0;
  border-left: 4px solid #f7f7f7;
  transform: translate(100%, -50%);
}
/* Default bottom arrow for tooltip */
.cg-tooltip-arrow-bottom::before {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  left: 50%;
  bottom: 0px;
  border: 5px solid transparent;
  border-bottom: 0;
  border-top: 5px solid #938e8e;
  transform: translate(-50%, 100%);
  z-index: 10000;
}
.cg-tooltip-arrow-bottom::after {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  left: 50%;
  bottom: 0;
  border: 4px solid transparent;
  border-bottom: 0;
  border-top: 4px solid #f7f7f7;
  transform: translate(-50%, 100%);
  z-index: 10000;
}
/* Tooltip item name */
/* Tooltip item value */
/* .cg-tooltip-item-value */
/* Tooltip item value */
.cg-tooltip-item-unit {
  text-transform: none;
}

.cg-tooltip-item-name {
    text-transform: capitalize;
    white-space: nowrap;
    vertical-align: middle;
    font-size: 13px;
}
.cg-tooltip-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  white-space: pre-wrap;
  font-size: 12px;
  line-height: 100%;
  margin: 1px 0;
}
.cg-tooltip-title {
  font-size: 13px;
  height: 14px;
  text-transform: capitalize;
}
.cg-tooltip-title .cg-tooltip-symbol {
  margin-right: 0 !important;
}
.cg-tooltip-title-name {
  vertical-align: middle;
}
.cg-tooltip-row + .cg-tooltip-row {
  margin-top: 4px;
}
.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {
  margin-top: 5px;
}
.cg-tooltip-item-value + .cg-tooltip-item-unit {
    margin-left: 1px;
}
/* Tooltip symbol */
.cg-tooltip-symbol-cell {
  display: inline-flex;
  min-width: 13px; /* 10px size + 3px margin */
}
.cg-tooltip-symbol {
  margin-right: 3px;
  background-color: transparent;
  display: block;
}
.cg-tooltip-symbol > img {
  display: block;
}
.cg-tooltip-list-cell {
  display: inline-flex;
}
.cg-tooltip-list-symbol {
  display: block;
  margin-right: 3px;
  width: 6px;
  height: 6px;
  vertical-align: middle;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.4);
}
.cg-tooltip-symbol-legacy {
  border-radius: 4px;
  margin-right: 5px;
  height: 8px;
  width: 8px;
  display: inline-block;
}
.cg-tooltip-title-legacy {
  font-weight: 900;
}

/* Tooltip symbol circle */
.cg-tooltip-symbol.circle {
  height: 10px;
  width: 10px;
  display: inline-block;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.4);
}
/* Tooltip symbol line */
.cg-tooltip-symbol.line {
    height: 10px;
    width: 10px;
    display: inline-block;
    transform: scale(1.2, 0.2);
}
/* Tooltip symbol diamond */
.cg-tooltip-symbol.diamond {
    height: 10px;
    width: 10px;
    display: inline-block;
    transform: rotate(45deg);
    border-radius: 0px;
}
/* Tooltip symbol square */
.cg-tooltip-symbol.square {
    height: 10px;
    width: 10px;
    display: inline-block;
    border-radius: 0px;
    border: 1px solid rgba(0,0,0,.4);
}

Bar Chart Mode

Combo Layers