{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs","tab"]},"type":"markdown"},"seo":{"title":"Bar Chart Mode","description":"Accelerate E&P application development and protect your innovation by consuming our Data and Domain APIs / Platform APIs.","lang":"en-US","meta":[{"name":"robots","content":"noindex"}],"llmstxt":{"hide":true,"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"bar-chart-mode","__idx":0},"children":["Bar Chart Mode"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Bar chart mode provide an easy way to add bar chart to TimeSeriesWidget."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"add-barmode","__idx":1},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/TimeSeries/BarChartMode/barChartMode#addBarMode"},"children":["#"]}," Add BarMode"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This example shows how to create add bar chart for ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["TimeSeriesWidget"]}]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport { TimeSeriesWidget } from \"@int/geotoolkit/widgets/TimeSeriesWidget.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { getDataTables } from \"/src/code/TimeSeries/data.ts\";\nfunction createScene(canvas) {\n  const startDate = new Date(2013, 0, 1).getTime();\n  const endDate = new Date(2014, 0, 1).getTime();\n  const dataTableViews = getDataTables(startDate, endDate);\n  const curveIndice = [0, 1];\n  const names = [\"CALI\", \"GR\"];\n  const colors = [\n    \"rgba(21, 101, 192, 0.85)\",\n    \"rgba(239, 108, 0, 0.85)\"\n  ];\n  function createWidget() {\n    const options = {\n      \"title\": {\n        \"visible\": false\n      },\n      \"model\": new Group().setModelLimits(new Rect(startDate, 0, endDate, 1)),\n      \"curveaxis\": {\n        \"visible\": true,\n        \"autocoloraxis\": true,\n        \"autocolorlabel\": true,\n        \"titlevisible\": true,\n        \"axiswidth\": 30,\n        \"compact\": true\n      },\n      \"curvelimits\": {\n        \"visible\": false\n      }\n    };\n    const widget = new TimeSeriesWidget(options);\n    widget.scaleModel(2);\n    curveIndice.forEach((curveIndex, index) => {\n      widget.addCurve({\n        \"name\": names[index],\n        \"uri\": \"//test//\" + names[index].toLowerCase(),\n        \"data\": dataTableViews[curveIndex],\n        \"properties\": {\n          \"autoscale\": true,\n          \"axisautolabelrotation\": true,\n          \"neatlimits\": true,\n          \"unit\": \"INS\",\n          \"linestyle\": {\n            \"color\": colors[index],\n            \"width\": 2\n          },\n          \"barmode\": {\n            \"enabled\": true\n          }\n        }\n      });\n    });\n    widget.setOptions({\n      \"lastupdatedate\": {\n        \"followcursor\": true\n      },\n      \"barmode\": {\n        \"renderingorder\": (valueOrderPairs) => valueOrderPairs.sort((a, b) => b[\"order\"] - a[\"order\"])\n      }\n    });\n    widget.scaleModel(8).translateModel(700);\n    return widget;\n  }\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": createWidget()\n  });\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n  position: relative;\n}\n\n.cg-tooltip {\n  position: absolute;\n  display: block;\n  padding: 2px 12px 3px 7px;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 13px;\n  background: white !important;\n  opacity: 0.9;\n  color: #333333;\n  border: solid 1px gray;\n  border-radius: 5px;\n  text-align: left;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n  border-radius: 5px;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n  position: absolute;\n  display: block;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 12px;\n  padding: 3px 7px;\n  background: #f7f7f7;\n  color: #333333;\n  border: 1px solid #938e8e;\n  opacity: 0.8;\n  text-align: left;\n  box-shadow: 3px 3px 10px #888;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n  user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .cg-tooltip-container {\n    border-radius: 0;\n  }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-left: 0;\n  border-right: 5px solid  #938e8e;\n  transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-left: 0;\n  border-right: 4px solid #f7f7f7;\n  transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 5px solid transparent;\n  border-top: 0;\n  border-bottom: 5px solid #938e8e;\n  transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 4px solid transparent;\n  border-top: 0;\n  border-bottom: 4px solid #f7f7f7;\n  transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-right: 0;\n  border-left: 5px solid #938e8e;\n  transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-right: 0;\n  border-left: 4px solid #f7f7f7;\n  transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0px;\n  border: 5px solid transparent;\n  border-bottom: 0;\n  border-top: 5px solid #938e8e;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0;\n  border: 4px solid transparent;\n  border-bottom: 0;\n  border-top: 4px solid #f7f7f7;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n  text-transform: none;\n}\n\n.cg-tooltip-item-name {\n    text-transform: capitalize;\n    white-space: nowrap;\n    vertical-align: middle;\n    font-size: 13px;\n}\n.cg-tooltip-row {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  white-space: pre-wrap;\n  font-size: 12px;\n  line-height: 100%;\n  margin: 1px 0;\n}\n.cg-tooltip-title {\n  font-size: 13px;\n  height: 14px;\n  text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n  margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n  vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n  margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n  margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n    margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n  display: inline-flex;\n  min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n  margin-right: 3px;\n  background-color: transparent;\n  display: block;\n}\n.cg-tooltip-symbol > img {\n  display: block;\n}\n.cg-tooltip-list-cell {\n  display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n  display: block;\n  margin-right: 3px;\n  width: 6px;\n  height: 6px;\n  vertical-align: middle;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n  border-radius: 4px;\n  margin-right: 5px;\n  height: 8px;\n  width: 8px;\n  display: inline-block;\n}\n.cg-tooltip-title-legacy {\n  font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n  height: 10px;\n  width: 10px;\n  display: inline-block;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: rotate(45deg);\n    border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    border-radius: 0px;\n    border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/TimeSeries/BarChartMode/barChartMode?section=addBarMode&extract=true","width":"100%","height":"488.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"bars-rendering-order","__idx":2},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/TimeSeries/BarChartMode/barChartMode#barsRenderingOrder"},"children":["#"]}," Bars Rendering Order"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This example shows how to chage rendering order of bars of different series. By default, line series was added first will be rendered first, thus any series added later will be rendered on top."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In this example, we have 3 rendering orders:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Default: line series added first will be rendered first, so any line series added later will be rendered on top."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Reverse: line series added first will be rendered on top, so any line series added later will be rendered behind."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Blended: blend between multiple series, so that any bars with smaller values will be rendered on top and be visible."]}]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport { TimeSeriesWidget } from \"@int/geotoolkit/widgets/TimeSeriesWidget.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { getDataTables } from \"/src/code/TimeSeries/data.ts\";\nfunction setRenderingOrder(widget, type) {\n  switch (type) {\n    case \"reverse\":\n      widget.setOptions({\n        \"barmode\": {\n          \"renderingorder\": (valueOrderPairs) => valueOrderPairs.sort((a, b) => b[\"order\"] - a[\"order\"])\n        }\n      });\n      break;\n    case \"blended\":\n      widget.setOptions({\n        \"barmode\": {\n          \"renderingorder\": (valueOrderPairs) => valueOrderPairs.sort((a, b) => b[\"height\"] - a[\"height\"])\n        }\n      });\n      break;\n    case \"default\":\n      widget.setOptions({\n        \"barmode\": {\n          \"renderingorder\": (valueOrderPairs) => valueOrderPairs.sort((a, b) => a[\"order\"] - b[\"order\"])\n        }\n      });\n      break;\n  }\n}\nfunction createScene(canvas) {\n  const startDate = new Date(2013, 0, 1).getTime();\n  const endDate = new Date(2014, 0, 1).getTime();\n  const dataTableViews = getDataTables(startDate, endDate);\n  const curveIndice = [0, 1];\n  const names = [\"CALI\", \"GR\"];\n  const colors = [\n    \"rgba(21, 101, 192, 0.85)\",\n    \"rgba(239, 108, 0, 0.85)\"\n  ];\n  function createWidget() {\n    const options = {\n      \"title\": {\n        \"visible\": false\n      },\n      \"model\": new Group().setModelLimits(new Rect(startDate, 0, endDate, 1)),\n      \"curveaxis\": {\n        \"visible\": true,\n        \"autocoloraxis\": true,\n        \"autocolorlabel\": true,\n        \"titlevisible\": true,\n        \"axiswidth\": 30,\n        \"compact\": true\n      },\n      \"curvelimits\": {\n        \"visible\": false\n      }\n    };\n    const widget = new TimeSeriesWidget(options);\n    widget.scaleModel(2);\n    curveIndice.forEach((curveIndex, index) => {\n      widget.addCurve({\n        \"name\": names[index],\n        \"uri\": \"//test//\" + names[index].toLowerCase(),\n        \"data\": dataTableViews[curveIndex],\n        \"properties\": {\n          \"autoscale\": true,\n          \"axisautolabelrotation\": true,\n          \"neatlimits\": true,\n          \"unit\": \"INS\",\n          \"linestyle\": {\n            \"color\": colors[index],\n            \"width\": 2\n          },\n          \"barmode\": {\n            \"enabled\": true\n          }\n        }\n      });\n    });\n    widget.setOptions({\n      \"lastupdatedate\": {\n        \"followcursor\": true\n      }\n    });\n    widget.scaleModel(8).translateModel(700);\n    return widget;\n  }\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": createWidget()\n  });\n}\nexport { createScene, setRenderingOrder };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n  position: relative;\n}\n\n.cg-tooltip {\n  position: absolute;\n  display: block;\n  padding: 2px 12px 3px 7px;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 13px;\n  background: white !important;\n  opacity: 0.9;\n  color: #333333;\n  border: solid 1px gray;\n  border-radius: 5px;\n  text-align: left;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n  border-radius: 5px;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n  position: absolute;\n  display: block;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 12px;\n  padding: 3px 7px;\n  background: #f7f7f7;\n  color: #333333;\n  border: 1px solid #938e8e;\n  opacity: 0.8;\n  text-align: left;\n  box-shadow: 3px 3px 10px #888;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n  user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .cg-tooltip-container {\n    border-radius: 0;\n  }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-left: 0;\n  border-right: 5px solid  #938e8e;\n  transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-left: 0;\n  border-right: 4px solid #f7f7f7;\n  transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 5px solid transparent;\n  border-top: 0;\n  border-bottom: 5px solid #938e8e;\n  transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 4px solid transparent;\n  border-top: 0;\n  border-bottom: 4px solid #f7f7f7;\n  transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-right: 0;\n  border-left: 5px solid #938e8e;\n  transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-right: 0;\n  border-left: 4px solid #f7f7f7;\n  transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0px;\n  border: 5px solid transparent;\n  border-bottom: 0;\n  border-top: 5px solid #938e8e;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0;\n  border: 4px solid transparent;\n  border-bottom: 0;\n  border-top: 4px solid #f7f7f7;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n  text-transform: none;\n}\n\n.cg-tooltip-item-name {\n    text-transform: capitalize;\n    white-space: nowrap;\n    vertical-align: middle;\n    font-size: 13px;\n}\n.cg-tooltip-row {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  white-space: pre-wrap;\n  font-size: 12px;\n  line-height: 100%;\n  margin: 1px 0;\n}\n.cg-tooltip-title {\n  font-size: 13px;\n  height: 14px;\n  text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n  margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n  vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n  margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n  margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n    margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n  display: inline-flex;\n  min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n  margin-right: 3px;\n  background-color: transparent;\n  display: block;\n}\n.cg-tooltip-symbol > img {\n  display: block;\n}\n.cg-tooltip-list-cell {\n  display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n  display: block;\n  margin-right: 3px;\n  width: 6px;\n  height: 6px;\n  vertical-align: middle;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n  border-radius: 4px;\n  margin-right: 5px;\n  height: 8px;\n  width: 8px;\n  display: inline-block;\n}\n.cg-tooltip-title-legacy {\n  font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n  height: 10px;\n  width: 10px;\n  display: inline-block;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: rotate(45deg);\n    border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    border-radius: 0px;\n    border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/TimeSeries/BarChartMode/barChartMode?section=barsRenderingOrder&extract=true","width":"100%","height":"544.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"highlight-bars-with-selection","__idx":3},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/TimeSeries/BarChartMode/barChartMode#highlightBarsWithSelection"},"children":["#"]}," Highlight Bars With Selection"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This example shows how to use TimeSeriesWidget ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["picking"]}," tool to add an event to highlight selected bar."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["How bar will be highlighted, can be set by passing a function to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'highlightingmethod'"]}," property.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"In this case, we make bar line style width bigger and set its color black."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport { TimeSeriesWidget } from \"@int/geotoolkit/widgets/TimeSeriesWidget.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { Events as SelectionEvents } from \"@int/geotoolkit/controls/tools/Selection.ts\";\nimport { RgbaColor } from \"@int/geotoolkit/util/RgbaColor.ts\";\nimport { HsvColor } from \"@int/geotoolkit/util/HsvColor.ts\";\nimport { getDataTables } from \"/src/code/TimeSeries/data.ts\";\nfunction createScene(canvas) {\n  const startDate = new Date(2013, 0, 1).getTime();\n  const endDate = new Date(2014, 0, 1).getTime();\n  const dataTableViews = getDataTables(startDate, endDate);\n  const curveIndice = [0, 1];\n  const names = [\"CALI\", \"GR\"];\n  const colors = [\n    \"rgba(21, 101, 192, 0.85)\",\n    \"rgba(239, 108, 0, 0.85)\"\n  ];\n  function highlightingMethodSelection(highlightBar, lineStyle, fillStyle) {\n    let rgbacolor = RgbaColor.fromObject(fillStyle.getColor()).setAlpha(1);\n    const color = new HsvColor(rgbacolor);\n    color.adjustSaturationByFactor(0.4);\n    rgbacolor = color.toRgbaColor();\n    fillStyle.setColor(rgbacolor);\n    return {\n      \"linestyle\": lineStyle,\n      \"fillstyle\": fillStyle\n    };\n  }\n  function createWidget() {\n    const options = {\n      \"title\": {\n        \"visible\": false\n      },\n      \"model\": new Group().setModelLimits(new Rect(startDate, 0, endDate, 1)),\n      \"curveaxis\": {\n        \"visible\": true,\n        \"autocoloraxis\": true,\n        \"autocolorlabel\": true,\n        \"titlevisible\": true,\n        \"axiswidth\": 30,\n        \"compact\": true\n      },\n      \"curvelimits\": {\n        \"visible\": false\n      }\n    };\n    const widget = new TimeSeriesWidget(options);\n    widget.scaleModel(2);\n    curveIndice.forEach((curveIndex, index) => {\n      widget.addCurve({\n        \"name\": names[index],\n        \"uri\": \"//test//\" + names[index].toLowerCase(),\n        \"data\": dataTableViews[curveIndex],\n        \"properties\": {\n          \"autoscale\": true,\n          \"axisautolabelrotation\": true,\n          \"neatlimits\": true,\n          \"unit\": \"INS\",\n          \"linestyle\": {\n            \"color\": colors[index],\n            \"width\": 2\n          },\n          \"barmode\": {\n            \"enabled\": true\n          }\n        }\n      });\n    });\n    widget.setOptions({\n      \"lastupdatedate\": {\n        \"followcursor\": true\n      },\n      \"barmode\": {\n        \"renderingorder\": (valueOrderPairs) => valueOrderPairs.sort((a, b) => b[\"order\"] - a[\"order\"]),\n        \"highlightingmethod\": highlightingMethodSelection\n      }\n    });\n    customizeTool(widget);\n    widget.scaleModel(8).translateModel(700);\n    return widget;\n  }\n  function customizeTool(widget) {\n    widget.getToolByName(\"picking\").on(SelectionEvents.onPick, (evt, sender, eventArgs) => {\n      const devicePoint = eventArgs.getPlotPoint();\n      const lineData = widget.hitTest(devicePoint);\n      const transformation = lineData[0][\"curve\"].getSceneTransform();\n      const modelPoint = transformation.inverseTransformPoint(devicePoint);\n      const lineIndex = lineData.slice(0).sort((a, b) => a[\"value\"] - b[\"value\"]).findIndex((data) => modelPoint.getY() <= data[\"value\"]);\n      if (lineIndex < 0) {\n        widget.highlightBars([]);\n        return;\n      }\n      widget.highlightBars([{\n        \"lineindex\": lineIndex,\n        \"datapointindex\": lineData[lineIndex][\"index\"]\n      }]);\n    });\n  }\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": createWidget()\n  });\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n  position: relative;\n}\n\n.cg-tooltip {\n  position: absolute;\n  display: block;\n  padding: 2px 12px 3px 7px;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 13px;\n  background: white !important;\n  opacity: 0.9;\n  color: #333333;\n  border: solid 1px gray;\n  border-radius: 5px;\n  text-align: left;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n  border-radius: 5px;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n  position: absolute;\n  display: block;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 12px;\n  padding: 3px 7px;\n  background: #f7f7f7;\n  color: #333333;\n  border: 1px solid #938e8e;\n  opacity: 0.8;\n  text-align: left;\n  box-shadow: 3px 3px 10px #888;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n  user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .cg-tooltip-container {\n    border-radius: 0;\n  }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-left: 0;\n  border-right: 5px solid  #938e8e;\n  transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-left: 0;\n  border-right: 4px solid #f7f7f7;\n  transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 5px solid transparent;\n  border-top: 0;\n  border-bottom: 5px solid #938e8e;\n  transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 4px solid transparent;\n  border-top: 0;\n  border-bottom: 4px solid #f7f7f7;\n  transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-right: 0;\n  border-left: 5px solid #938e8e;\n  transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-right: 0;\n  border-left: 4px solid #f7f7f7;\n  transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0px;\n  border: 5px solid transparent;\n  border-bottom: 0;\n  border-top: 5px solid #938e8e;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0;\n  border: 4px solid transparent;\n  border-bottom: 0;\n  border-top: 4px solid #f7f7f7;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n  text-transform: none;\n}\n\n.cg-tooltip-item-name {\n    text-transform: capitalize;\n    white-space: nowrap;\n    vertical-align: middle;\n    font-size: 13px;\n}\n.cg-tooltip-row {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  white-space: pre-wrap;\n  font-size: 12px;\n  line-height: 100%;\n  margin: 1px 0;\n}\n.cg-tooltip-title {\n  font-size: 13px;\n  height: 14px;\n  text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n  margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n  vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n  margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n  margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n    margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n  display: inline-flex;\n  min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n  margin-right: 3px;\n  background-color: transparent;\n  display: block;\n}\n.cg-tooltip-symbol > img {\n  display: block;\n}\n.cg-tooltip-list-cell {\n  display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n  display: block;\n  margin-right: 3px;\n  width: 6px;\n  height: 6px;\n  vertical-align: middle;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n  border-radius: 4px;\n  margin-right: 5px;\n  height: 8px;\n  width: 8px;\n  display: inline-block;\n}\n.cg-tooltip-title-legacy {\n  font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n  height: 10px;\n  width: 10px;\n  display: inline-block;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: rotate(45deg);\n    border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    border-radius: 0px;\n    border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/TimeSeries/BarChartMode/barChartMode?section=highlightBarsWithSelection&extract=true","width":"100%","height":"488.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"highlight-bars-when-pointer-move","__idx":4},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/TimeSeries/BarChartMode/barChartMode#highlightBarsWhenPointerMove"},"children":["#"]}," Highlight Bars When Pointer Move"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This example shows how to use TimeSeriesWidget ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cursor"]}," tool to add an event to highlight bar pointer is hovering over."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["How bar will be highlighted, can be set by passing a function to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'highlightingmethod'"]}," property.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"In this case, we make bar line style width bigger and set its color to the color of its fill style while also remove color alpha.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"This is an eazy way to make highlighted bar looks larger."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport { TimeSeriesWidget } from \"@int/geotoolkit/widgets/TimeSeriesWidget.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { Events as CrossHairEvents } from \"@int/geotoolkit/controls/tools/CrossHair.ts\";\nimport { RgbaColor } from \"@int/geotoolkit/util/RgbaColor.ts\";\nimport { HsvColor } from \"@int/geotoolkit/util/HsvColor.ts\";\nimport { getDataTables } from \"/src/code/TimeSeries/data.ts\";\nfunction createScene(canvas) {\n  const startDate = new Date(2013, 0, 1).getTime();\n  const endDate = new Date(2014, 0, 1).getTime();\n  const dataTableViews = getDataTables(startDate, endDate);\n  const curveIndice = [0, 1];\n  const names = [\"CALI\", \"GR\"];\n  const colors = [\n    \"rgba(21, 101, 192, 0.85)\",\n    \"rgba(239, 108, 0, 0.85)\"\n  ];\n  function highlightingMethodPositionChanged(highlightBar, lineStyle, fillStyle) {\n    let rgbacolor = RgbaColor.fromObject(fillStyle.getColor()).setAlpha(1);\n    const color = new HsvColor(rgbacolor);\n    color.adjustSaturationByFactor(0.7);\n    rgbacolor = color.toRgbaColor();\n    lineStyle.setWidth(5).setColor(rgbacolor);\n    fillStyle.setColor(rgbacolor);\n    return {\n      \"linestyle\": lineStyle,\n      \"fillstyle\": fillStyle\n    };\n  }\n  function createWidget() {\n    const options = {\n      \"title\": {\n        \"visible\": false\n      },\n      \"model\": new Group().setModelLimits(new Rect(startDate, 0, endDate, 1)),\n      \"curveaxis\": {\n        \"visible\": true,\n        \"autocoloraxis\": true,\n        \"autocolorlabel\": true,\n        \"titlevisible\": true,\n        \"axiswidth\": 30,\n        \"compact\": true\n      },\n      \"curvelimits\": {\n        \"visible\": false\n      }\n    };\n    const widget = new TimeSeriesWidget(options);\n    widget.scaleModel(2);\n    curveIndice.forEach((curveIndex, index) => {\n      widget.addCurve({\n        \"name\": names[index],\n        \"uri\": \"//test//\" + names[index].toLowerCase(),\n        \"data\": dataTableViews[curveIndex],\n        \"properties\": {\n          \"autoscale\": true,\n          \"axisautolabelrotation\": true,\n          \"neatlimits\": true,\n          \"unit\": \"INS\",\n          \"linestyle\": {\n            \"color\": colors[index],\n            \"width\": 2\n          },\n          \"barmode\": {\n            \"enabled\": true\n          }\n        }\n      });\n    });\n    widget.setOptions({\n      \"lastupdatedate\": {\n        \"followcursor\": true\n      },\n      \"barmode\": {\n        \"renderingorder\": (valueOrderPairs) => valueOrderPairs.sort((a, b) => b[\"order\"] - a[\"order\"]),\n        \"highlightingmethod\": highlightingMethodPositionChanged\n      }\n    });\n    customizeTool(widget);\n    widget.scaleModel(8).translateModel(700);\n    return widget;\n  }\n  function customizeTool(widget) {\n    widget.getToolByName(\"cursor\").on(CrossHairEvents.onPositionChanged, (evt, sender, eventArgs) => {\n      const devicePoint = eventArgs.getPlotPoint();\n      const lineData = widget.hitTest(devicePoint);\n      const transformation = lineData[0][\"curve\"].getSceneTransform();\n      const modelPoint = transformation.inverseTransformPoint(devicePoint);\n      const lineIndex = lineData.slice(0).sort((a, b) => a[\"value\"] - b[\"value\"]).findIndex((data) => modelPoint.getY() <= data[\"value\"]);\n      if (lineIndex < 0) {\n        widget.highlightBars([]);\n        return;\n      }\n      widget.highlightBars([{\n        \"lineindex\": lineIndex,\n        \"datapointindex\": lineData[lineIndex][\"index\"]\n      }]);\n    });\n  }\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": createWidget()\n  });\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n  position: relative;\n}\n\n.cg-tooltip {\n  position: absolute;\n  display: block;\n  padding: 2px 12px 3px 7px;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 13px;\n  background: white !important;\n  opacity: 0.9;\n  color: #333333;\n  border: solid 1px gray;\n  border-radius: 5px;\n  text-align: left;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n  border-radius: 5px;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n  position: absolute;\n  display: block;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 12px;\n  padding: 3px 7px;\n  background: #f7f7f7;\n  color: #333333;\n  border: 1px solid #938e8e;\n  opacity: 0.8;\n  text-align: left;\n  box-shadow: 3px 3px 10px #888;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n  user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .cg-tooltip-container {\n    border-radius: 0;\n  }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-left: 0;\n  border-right: 5px solid  #938e8e;\n  transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-left: 0;\n  border-right: 4px solid #f7f7f7;\n  transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 5px solid transparent;\n  border-top: 0;\n  border-bottom: 5px solid #938e8e;\n  transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 4px solid transparent;\n  border-top: 0;\n  border-bottom: 4px solid #f7f7f7;\n  transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-right: 0;\n  border-left: 5px solid #938e8e;\n  transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-right: 0;\n  border-left: 4px solid #f7f7f7;\n  transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0px;\n  border: 5px solid transparent;\n  border-bottom: 0;\n  border-top: 5px solid #938e8e;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0;\n  border: 4px solid transparent;\n  border-bottom: 0;\n  border-top: 4px solid #f7f7f7;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n  text-transform: none;\n}\n\n.cg-tooltip-item-name {\n    text-transform: capitalize;\n    white-space: nowrap;\n    vertical-align: middle;\n    font-size: 13px;\n}\n.cg-tooltip-row {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  white-space: pre-wrap;\n  font-size: 12px;\n  line-height: 100%;\n  margin: 1px 0;\n}\n.cg-tooltip-title {\n  font-size: 13px;\n  height: 14px;\n  text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n  margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n  vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n  margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n  margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n    margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n  display: inline-flex;\n  min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n  margin-right: 3px;\n  background-color: transparent;\n  display: block;\n}\n.cg-tooltip-symbol > img {\n  display: block;\n}\n.cg-tooltip-list-cell {\n  display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n  display: block;\n  margin-right: 3px;\n  width: 6px;\n  height: 6px;\n  vertical-align: middle;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n  border-radius: 4px;\n  margin-right: 5px;\n  height: 8px;\n  width: 8px;\n  display: inline-block;\n}\n.cg-tooltip-title-legacy {\n  font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n  height: 10px;\n  width: 10px;\n  display: inline-block;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: rotate(45deg);\n    border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    border-radius: 0px;\n    border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/TimeSeries/BarChartMode/barChartMode?section=highlightBarsWhenPointerMove&extract=true","width":"100%","height":"488.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"bar-mode-with-stack-mode","__idx":5},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/TimeSeries/BarChartMode/barChartMode#barModeWithStackMode"},"children":["#"]}," Bar Mode With Stack Mode"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This example shows how to create add bar chart combines with stack mode for ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["TimeSeriesWidget"]}]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport { TimeSeriesWidget } from \"@int/geotoolkit/widgets/TimeSeriesWidget.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { getDataTables } from \"/src/code/TimeSeries/data.ts\";\nfunction createScene(canvas) {\n  const startDate = new Date(2013, 0, 1).getTime();\n  const endDate = new Date(2014, 0, 1).getTime();\n  const dataTableViews = getDataTables(startDate, endDate);\n  const curveIndice = [0, 1];\n  const names = [\"CALI\", \"GR\"];\n  const colors = [\n    \"rgba(21, 101, 192, 0.85)\",\n    \"rgba(239, 108, 0, 0.85)\"\n  ];\n  function createWidget() {\n    const options = {\n      \"title\": {\n        \"visible\": false\n      },\n      \"model\": new Group().setModelLimits(new Rect(startDate, 0, endDate, 1)),\n      \"curveaxis\": {\n        \"visible\": true,\n        \"autocoloraxis\": true,\n        \"autocolorlabel\": true,\n        \"titlevisible\": true,\n        \"axiswidth\": 30,\n        \"compact\": true\n      },\n      \"curvelimits\": {\n        \"visible\": false\n      }\n    };\n    const widget = new TimeSeriesWidget(options);\n    widget.scaleModel(2);\n    curveIndice.forEach((curveIndex, index) => {\n      widget.addCurve({\n        \"name\": names[index],\n        \"uri\": \"//test//\" + names[index].toLowerCase(),\n        \"data\": dataTableViews[curveIndex],\n        \"properties\": {\n          \"autoscale\": true,\n          \"axisautolabelrotation\": true,\n          \"neatlimits\": true,\n          \"unit\": \"INS\",\n          \"linestyle\": {\n            \"color\": colors[index],\n            \"width\": 2\n          },\n          \"barmode\": {\n            \"enabled\": true\n          }\n        }\n      });\n    });\n    widget.setOptions({\n      \"lastupdatedate\": {\n        \"followcursor\": true\n      },\n      \"barmode\": {\n        \"renderingorder\": (valueOrderPairs) => valueOrderPairs.sort((a, b) => b[\"order\"] - a[\"order\"]),\n        \"barvaluevisibility\": 40\n      },\n      \"stack\": {\n        \"enabled\": true\n      }\n    });\n    widget.scaleModel(8).translateModel(700);\n    return widget;\n  }\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": createWidget()\n  });\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n  position: relative;\n}\n\n.cg-tooltip {\n  position: absolute;\n  display: block;\n  padding: 2px 12px 3px 7px;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 13px;\n  background: white !important;\n  opacity: 0.9;\n  color: #333333;\n  border: solid 1px gray;\n  border-radius: 5px;\n  text-align: left;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n  border-radius: 5px;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n  position: absolute;\n  display: block;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 12px;\n  padding: 3px 7px;\n  background: #f7f7f7;\n  color: #333333;\n  border: 1px solid #938e8e;\n  opacity: 0.8;\n  text-align: left;\n  box-shadow: 3px 3px 10px #888;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n  user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .cg-tooltip-container {\n    border-radius: 0;\n  }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-left: 0;\n  border-right: 5px solid  #938e8e;\n  transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-left: 0;\n  border-right: 4px solid #f7f7f7;\n  transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 5px solid transparent;\n  border-top: 0;\n  border-bottom: 5px solid #938e8e;\n  transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 4px solid transparent;\n  border-top: 0;\n  border-bottom: 4px solid #f7f7f7;\n  transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-right: 0;\n  border-left: 5px solid #938e8e;\n  transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-right: 0;\n  border-left: 4px solid #f7f7f7;\n  transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0px;\n  border: 5px solid transparent;\n  border-bottom: 0;\n  border-top: 5px solid #938e8e;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0;\n  border: 4px solid transparent;\n  border-bottom: 0;\n  border-top: 4px solid #f7f7f7;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n  text-transform: none;\n}\n\n.cg-tooltip-item-name {\n    text-transform: capitalize;\n    white-space: nowrap;\n    vertical-align: middle;\n    font-size: 13px;\n}\n.cg-tooltip-row {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  white-space: pre-wrap;\n  font-size: 12px;\n  line-height: 100%;\n  margin: 1px 0;\n}\n.cg-tooltip-title {\n  font-size: 13px;\n  height: 14px;\n  text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n  margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n  vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n  margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n  margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n    margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n  display: inline-flex;\n  min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n  margin-right: 3px;\n  background-color: transparent;\n  display: block;\n}\n.cg-tooltip-symbol > img {\n  display: block;\n}\n.cg-tooltip-list-cell {\n  display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n  display: block;\n  margin-right: 3px;\n  width: 6px;\n  height: 6px;\n  vertical-align: middle;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n  border-radius: 4px;\n  margin-right: 5px;\n  height: 8px;\n  width: 8px;\n  display: inline-block;\n}\n.cg-tooltip-title-legacy {\n  font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n  height: 10px;\n  width: 10px;\n  display: inline-block;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: rotate(45deg);\n    border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    border-radius: 0px;\n    border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/TimeSeries/BarChartMode/barChartMode?section=barModeWithStackMode&extract=true","width":"100%","height":"488.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"bar-mode-with-percent-mode","__idx":6},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/TimeSeries/BarChartMode/barChartMode#barModeWithPercentMode"},"children":["#"]}," Bar Mode With Percent Mode"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This example shows how to create add bar chart combines with percent mode for ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["TimeSeriesWidget"]}]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport { TimeSeriesWidget } from \"@int/geotoolkit/widgets/TimeSeriesWidget.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { getDataTables } from \"/src/code/TimeSeries/data.ts\";\nfunction createScene(canvas) {\n  const startDate = new Date(2013, 0, 1).getTime();\n  const endDate = new Date(2014, 0, 1).getTime();\n  const dataTableViews = getDataTables(startDate, endDate);\n  const curveIndice = [0, 1];\n  const names = [\"CALI\", \"GR\"];\n  const colors = [\n    \"rgba(21, 101, 192, 0.85)\",\n    \"rgba(239, 108, 0, 0.85)\"\n  ];\n  function createWidget() {\n    const options = {\n      \"title\": {\n        \"visible\": false\n      },\n      \"model\": new Group().setModelLimits(new Rect(startDate, 0, endDate, 1)),\n      \"curveaxis\": {\n        \"visible\": true,\n        \"autocoloraxis\": true,\n        \"autocolorlabel\": true,\n        \"titlevisible\": true,\n        \"axiswidth\": 30,\n        \"compact\": true\n      },\n      \"curvelimits\": {\n        \"visible\": false\n      }\n    };\n    const widget = new TimeSeriesWidget(options);\n    widget.scaleModel(2);\n    curveIndice.forEach((curveIndex, index) => {\n      widget.addCurve({\n        \"name\": names[index],\n        \"uri\": \"//test//\" + names[index].toLowerCase(),\n        \"data\": dataTableViews[curveIndex],\n        \"properties\": {\n          \"autoscale\": true,\n          \"axisautolabelrotation\": true,\n          \"neatlimits\": true,\n          \"unit\": \"INS\",\n          \"linestyle\": {\n            \"color\": colors[index],\n            \"width\": 2\n          },\n          \"barmode\": {\n            \"enabled\": true\n          }\n        }\n      });\n    });\n    widget.setOptions({\n      \"lastupdatedate\": {\n        \"followcursor\": true\n      },\n      \"barmode\": {\n        \"renderingorder\": (valueOrderPairs) => valueOrderPairs.sort((a, b) => b[\"order\"] - a[\"order\"])\n      },\n      \"percent\": {\n        \"enabled\": true\n      }\n    });\n    widget.scaleModel(8).translateModel(700);\n    return widget;\n  }\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": createWidget()\n  });\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n  position: relative;\n}\n\n.cg-tooltip {\n  position: absolute;\n  display: block;\n  padding: 2px 12px 3px 7px;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 13px;\n  background: white !important;\n  opacity: 0.9;\n  color: #333333;\n  border: solid 1px gray;\n  border-radius: 5px;\n  text-align: left;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n  border-radius: 5px;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n  position: absolute;\n  display: block;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 12px;\n  padding: 3px 7px;\n  background: #f7f7f7;\n  color: #333333;\n  border: 1px solid #938e8e;\n  opacity: 0.8;\n  text-align: left;\n  box-shadow: 3px 3px 10px #888;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n  user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .cg-tooltip-container {\n    border-radius: 0;\n  }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-left: 0;\n  border-right: 5px solid  #938e8e;\n  transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-left: 0;\n  border-right: 4px solid #f7f7f7;\n  transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 5px solid transparent;\n  border-top: 0;\n  border-bottom: 5px solid #938e8e;\n  transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 4px solid transparent;\n  border-top: 0;\n  border-bottom: 4px solid #f7f7f7;\n  transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-right: 0;\n  border-left: 5px solid #938e8e;\n  transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-right: 0;\n  border-left: 4px solid #f7f7f7;\n  transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0px;\n  border: 5px solid transparent;\n  border-bottom: 0;\n  border-top: 5px solid #938e8e;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0;\n  border: 4px solid transparent;\n  border-bottom: 0;\n  border-top: 4px solid #f7f7f7;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n  text-transform: none;\n}\n\n.cg-tooltip-item-name {\n    text-transform: capitalize;\n    white-space: nowrap;\n    vertical-align: middle;\n    font-size: 13px;\n}\n.cg-tooltip-row {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  white-space: pre-wrap;\n  font-size: 12px;\n  line-height: 100%;\n  margin: 1px 0;\n}\n.cg-tooltip-title {\n  font-size: 13px;\n  height: 14px;\n  text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n  margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n  vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n  margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n  margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n    margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n  display: inline-flex;\n  min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n  margin-right: 3px;\n  background-color: transparent;\n  display: block;\n}\n.cg-tooltip-symbol > img {\n  display: block;\n}\n.cg-tooltip-list-cell {\n  display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n  display: block;\n  margin-right: 3px;\n  width: 6px;\n  height: 6px;\n  vertical-align: middle;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n  border-radius: 4px;\n  margin-right: 5px;\n  height: 8px;\n  width: 8px;\n  display: inline-block;\n}\n.cg-tooltip-title-legacy {\n  font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n  height: 10px;\n  width: 10px;\n  display: inline-block;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: rotate(45deg);\n    border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    border-radius: 0px;\n    border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/TimeSeries/BarChartMode/barChartMode?section=barModeWithPercentMode&extract=true","width":"100%","height":"488.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"customization","__idx":7},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/TimeSeries/BarChartMode/barChartMode#customization"},"children":["#"]}," Customization"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This example shows some possible customizations can be used with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["TimeSeriesWidget"]}," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["barmode"]},"."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport { TimeSeriesWidget } from \"@int/geotoolkit/widgets/TimeSeriesWidget.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { Events as CrossHairEvents } from \"@int/geotoolkit/controls/tools/CrossHair.ts\";\nimport { RgbaColor } from \"@int/geotoolkit/util/RgbaColor.ts\";\nimport { HsvColor } from \"@int/geotoolkit/util/HsvColor.ts\";\nimport { getDataTables } from \"/src/code/TimeSeries/data.ts\";\nfunction createScene(canvas) {\n  const startDate = new Date(2013, 0, 1).getTime();\n  const endDate = new Date(2014, 0, 1).getTime();\n  const dataTableViews = getDataTables(startDate, endDate);\n  const curveIndice = [0, 1];\n  const names = [\"CALI\", \"GR\"];\n  const colors = [\n    \"rgba(21, 101, 192, 0.85)\",\n    \"rgba(239, 108, 0, 0.85)\"\n  ];\n  function highlightingMethodPositionChanged(highlightBar, lineStyle, fillStyle) {\n    let rgbacolor = RgbaColor.fromObject(fillStyle.getColor()).setAlpha(1);\n    const color = new HsvColor(rgbacolor);\n    color.adjustSaturationByFactor(0.7);\n    rgbacolor = color.toRgbaColor();\n    lineStyle.setWidth(5).setColor(rgbacolor);\n    fillStyle.setColor(rgbacolor);\n    return {\n      \"linestyle\": lineStyle,\n      \"fillstyle\": fillStyle\n    };\n  }\n  function createWidget() {\n    const options = {\n      \"title\": {\n        \"visible\": false\n      },\n      \"model\": new Group().setModelLimits(new Rect(startDate, 0, endDate, 1)),\n      \"curveaxis\": {\n        \"visible\": true,\n        \"autocoloraxis\": true,\n        \"autocolorlabel\": true,\n        \"titlevisible\": true,\n        \"axiswidth\": 30,\n        \"compact\": true\n      },\n      \"curvelimits\": {\n        \"visible\": false\n      }\n    };\n    const widget = new TimeSeriesWidget(options);\n    curveIndice.forEach((curveIndex, index) => {\n      widget.addCurve({\n        \"name\": names[index],\n        \"uri\": \"//test//\" + names[index].toLowerCase(),\n        \"data\": dataTableViews[curveIndex],\n        \"properties\": {\n          \"autoscale\": true,\n          \"axisautolabelrotation\": true,\n          \"neatlimits\": true,\n          \"unit\": \"INS\",\n          \"linestyle\": {\n            \"color\": colors[index],\n            \"width\": 2\n          },\n          \"barmode\": {\n            \"enabled\": true,\n            \"fillstyle\": colors[index],\n            \"linestyle\": colors[index],\n            \"barvalues\": {\n              \"textstyle\": {\n                \"font\": \"12px Roboto\"\n              }\n            }\n          }\n        }\n      });\n    });\n    widget.setOptions({\n      \"lastupdatedate\": {\n        \"followcursor\": true\n      },\n      \"barmode\": {\n        \"renderingorder\": (valueOrderPairs) => valueOrderPairs.sort((a, b) => b[\"order\"] - a[\"order\"]),\n        \"highlightingmethod\": highlightingMethodPositionChanged,\n        \"barvaluevisibility\": 40\n      }\n    });\n    customizeTool(widget);\n    widget.scaleModel(8).translateModel(700);\n    return widget;\n  }\n  function customizeTool(widget) {\n    widget.getToolByName(\"cursor\").on(CrossHairEvents.onPositionChanged, (evt, sender, eventArgs) => {\n      const lineData = widget.hitTest(eventArgs.getPlotPoint());\n      widget.highlightBars(lineData.map((data, index) => {\n        const dataPointIndex = data[\"index\"];\n        return {\n          \"lineindex\": index,\n          \"datapointindex\": dataPointIndex\n        };\n      }));\n    });\n  }\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": createWidget()\n  });\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n  position: relative;\n}\n\n.cg-tooltip {\n  position: absolute;\n  display: block;\n  padding: 2px 12px 3px 7px;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 13px;\n  background: white !important;\n  opacity: 0.9;\n  color: #333333;\n  border: solid 1px gray;\n  border-radius: 5px;\n  text-align: left;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n  border-radius: 5px;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n  position: absolute;\n  display: block;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 12px;\n  padding: 3px 7px;\n  background: #f7f7f7;\n  color: #333333;\n  border: 1px solid #938e8e;\n  opacity: 0.8;\n  text-align: left;\n  box-shadow: 3px 3px 10px #888;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n  user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .cg-tooltip-container {\n    border-radius: 0;\n  }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-left: 0;\n  border-right: 5px solid  #938e8e;\n  transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-left: 0;\n  border-right: 4px solid #f7f7f7;\n  transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 5px solid transparent;\n  border-top: 0;\n  border-bottom: 5px solid #938e8e;\n  transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 4px solid transparent;\n  border-top: 0;\n  border-bottom: 4px solid #f7f7f7;\n  transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-right: 0;\n  border-left: 5px solid #938e8e;\n  transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-right: 0;\n  border-left: 4px solid #f7f7f7;\n  transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0px;\n  border: 5px solid transparent;\n  border-bottom: 0;\n  border-top: 5px solid #938e8e;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0;\n  border: 4px solid transparent;\n  border-bottom: 0;\n  border-top: 4px solid #f7f7f7;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n  text-transform: none;\n}\n\n.cg-tooltip-item-name {\n    text-transform: capitalize;\n    white-space: nowrap;\n    vertical-align: middle;\n    font-size: 13px;\n}\n.cg-tooltip-row {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  white-space: pre-wrap;\n  font-size: 12px;\n  line-height: 100%;\n  margin: 1px 0;\n}\n.cg-tooltip-title {\n  font-size: 13px;\n  height: 14px;\n  text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n  margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n  vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n  margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n  margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n    margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n  display: inline-flex;\n  min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n  margin-right: 3px;\n  background-color: transparent;\n  display: block;\n}\n.cg-tooltip-symbol > img {\n  display: block;\n}\n.cg-tooltip-list-cell {\n  display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n  display: block;\n  margin-right: 3px;\n  width: 6px;\n  height: 6px;\n  vertical-align: middle;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n  border-radius: 4px;\n  margin-right: 5px;\n  height: 8px;\n  width: 8px;\n  display: inline-block;\n}\n.cg-tooltip-title-legacy {\n  font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n  height: 10px;\n  width: 10px;\n  display: inline-block;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: rotate(45deg);\n    border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    border-radius: 0px;\n    border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/TimeSeries/BarChartMode/barChartMode?section=customization&extract=true","width":"100%","height":"488.5px","style":{"border":"none"}},"children":[]}]},"headings":[{"value":"Bar Chart Mode","id":"bar-chart-mode","depth":1},{"value":"Add BarMode","id":"add-barmode","depth":3},{"value":"Bars Rendering Order","id":"bars-rendering-order","depth":3},{"value":"Highlight Bars With Selection","id":"highlight-bars-with-selection","depth":3},{"value":"Highlight Bars When Pointer Move","id":"highlight-bars-when-pointer-move","depth":3},{"value":"Bar Mode With Stack Mode","id":"bar-mode-with-stack-mode","depth":3},{"value":"Bar Mode With Percent Mode","id":"bar-mode-with-percent-mode","depth":3},{"value":"Customization","id":"customization","depth":3}],"frontmatter":{"title":"Bar Chart Mode","seo":{"title":"Bar Chart Mode"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/tutorials/time-series/bar-chart-mode","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}