{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs","tab"]},"type":"markdown"},"seo":{"title":"Date and Time Axes","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":"date-and-time-axes","__idx":0},"children":["Date and Time Axes"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This tutorial demonstrates how to use DateTimeTickGenerator and AdaptiveDateTimeTickGenerator in an axis. Both DateTimeTickGenerator and AdaptiveDateTimeTickGenerator generate tick positions based on UTC date and time if no time zone offset is passed."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"datetime-tick-generator","__idx":1},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Shapes/DateAndTimeAxes/dateAndTimeAxes#tickGenerator"},"children":["#"]}," DateTime Tick Generator"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The datetime tick generator generates ticks and labels by setting zoom level manually. Time zone offset is optional."]},{"$$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 { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { DateTimeTickGenerator, LabelMode } from \"@int/geotoolkit/axis/DateTimeTickGenerator.ts\";\nimport { DateZoomLevel } from \"@int/geotoolkit/axis/DateZoomLevel.ts\";\nimport { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport { UnitFactory } from \"@int/geotoolkit/util/UnitFactory.ts\";\nimport { TimeZone } from \"@int/geotoolkit/axis/TimeZone.ts\";\nimport { Axis } from \"@int/geotoolkit/axis/Axis.ts\";\nimport { AxisHelper } from \"/src/helpers/axis.ts\";\nfunction createAxis(tickGenerator, bounds, isUnit) {\n  const minDateValue = new Date(2e3, 0, 1, 0, 0, 0, 0);\n  minDateValue.setUTCHours(0, 0, 0, 0);\n  let minValue = minDateValue.getTime();\n  const maxDateValue = new Date(2e3, 5, 1, 0, 0, 0, 0);\n  maxDateValue.setUTCHours(0, 0, 0, 0);\n  let maxValue = maxDateValue.getTime();\n  if (isUnit) {\n    minValue /= 1e3;\n    maxValue /= 1e3;\n  }\n  tickGenerator.setLabelStyle(\"major\", AxisHelper.axisColor()[\"style\"]).setLabelStyle(\"minor\", null).setLabelStyle(\"edge\", AxisHelper.axisColor()[\"style\"]).setTickStyle(\"major\", AxisHelper.axisMajorTickColor()[\"style\"]).setTickStyle(\"minor\", AxisHelper.axisMinorTickColor()[\"style\"]).setTickStyle(\"edge\", AxisHelper.axisEdgeTickColor()[\"style\"]);\n  return new Axis(tickGenerator).setAutoLabelRotation(true).setBaseLineStyle(AxisHelper.axisMajorTickColor()[\"style\"]).setBounds(bounds).setModelLimits(new Rect(minValue, minValue, maxValue, maxValue));\n}\nfunction createScene(canvas) {\n  const parentGroup = new Group().addChild([\n    createAxis(\n      new DateTimeTickGenerator().setZoomLevel(DateZoomLevel.Month),\n      new Rect(10, 30, 60, 570)\n    ),\n    createAxis(\n      new DateTimeTickGenerator(6 * 3600 * 1e3, UnitFactory.getInstance().getUnit(\"ms\")).setZoomLevel(DateZoomLevel.Month),\n      new Rect(70, 30, 120, 570)\n    ),\n    createAxis(\n      new DateTimeTickGenerator().setZoomLevel(DateZoomLevel.Month).setTimeZone(TimeZone.LocalTime),\n      new Rect(130, 30, 180, 570)\n    ),\n    createAxis(\n      new DateTimeTickGenerator().setZoomLevel(DateZoomLevel.Week),\n      new Rect(190, 30, 240, 570)\n    ),\n    createAxis(\n      new DateTimeTickGenerator().setZoomLevel(DateZoomLevel.Month).setUnit(UnitFactory.getInstance().getUnit(\"s\")),\n      new Rect(250, 30, 300, 570),\n      true\n    ),\n    createAxis(\n      new DateTimeTickGenerator().setZoomLevel(DateZoomLevel.Month).setLabelMode(LabelMode.Between),\n      new Rect(310, 30, 390, 570)\n    )\n  ]);\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": parentGroup\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/Shapes/DateAndTimeAxes/dateAndTimeAxes?section=tickGenerator&extract=true","width":"100%","height":"688.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"adaptive-datetime-tick-generator","__idx":2},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Shapes/DateAndTimeAxes/dateAndTimeAxes#adaptiveTickGenerator"},"children":["#"]}," Adaptive DateTime Tick Generator"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The adaptive date time tick generator will automatically configure itself to create ticks at a reasonable interval."]},{"$$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 { DateUtil } from \"@int/geotoolkit/util/DateUtil.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport { AdaptiveDateTimeTickGenerator } from \"@int/geotoolkit/axis/AdaptiveDateTimeTickGenerator.ts\";\nimport { Orientation } from \"@int/geotoolkit/util/Orientation.ts\";\nimport { AnchorType } from \"@int/geotoolkit/util/AnchorType.ts\";\nimport { Axis } from \"@int/geotoolkit/axis/Axis.ts\";\nimport { AxisHelper } from \"/src/helpers/axis.ts\";\nfunction createAxis(tickGenerator, bounds) {\n  const minDateValue = new Date(2e3, 0, 1, 0, 0, 0, 0);\n  minDateValue.setUTCHours(0, 0, 0, 0);\n  const minValue = minDateValue.getTime();\n  const maxDateValue = new Date(2e3, 5, 1, 0, 0, 0, 0);\n  maxDateValue.setUTCHours(0, 0, 0, 0);\n  const maxValue = maxDateValue.getTime();\n  tickGenerator.setLabelStyle(\"major\", AxisHelper.axisColor()[\"style\"]).setLabelStyle(\"minor\", null).setLabelStyle(\"edge\", AxisHelper.axisColor()[\"style\"]).setTickStyle(\"major\", AxisHelper.axisMajorTickColor()[\"style\"]).setTickStyle(\"minor\", AxisHelper.axisMinorTickColor()[\"style\"]).setTickStyle(\"edge\", AxisHelper.axisEdgeTickColor()[\"style\"]);\n  return new Axis(tickGenerator).setAutoLabelRotation(true).setBaseLineStyle(AxisHelper.axisMajorTickColor()[\"style\"]).setBounds(bounds).setModelLimits(new Rect(minValue, minValue, maxValue, maxValue));\n}\nfunction createFormatTickGenerator() {\n  return new AdaptiveDateTimeTickGenerator().setLabelGradeFormat(\"edge\", \"M-j, Y\").setLabelGradeFormat(\"major\", \"M-j, Y<b\\\\r>H:i:s\").setLabelGradeFormat(\"minor\", \"H:i:s\");\n}\nfunction createTickGeneratorWithHandler() {\n  return new AdaptiveDateTimeTickGenerator().setFormatLabelHandler((tickGenerator, parent, orient, tickInfo, tickIndex, modelValue) => {\n    const tickType = tickInfo.getGrade();\n    if (tickType === \"edge\") {\n      if (orient === Orientation.Vertical) {\n        if (tickInfo.getContextTransformation().getScaleY() > 0) {\n          tickInfo.setAnchorType(tickIndex === 0 ? AnchorType.TopCenter : AnchorType.BottomCenter);\n        } else {\n          tickInfo.setAnchorType(tickIndex === 1 ? AnchorType.TopCenter : AnchorType.BottomCenter);\n        }\n      }\n      if (orient === Orientation.Horizontal) {\n        if (tickInfo.getContextTransformation().getScaleX() > 0) {\n          tickInfo.setAnchorType(tickIndex === 0 ? AnchorType.LeftCenter : AnchorType.RightCenter);\n        } else {\n          tickInfo.setAnchorType(tickIndex === 1 ? AnchorType.LeftCenter : AnchorType.RightCenter);\n        }\n      }\n    } else {\n      tickInfo.setAnchorType(AnchorType.Center);\n    }\n    if (tickType === \"edge\") {\n      return DateUtil.formatUTC(new Date(modelValue), \"M-j, Y<b\\\\r>H:i:s\");\n    } else if (tickType === \"major\") {\n      return DateUtil.formatUTC(new Date(modelValue), \"M-j, Y<b\\\\r>H:i:s\");\n    }\n    return DateUtil.formatUTC(new Date(modelValue), \"H:i:s\");\n  }).setLabelMaxText(\"edge\", \"Jan-31, 2000<br>00:00:00\").setLabelMaxText(\"major\", \"Jan-31, 2000<br>00:00:00\").setLabelMaxText(\"minor\", \"00:00:00\");\n}\nfunction createScene(canvas) {\n  const parentGroup = new Group().addChild([\n    createAxis(new AdaptiveDateTimeTickGenerator(), new Rect(10, 30, 60, 570)),\n    createAxis(createFormatTickGenerator(), new Rect(70, 30, 120, 570)),\n    createAxis(createTickGeneratorWithHandler(), new Rect(130, 30, 180, 570))\n  ]);\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": parentGroup\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/Shapes/DateAndTimeAxes/dateAndTimeAxes?section=adaptiveTickGenerator&extract=true","width":"100%","height":"688.5px","style":{"border":"none"}},"children":[]}]},"headings":[{"value":"Date and Time Axes","id":"date-and-time-axes","depth":1},{"value":"DateTime Tick Generator","id":"datetime-tick-generator","depth":3},{"value":"Adaptive DateTime Tick Generator","id":"adaptive-datetime-tick-generator","depth":3}],"frontmatter":{"title":"Date and Time Axes","seo":{"title":"Date and Time Axes"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/tutorials/carnac/shapes/date-and-time-axes","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}