{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs","tab"]},"type":"markdown"},"seo":{"title":"Floating Color Bar","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":"floating-color-bar","__idx":0},"children":["Floating Color Bar"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Floating Color Bar tool allows for further customization of color bar visualization. The tool generates a floating window representation of a color bar, allowing the user to move a smaller version of the color bar into the center model space to compare representational data. The FloatingColorBar tool also emits a number of events.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"The Floating Color Bar tool is located in the AnnotatedWidget, the tool is turned off by default. To use this tool, you need the widget to derived from AnnotatedWidget, you also need to add a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ColorBar"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"cross-plot","__idx":1},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Tools/FloatingColorBar/floatingColorBar#crossPlot"},"children":["#"]}," Cross Plot"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For this example, the Floating Color Bar tool is demonstrated in tandem with the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["CrossPlot"]}," widget, which is derived from ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["AnnotatedWidget"]},"."]},{"$$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 { CirclePainter } from \"@int/geotoolkit/scene/shapes/painters/CirclePainter.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { KnownScales } from \"@int/geotoolkit/util/ColorProvider.ts\";\nimport { DiscreteGradientColorProvider } from \"@int/geotoolkit/util/DiscreteGradientColorProvider.ts\";\nimport { AnnotationLocation } from \"@int/geotoolkit/layout/AnnotationLocation.ts\";\nimport { CrossPlot } from \"@int/geotoolkit/widgets/CrossPlot.ts\";\nimport { ToolTipTool } from \"@int/geotoolkit/controls/tools/ToolTipTool.ts\";\nimport { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport Data from \"/src/assets/data/crossplotdata.json?import\";\nconst style = \"margin-right: 5px; height: 10px; width: 10px; background-color: transparent; border-radius: 50%; display: inline-block;\";\nfunction createToolTipTool(widget, names, units) {\n  widget.connectTool(new ToolTipTool({\n    \"callback\": (pt) => {\n      const rect = new Rect(pt.x - 5, pt.y - 5, pt.x + 5, pt.y + 5);\n      const outRect = widget.getModel().getSceneTransform().inverseTransformRect(rect);\n      const indices = widget.getIndicesAt(outRect);\n      const selectedIndex = indices.length > 0 ? [indices[indices.length - 1]] : [];\n      widget.highlightIndices(selectedIndex, true);\n      if (selectedIndex.length > 0) {\n        const index = selectedIndex[0];\n        const data = widget.getData();\n        const z = data[\"z\"][\"data\"][index];\n        let xAxisName = `<span style=\"tooltip-title\">` + names[0] + \" (\" + units[0] + \"): </span>\";\n        let yAxisName = '<span class=\"tooltip-title\">' + names[1] + \" (\" + units[1] + \"): </span>\";\n        let zAxisName = '<span class=\"tooltip-title\">' + names[2] + \" (\" + units[2] + \"): </span>\";\n        const cp = widget.getColorProvider();\n        const color = cp.getColor(+z.toFixed(0)).toRgbaString();\n        xAxisName = `<span style=\"${style}\"></span>` + xAxisName;\n        yAxisName = `<span style=\"${style} background-color: ${color}\"></span>` + yAxisName;\n        zAxisName = `<span style=\"${style}\"></span>` + zAxisName;\n        return xAxisName + data[\"x\"][\"data\"][index].toFixed(2) + \"<br>\" + yAxisName + data[\"y\"][\"data\"][index].toFixed(2) + \"<br>\" + zAxisName + z.toFixed(2);\n      }\n      return \"\";\n    }\n  }));\n}\nfunction createScene(canvas) {\n  const data = Data.data;\n  const widget = new CrossPlot({\n    \"tools\": {\n      \"horizontalscroll\": {\n        \"visible\": false\n      },\n      \"verticalscroll\": {\n        \"visible\": false\n      }\n    },\n    \"x\": {\n      \"annotationsize\": 40\n    },\n    \"y\": {\n      \"annotationsize\": 50\n    },\n    \"z\": {\n      \"annotationsize\": 20\n    }\n  });\n  createToolTipTool(widget, [\"X\", \"Y\", \"Z\"], [\"value\", \"value\", \"color\"]);\n  widget.removeTitle(AnnotationLocation.North);\n  widget.removeTitle(AnnotationLocation.West);\n  widget.removeTitle(AnnotationLocation.South);\n  widget.setData({\n    \"x\": {\n      \"data\": data[0].splice(0, 1e3),\n      \"unit\": \"ft\",\n      \"label\": {\n        \"text\": \"X axis\"\n      },\n      \"neatlimits\": true\n    },\n    \"y\": {\n      \"data\": data[1].splice(0, 1e3),\n      \"unit\": \"ft\",\n      \"label\": {\n        \"text\": \"Y axis\"\n      },\n      \"neatlimits\": true\n    },\n    \"z\": {\n      \"data\": data[2].splice(0, 1e3),\n      \"min\": 0,\n      \"max\": 200,\n      \"label\": {\n        \"text\": \"Z color\"\n      },\n      \"legendvisible\": true,\n      \"annotationsize\": 85\n    },\n    \"colorprovider\": new DiscreteGradientColorProvider({ \"bins\": 255 }).setScale(\n      KnownScales.Orange,\n      0,\n      10\n    ),\n    \"marker\": {\n      \"size\": 8,\n      \"painter\": CirclePainter\n    }\n  });\n  widget.setAnnotationSize({\n    \"north\": 70,\n    \"west\": 130,\n    \"south\": 130\n  });\n  widget.getToolByName(\"colorbar\").setEnabled(true);\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": widget\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#/Carnac/Tools/FloatingColorBar/floatingColorBar?section=crossPlot&extract=true","width":"100%","height":"688.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"bubble-chart","__idx":2},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Tools/FloatingColorBar/floatingColorBar#bubbleChart"},"children":["#"]}," Bubble Chart"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For this example, the Floating Color Bar tool is demonstrated in tandem with the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["BubbleChart"]}," widget, which is derived from ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["AnnotatedWidget"]},"."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"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":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { DiscreteGradientColorProvider } from \"@int/geotoolkit/util/DiscreteGradientColorProvider.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport { BubbleChart } from \"@int/geotoolkit/widgets/BubbleChart.ts\";\nimport { AnnotationLocation } from \"@int/geotoolkit/layout/AnnotationLocation.ts\";\nfunction createScene(canvas) {\n  const colorprovider = new DiscreteGradientColorProvider({\n    \"values\": [1, 40],\n    \"bins\": 20,\n    \"colors\": [\"green\", \"lightgreen\"]\n  });\n  const widget = new BubbleChart({\n    \"bounds\": new Rect(0, 0, 800, 400),\n    \"tools\": {\n      \"horizontalscroll\": { \"visible\": false },\n      \"verticalscroll\": { \"visible\": false },\n      \"tooltip\": {\n        \"enabled\": true,\n        \"displayprops\": [\"x\", \"y\", \"z\", \"s\"]\n      }\n    },\n    \"x\": {\n      \"data\": [10, 21, 34, 41, 52, 63, 75, 89],\n      \"name\": \"length\",\n      \"unit\": \"ft\",\n      \"label\": {\n        \"text\": \"length (ft)\"\n      },\n      \"annotationsize\": 50\n    },\n    \"y\": {\n      \"data\": [90, 190, 160, 320, 270, 250, 190, 80],\n      \"name\": \"weight\",\n      \"unit\": \"lb\",\n      \"label\": {\n        \"text\": \"weight (lb)\"\n      },\n      \"annotationsize\": 60\n    },\n    \"s\": {\n      \"data\": [7, 13, 21, 25, 29, 32, 34, 38],\n      \"name\": \"radius\",\n      \"unit\": \"ft\"\n    },\n    \"z\": {\n      \"data\": [8, 33, 18, 7, 19, 38, 11, 22],\n      \"min\": 1,\n      \"max\": 40,\n      \"label\": {\n        \"text\": \"depth (ft)\"\n      },\n      \"legendvisible\": true\n    },\n    \"colorprovider\": colorprovider\n  });\n  widget.removeTitle(AnnotationLocation.North);\n  widget.removeTitle(AnnotationLocation.West);\n  widget.removeTitle(AnnotationLocation.South);\n  widget.setAnnotationSize({\n    \"north\": 70,\n    \"west\": 130,\n    \"south\": 130\n  });\n  widget.getToolByName(\"colorbar\").setEnabled(true);\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": widget\n  });\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/Carnac/Tools/FloatingColorBar/floatingColorBar?section=bubbleChart&extract=true","width":"100%","height":"679.5px","style":{"border":"none"}},"children":[]}]},"headings":[{"value":"Floating Color Bar","id":"floating-color-bar","depth":1},{"value":"Cross Plot","id":"cross-plot","depth":3},{"value":"Bubble Chart","id":"bubble-chart","depth":3}],"frontmatter":{"title":"Floating Color Bar","seo":{"title":"Floating Color Bar"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/tutorials/carnac/tools/floating-color-bar","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}