{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"Enumeration: ChartType","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":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/solutions/geotoolkit/apis/readme"},"children":["API"]}," / ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/solutions/geotoolkit/apis/modules/geotoolkit"},"children":["geotoolkit"]}," / ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/solutions/geotoolkit/apis/modules/geotoolkit.charts"},"children":["charts"]}," / ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/solutions/geotoolkit/apis/modules/geotoolkit.charts.charttype"},"children":["ChartType"]}," / ChartType"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"enumeration-charttype","__idx":0},"children":["Enumeration: ChartType"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/solutions/geotoolkit/apis/modules/geotoolkit.charts"},"children":["charts"]},".",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/solutions/geotoolkit/apis/modules/geotoolkit.charts.charttype"},"children":["ChartType"]},".ChartType"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Chart types"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"table-of-contents","__idx":1},"children":["Table of contents"]},{"$$mdtype":"Tag","name":"details","attributes":{"open":"true"},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":[{"$$mdtype":"Tag","name":"span","attributes":{"style":{"fontSize":"1.25em","fontWeight":"bold"}},"children":["Enumeration Members"]}]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":""},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/solutions/geotoolkit/apis/enums/geotoolkit.charts.charttype.charttype#areachart"},"children":["AreaChart"]}]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":""},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/solutions/geotoolkit/apis/enums/geotoolkit.charts.charttype.charttype#arearangechart"},"children":["AreaRangeChart"]}]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":""},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/solutions/geotoolkit/apis/enums/geotoolkit.charts.charttype.charttype#barchart"},"children":["BarChart"]}]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/solutions/geotoolkit/apis/enums/geotoolkit.charts.charttype.charttype#boxplotchart"},"children":["BoxPlotChart"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/solutions/geotoolkit/apis/enums/geotoolkit.charts.charttype.charttype#bubblechart"},"children":["BubbleChart"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/solutions/geotoolkit/apis/enums/geotoolkit.charts.charttype.charttype#crossplotchart"},"children":["CrossPlotChart"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/solutions/geotoolkit/apis/enums/geotoolkit.charts.charttype.charttype#densitycontourchart"},"children":["DensityContourChart"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/solutions/geotoolkit/apis/enums/geotoolkit.charts.charttype.charttype#donutchart"},"children":["DonutChart"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/solutions/geotoolkit/apis/enums/geotoolkit.charts.charttype.charttype#errorchart"},"children":["ErrorChart"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/solutions/geotoolkit/apis/enums/geotoolkit.charts.charttype.charttype#floatingbarchart"},"children":["FloatingBarChart"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/solutions/geotoolkit/apis/enums/geotoolkit.charts.charttype.charttype#heatmapchart"},"children":["HeatMapChart"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/solutions/geotoolkit/apis/enums/geotoolkit.charts.charttype.charttype#histogramchart"},"children":["HistogramChart"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/solutions/geotoolkit/apis/enums/geotoolkit.charts.charttype.charttype#linechart"},"children":["LineChart"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/solutions/geotoolkit/apis/enums/geotoolkit.charts.charttype.charttype#piechart"},"children":["PieChart"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/solutions/geotoolkit/apis/enums/geotoolkit.charts.charttype.charttype#radarchart"},"children":["RadarChart"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/solutions/geotoolkit/apis/enums/geotoolkit.charts.charttype.charttype#regressionline"},"children":["RegressionLine"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/solutions/geotoolkit/apis/enums/geotoolkit.charts.charttype.charttype#tornadochart"},"children":["TornadoChart"]}]}]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"contents","__idx":2},"children":["Contents"]},{"$$mdtype":"Tag","name":"details","attributes":{"open":"true"},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":[{"$$mdtype":"Tag","name":"span","attributes":{"style":{"fontSize":"1.25em","fontWeight":"bold"}},"children":["Enumeration Members"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"areachart","__idx":3},"children":["AreaChart"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["• ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["AreaChart"]}," = ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"AreaChart\""]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Area Chart"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Example"]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import {ChartType} from '@int/geotoolkit/charts/ChartType';\n\nwidget.addChart({\n'type': ChartType.AreaChart,\n'series': {\n'x': 'seriesId-1', // x-series identifier\n'y': 'seriesId-2' // y-series identifier (or array of ids)\n}\n});\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Example"]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import {CirclePainter} from '@int/geotoolkit/scene/shapes/painters/CirclePainter';\nimport {ChartType} from '@int/geotoolkit/charts/ChartType';\n\nwidget.addChart({\n'type': ChartType.AreaChart, // display data as a AreaChart\n'name': 'Data comparison', // chart name, can be used in legend formatter or for widget.getChart() method\n'series': {\n'x': 'seriesId-1', // x-series identifier\n// options for each chart line:\n'y': [{\n'data': 'seriesId-2', // y-series identifier\n'linestyle': '#000000', // linestyle to use\n'fillstyle': '#000000', // fillstyle to use (for the area between series)\n'symbol': { // vertex symbol styles, see SymbolShape for more info\n'linestyle': 'black',\n'fillstyle': 'blue',\n'painter': CirclePainter\n},\n'selectionsymbol': {…}, // specific selection symbol options, see SymbolShape for more info\n}, …],\n},\n'symbol': { // common vertex symbols options, see SymbolShape for more info\n'width': 7,\n'height': 7,\n'painter': CirclePainter, // default painter if no specific value has been set\n'sizeisindevicespace': true,\n'visible': true\n},\n'selectionsymbol': {…}, // common selection symbol options (specific overrides common), see SymbolShape for more info\n'axis': {\n'x': 'axis-1', // x-axis identifier\n'y': 'axis-2' // y-axis identifier\n},\n'spline': false, // true to use splines instead of polylines\n// chart animation parameter (boolean to enable/disable default animation, Effects\n// for pre-installed variant, object/AnimationStyle for a custom style):\n'animation': true,\n// format template for chart legend items, supports the following variables:\n// 1) '${name}' = chart name\n// 2) '${type}' = chart type (LineChart)\n// 3) '${x-series}' = x-series identifier\n// 4) '${y-series}' = y-series identifier\n'legend': {\n'format': '${name}: ${y-series}'\n}\n});\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Example"]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import {CssStyle} from '@int/geotoolkit/css/CssStyle';\n\nwidget.setCss(new CssStyle({\n'css': '*[cssclass=\"areachart-series\"]:hover { fillstyle-color: \"red\";}' // adjust styles via css\n}));\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"arearangechart","__idx":4},"children":["AreaRangeChart"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["• ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["AreaRangeChart"]}," = ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"AreaRangeChart\""]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["AreaRange Chart"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Example"]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import {ChartType} from '@int/geotoolkit/charts/ChartType';\n\nwidget.addChart({\n'type': ChartType.AreaRangeChart,\n'series': {\n'x': 'seriesId-1', // x-series identifier\n'y': ['seriesBottom', 'seriesTop'] // array of two range y-series identifiers\n}\n});\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Example"]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import {CirclePainter} from '@int/geotoolkit/scene/shapes/painters/CirclePainter';\nimport {ChartType} from '@int/geotoolkit/charts/ChartType';\n\nwidget.addChart({\n'type': ChartType.AreaRangeChart, // display data as a AreaChart\n'name': 'Data comparison', // chart name, can be used in legend formatter or for widget.getChart() method\n'series': {\n'x': 'seriesId-1', // x-series identifier\n// options for each chart line:\n'y': [{\n'data': 'seriesBottom', // bottom y-series identifier\n'linestyle': '#000000', // linestyle to use\n'symbol': { // vertex symbol styles, see SymbolShape for more info\n'linestyle': 'black',\n'fillstyle': 'blue',\n'painter': CirclePainter\n},\n'selectionsymbol': {…}, // specific selection symbol options, see SymbolShape for more info\n}, …],\n},\n'fillstyle': '#000000', // fillstyle to fill the range between two series\n'symbol': { // common vertex symbols options, see SymbolShape for more info\n'width': 7,\n'height': 7,\n'painter': CirclePainter, // default painter if no specific value has been set\n'sizeisindevicespace': true,\n'visible': true\n},\n'selectionsymbol': {…}, // common selection symbol options (specific overrides common), see SymbolShape for more info\n'axis': {\n'x': 'axis-1', // x-axis identifier\n'y': 'axis-2' // y-axis identifier\n},\n'spline': false, // true to use splines instead of polylines\n// chart animation parameter (boolean to enable/disable default animation, Effects\n// for pre-installed variant, object/AnimationStyle for a custom style):\n'animation': true,\n// format template for chart legend items, supports the following variables:\n// 1) '${name}' = chart name\n// 2) '${type}' = chart type (LineChart)\n// 3) '${x-series}' = x-series identifier\n// 4) '${y-series}' = y-series identifier\n'legend': {\n'format': '${name}: ${y-series}'\n}\n});\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Example"]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import {CssStyle} from '@int/geotoolkit/css/CssStyle';\n\nwidget.setCss(new CssStyle({\n'css': '*[cssclass=\"arearangechart-series\"]:hover { fillstyle-mixin: rgba(0,0,0,.1);}' // adjust styles via css\n}));\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"barchart","__idx":5},"children":["BarChart"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["• ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["BarChart"]}," = ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"BarChart\""]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Bar Chart"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Example"]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import {ChartType} from '@int/geotoolkit/charts/ChartType';\n\nwidget.addChart({\n'type': ChartType.BarChart,\n'series': {\n'x': 'seriesName-1', // x-series identifier\n'y': ['seriesName-2', …] // array of y-series identifiers\n}\n});\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Example"]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import {ChartType} from '@int/geotoolkit/charts/ChartType';\n\nwidget.addChart({\n'type': ChartType.BarChart, // display data as a BarChart\n'name': 'City population', // chart name, can be used in legend formatter or for widget.getChart() method\n'series': {\n'x': 'Cities', // x-series identifier\n// options for each chart bar:\n'y': [{\n'data': 'Population-2000', // y-series identifier\n'linestyle': '#000000', // bars linestyle\n'fillstyle': '#2196f3' // bars fillstyle\n}, …],\n},\n'axis': {\n'x': 'axis-1', // x-axis identifier\n'y': 'axis-2' // y-axis identifier\n},\n// chart animation parameter (boolean to enable/disable default animation, Effects\n// for pre-installed variant, object/AnimationStyle for a custom style):\n'animation': true,\n// format template for chart legend items, supports the following variables:\n// 1) '${name}' = chart name\n// 2) '${type}' = chart type (BarChart)\n// 3) '${x-series}' = x-series identifier\n// 4) '${y-series}' = y-series identifier\n'legend': {\n'format': '${name}: ${y-series}'\n}\n});\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Example"]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import {CssStyle} from '@int/geotoolkit/css/CssStyle';\n\nwidget.setCss(new CssStyle({\n'css': '*[cssclass=\"barchart-series\"]:hover { linestyle-width: 3;}' // adjust styles via css\n}));\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"boxplotchart","__idx":6},"children":["BoxPlotChart"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["• ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["BoxPlotChart"]}," = ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"BoxPlotChart\""]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["BoxPlot Chart"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Example"]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import {ChartType} from '@int/geotoolkit/charts/ChartType';\n\nwidget.addChart({\n'type': ChartType.BoxPlotChart,\n'series': {\n'x': 'Date',\n'y': [{\n'data': 'a',\n'fillstyle': colorstyle1\n}, {\n'data': 'b',\n'fillstyle': colorstyle1\n}, {\n'data': 'c',\n'fillstyle': colorstyle1\n}, {\n'data': 'd',\n'fillstyle': colorstyle2\n}],\n'group': [['a', 'b'], ['c', 'd']]\n},\n'linestyle': {\n'color': KnownColors.Gray,\n'pixelsnapmode': true\n},\n'datamode': DataMode.Raw,\n'axis': {\n'x': 'x-axis',\n'y': 'y-axis'\n}\n});\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"bubblechart","__idx":7},"children":["BubbleChart"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["• ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["BubbleChart"]}," = ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"BubbleChart\""]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Bubble Chart"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Example"]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import {ChartType} from '@int/geotoolkit/charts/ChartType';\nimport {DefaultColorProvider} from '@int/geotoolkit/util/DefaultColorProvider';\n\nwidget.addChart({\n'type': ChartType.BubbleChart, // display data as a BubbleChart\n'series': {\n'x': 'seriesName-1', // x-series identifier\n'y': 'seriesName-2', // y-series identifier\n'z': 'seriesName-3', // z-series (color) identifier\n's': 'seriesName-4' // s-series (size) identifier\n},\n'axis': {\n'x': 'axis-1', // x-axis identifier\n'y': 'axis-2', // y-axis identifier\n'z': 'axis-3' // z-axis (color provider) identifier\n}\n'linestyle': '#000000', // bubbles linestyle\n'colorprovider': new DefaultColorProvider({…}), // color provider for bubbles fillstyle (if z-axis is not connected)\n'fillstyle': '#80c0ff' // bubbles default fillstyle (if neither colorprovider or z-axis are provided)\n});\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Example"]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import {ChartType} from '@int/geotoolkit/charts/ChartType';\nimport {DefaultColorProvider} from '@int/geotoolkit/util/DefaultColorProvider';\n\nwidget.addChart({\n'type': ChartType.BubbleChart, // display data as a BubbleChart\n'series': {\n'x': 'seriesName-1', // x-series identifier\n'y': 'seriesName-2', // y-series identifier\n'z': 'seriesName-3', // z-series (color) identifier\n's': {\n'data': 'seriesId-4', // s-series (size) identifier\n'mins': 0, // minimum s data value for size distribution\n'maxs': 100, // maximum s data value for size distribution\n'minsize': 16, // minimum symbol size (side length of square) for s data value\n'maxsize': 48 // maximum symbol size (side length of square) for s data value\n}\n},\n'axis': {\n'x': 'axis-1', // x-axis identifier\n'y': 'axis-2', // y-axis identifier\n'z': 'axis-3' // z-axis (color provider) identifier\n},\n'linestyle': '#000000', // bubbles linestyle\n'colorprovider': new DefaultColorProvider({…}), // color provider for bubbles fillstyle (if z-axis is not connected)\n'fillstyle': '#80c0ff', // bubbles default fillstyle (if neither colorprovider or z-axis are provided)\n// format template for chart legend items, supports the following variables:\n// 1) '${name}' = chart name\n// 2) '${type}' = chart type (LineChart)\n// 3) '${x-series}' = x-series identifier\n// 4) '${y-series}' = y-series identifier\n// 5) '${z-series}' = z-series identifier\n// 6) '${s-series}' = s-series identifier\n'legend': {\n'format': '${name}: ${y-series}'\n}\n});\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Example"]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import {CssStyle} from '@int/geotoolkit/css/CssStyle';\n\nwidget.setCss(new CssStyle({\n'css': '*[cssclass=\"bubblechart-series\"]:hover { linestyle-width: 3;}' // adjust styles via css\n}));\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"crossplotchart","__idx":8},"children":["CrossPlotChart"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["• ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["CrossPlotChart"]}," = ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"CrossPlotChart\""]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["CrossPlot Chart"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Example"]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import {ChartType} from '@int/geotoolkit/charts/ChartType';\nimport {DefaultColorProvider} from '@int/geotoolkit/util/DefaultColorProvider';\n\nwidget.addChart({\n'type': ChartType.CrossPlot, // display data as a CrossPlot\n'series': {\n'x': 'seriesName-1', // x-series identifier\n'y': 'seriesName-2', // y-series identifier\n'z': 'seriesName-3', // z-series (color) identifier\n},\n'axis': {\n'x': 'axis-1', // x-axis identifier\n'y': 'axis-2', // y-axis identifier\n'z': 'axis-3' // z-axis (color provider) identifier\n}\n'colorprovider': new DefaultColorProvider({…}), // color provider for cross plot symbols (if z-axis is not connected)\n'fillstyle': '#80c0ff' // cross plot symbols default fillstyle (if neither colorprovider or z-axis are provided)\n});\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"densitycontourchart","__idx":9},"children":["DensityContourChart"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["• ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["DensityContourChart"]}," = ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"DensityContourChart\""]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Density Contour Chart"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Example"]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import {ChartType} from '@int/geotoolkit/charts/ChartType';\n\nwidget.addChart({\n'type': ChartType.DensityContourChart,\n'series': {\n'x': 'xData',\n'y': 'yData'\n},\n'axis': {\n'x': 'x-axis',\n'y': 'y-axis'\n},\n'grid': {\n'thresholds': 8,\n'bandwidth': 20\n}\n});\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"donutchart","__idx":10},"children":["DonutChart"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["• ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["DonutChart"]}," = ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"DonutChart\""]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Donut Chart"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Example"]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import {ChartType} from '@int/geotoolkit/charts/ChartType';\n\nconst labels = ['June', 'July', 'August'];\nconst styles = ['#ef6c00', '#2196f3', '#7cb342'];\n\nwidget.addChart({\n'type': ChartType.DonutChart,\n'series': {\n'x': 'seriesName-1' // series of numeric data values\n},\n'x': '50px', // center x-value, use 'px' for device or '%' for model value\n'y': '50px', // center y-value, use 'px' for device or '%' for model value\n'innerradius': '25px', // inner radius value, use 'px' for device or '%' for model value\n'outerradius': '150px' // outer radius value, use 'px' for device or '%' for model value\n});\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Example"]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import {ChartType} from '@int/geotoolkit/charts/ChartType';\nimport {DataOrder, Direction, PieMode} from '@int/geotoolkit/controls/shapes/DonutChart';\n\nconst labels = ['June', 'July', 'August'];\nconst styles = ['#ef6c00', '#2196f3', '#7cb342'];\n\nwidget.addChart({\n'type': ChartType.DonutChart,\n'series': {\n'x': 'seriesName-1' // series of numeric data values\n},\n'x': '50px', // center x-value, use 'px' for device or '%' for model value\n'y': '50px', // center y-value, use 'px' for device or '%' for model value\n'innerradius': '25px', // inner radius value, use 'px' for device or '%' for model value\n'outerradius': '150px', // outer radius value, use 'px' for device or '%' for model value\n'labels': (id) => labels[id], // callback for values labels,\n'colors': (id) => styles[id], // callback for slice color styles\n'order': DataOrder.Natural, // data order\n'direction': Direction.Clockwise, // data direction\n'label': {…}, // label options\n'outsideline': {…}, // outside line options\n'mode': PieMode.Pie2D, // chart visual mode\n'depth3d': 30, // height of the pseudo-3d chart (3d mode only)\n'inclination3d': 60, // angle of the pseudo-3d chart (between 0 and 90, 3d mode only)\n'createselectedstyle': (style) => style.clone().setProperties({…}), // selected style creation based on \"regular\" one\n'startangle': 0, // starting angle of the first slice, in degrees\n'totalangle': 360, // total angle of all slices, in degrees\n'sliceshift': {…} // slice shift options object\n});\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"errorchart","__idx":11},"children":["ErrorChart"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["• ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["ErrorChart"]}," = ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"ErrorChart\""]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Example"]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import {SquarePainter} from 'geotoolkit/scene/shapes/painters/SquarePainter';\nimport {ChartType} from '@int/geotoolkit/charts/ChartType';\n\nwidget.addChart({\n'type': ChartType.ErrorChart,\n'symbol': {\n'painter': SquarePainter\n},\n'series': {\n'x': 'x-data',\n'y': 'y-data',\n'z': 'z-data', // when z-data is provided - colorprovider from connected axis will be used to calculate fill style\n'dy': 'dy-data', // error along y axis\n'dx': 'dx-data' // error along x axis\n},\n'axes': {\n'x': 'x-axis',\n'y': 'y-axis',\n'z': 'z-axis'\n},\n'uncertainty': {\n'y': {\n'min': 0,\n'max': 10,\n'minsymbolsize': 1,\n'maxsymbolsize': 2,\n'model': true\n},\n'x': {\n'min': 0,\n'max': 5,\n'minsymbolsize': 20,\n'maxsymbolsize': 40\n}\n}\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"floatingbarchart","__idx":12},"children":["FloatingBarChart"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["• ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["FloatingBarChart"]}," = ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"FloatingBarChart\""]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Floating Bar Chart"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Example"]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import {ChartType} from '@int/geotoolkit/charts/ChartType';\n\nwidget.addChart({\n'type': ChartType.FloatingBarChart,\n'series': {\n'x': 'seriesName-1', // x-series identifier\n'y': ['seriesName-2', seriesName-3 …] // array even length of y-series identifiers. odd elements have beginnig of floating bar, even next to it - ending.\n}\n});\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Example"]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import {ChartType} from '@int/geotoolkit/charts/ChartType';\n\nwidget.addChart({\n'type': ChartType.FloatingBarChart, // display data as a FloatingBarChart\n'name': 'City population', // chart name, can be used in legend formatter or for widget.getChart() method\n'series': {\n'x': 'Cities', // x-series identifier\n// options for each chart bar:\n'y': [{\n'data': 'Population-2000', // y-series identifier for floating bar beginning, and its styles\n'linestyle': '#000000', // bars linestyle\n'fillstyle': '#2196f3' // bars fillstyle\n},\n'data': 'Population-2000-end', // y-series identifier for floating bar ending\n} …],\n},\n'axis': {\n'x': 'axis-1', // x-axis identifier\n'y': 'axis-2' // y-axis identifier\n},\n// chart animation parameter (boolean to enable/disable default animation, Effects\n// for pre-installed variant, object/AnimationStyle for a custom style):\n'animation': true,\n// format template for chart legend items, supports the following variables:\n// 1) '${name}' = chart name\n// 2) '${type}' = chart type (BarChart)\n// 3) '${x-series}' = x-series identifier\n// 4) '${y-series}' = y-series identifier\n'legend': {\n'format': '${name}: ${y-series}'\n}\n});\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Example"]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import {CssStyle} from '@int/geotoolkit/css/CssStyle';\n\nwidget.setCss(new CssStyle({\n'css': '*[cssclass=\"barchart-series\"]:hover { linestyle-width: 3;}' // adjust styles via css\n}));\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"heatmapchart","__idx":13},"children":["HeatMapChart"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["• ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["HeatMapChart"]}," = ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"HeatMapChart\""]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["HeatMap Chart"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Example"]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import {ChartType} from '@int/geotoolkit/charts/ChartType';\n\nwidget.addChart({\n'type': ChartType.HeatMapChart,\n'series': {\n'x': 'months',\n'y': 'years',\n'z': 'temperature'\n},\n'axis': {\n'x': 'x-axis',\n'y': 'y-axis',\n'z': 'z-axis'\n},\n'labels': {\n'visible': true\n}\n});\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"histogramchart","__idx":14},"children":["HistogramChart"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["• ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["HistogramChart"]}," = ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"HistogramChart\""]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Histogram Chart"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Example"]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import {ChartType} from '@int/geotoolkit/charts/ChartType';\n\nwidget.addChart({\n'type': ChartType.HistogramChart,\n'series': {\n'x': 'seriesName-1' // series of numeric data values\n},\n'fillstyle': '#ef6c00', // bars fill style\n'bins': 15 // total amount of bins\n});\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Example"]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import {ChartType} from '@int/geotoolkit/charts/ChartType';\nimport {FrequencyType} from '@int/geotoolkit/controls/shapes/Histogram';\n\nwidget.addChart({\n'type': ChartType.HistogramChart,\n'series': {\n'x': 'seriesName-1' // series of numeric data values\n},\n'linestyle': 'transparent', // bars line style\n'fillstyle': '#ef6c00', // bars fill style\n'bins': 15, // total amount of bins\n'accumulation': false, // enables accumulation mode for bins\n'frequencytype': FrequencyType.Absolute // frequency type changes vertical scaling for bars\n});\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"linechart","__idx":15},"children":["LineChart"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["• ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["LineChart"]}," = ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"LineChart\""]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Line Chart"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Example"]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import {ChartType} from '@int/geotoolkit/charts/ChartType';\n\nwidget.addChart({\n'type': ChartType.LineChart,\n'series': {\n'x': 'seriesId-1', // x-series identifier\n'y': 'seriesId-2' // y-series identifier (or array of ids)\n}\n});\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Example"]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import {CirclePainter} from '@int/geotoolkit/scene/shapes/painters/CirclePainter';\nimport {ChartType} from '@int/geotoolkit/charts/ChartType';\n\nwidget.addChart({\n'type': ChartType.LineChart, // display data as a LineChart\n'name': 'Data comparison', // chart name, can be used in legend formatter or for widget.getChart() method\n'series': {\n'x': 'seriesId-1', // x-series identifier\n// options for each chart line:\n'y': [{\n'data': 'seriesId-2', // y-series identifier\n'linestyle': '#000000', // linestyle to use\n'symbol': { // vertex symbol styles, see SymbolShape for more info\n'linestyle': 'black',\n'fillstyle': 'blue',\n'painter': CirclePainter\n},\n'selectionsymbol': {…}, // specific selection symbol options, see SymbolShape for more info\n}, …],\n},\n'symbol': { // common vertex symbols options, see SymbolShape for more info\n'width': 7,\n'height': 7,\n'painter': CirclePainter, // default painter if no specific value has been set\n'sizeisindevicespace': true,\n'visible': true\n},\n'selectionsymbol': {…}, // common selection symbol options (specific overrides common), see SymbolShape for more info\n'axis': {\n'x': 'axis-1', // x-axis identifier\n'y': 'axis-2' // y-axis identifier\n},\n'spline': false, // true to use splines instead of polylines\n// chart animation parameter (boolean to enable/disable default animation, Effects\n// for pre-installed variant, object/AnimationStyle for a custom style):\n'animation': true,\n// format template for chart legend items, supports the following variables:\n// 1) '${name}' = chart name\n// 2) '${type}' = chart type (LineChart)\n// 3) '${x-series}' = x-series identifier\n// 4) '${y-series}' = y-series identifier\n'legend': {\n'format': '${name}: ${y-series}'\n}\n});\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Example"]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import {CssStyle} from '@int/geotoolkit/css/CssStyle';\n\nwidget.setCss(new CssStyle({\n'css': '*[cssclass=\"linechart-series\"]:hover { linestyle-width: 3;}' // adjust styles via css\n}));\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"piechart","__idx":16},"children":["PieChart"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["• ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["PieChart"]}," = ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"PieChart\""]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Pie Chart"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Example"]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import {ChartType} from '@int/geotoolkit/charts/ChartType';\n\nconst labels = ['June', 'July', 'August'];\nconst styles = ['#ef6c00', '#2196f3', '#7cb342'];\n\nwidget.addChart({\n'type': ChartType.PieChart,\n'series': {\n'x': 'seriesName-1' // series of numeric data values\n},\n'x': '50px', // center x-value, use 'px' for device or '%' for model value\n'y': '50px', // center y-value, use 'px' for device or '%' for model value\n'outerradius': '150px' // outer radius value, use 'px' for device or '%' for model value\n});\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Example"]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import {ChartType} from '@int/geotoolkit/charts/ChartType';\nimport {DataOrder, Direction, PieMode} from '@int/geotoolkit/controls/shapes/DonutChart';\n\nconst labels = ['June', 'July', 'August'];\nconst styles = ['#ef6c00', '#2196f3', '#7cb342'];\n\nwidget.addChart({\n'type': ChartType.PieChart,\n'series': {\n'x': 'seriesName-1' // series of numeric data values\n},\n'x': '50px', // center x-value, use 'px' for device or '%' for model value\n'y': '50px', // center y-value, use 'px' for device or '%' for model value\n'outerradius': '150px', // outer radius value, use 'px' for device or '%' for model value\n'labels': (id) => labels[id], // callback for values labels,\n'colors': (id) => styles[id], // callback for slice color styles\n'order': DataOrder.Natural, // data order\n'direction': Direction.Clockwise, // data direction\n'label': {…}, // label options\n'outsideline': {…}, // outside line options\n'mode': PieMode.Pie2D, // chart visual mode\n'depth3d': 30, // height of the pseudo-3d chart (3d mode only)\n'inclination3d': 60, // angle of the pseudo-3d chart (between 0 and 90, 3d mode only)\n'createselectedstyle': (style) => style.clone().setProperties({…}), // selected style creation based on \"regular\" one\n'startangle': 0, // starting angle of the first slice, in degrees\n'totalangle': 360, // total angle of all slices, in degrees\n'sliceshift': {…} // slice shift options object\n});\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"radarchart","__idx":17},"children":["RadarChart"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["• ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["RadarChart"]}," = ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"RadarChart\""]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Radar Chart"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Example"]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import {ChartType} from '@int/geotoolkit/charts/ChartType';\n\nwidget.addChart({\n'type': ChartType.RadarChart,\n'categories': {\n'data': ['first', 'second', 'third', 'forth', 'fifth'],\n'linestyle': '#ef6c00',\n'textstyle': '#2196f3'\n},\n'content': [{\n'label': 'Serie 1',\n'linestyle': '#e64a19',\n'fillstyle': 'rgba(0, 0, 255, 0.5)'\n}, {\n'label': 'Serie 2',\n'linestyle': '#2196f3',\n'fillstyle': 'rgba(255, 0, 0, 0.5)'\n}]\n});\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"regressionline","__idx":18},"children":["RegressionLine"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["• ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["RegressionLine"]}," = ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"RegressionLine\""]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Regression Line Chart"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Example"]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import {ChartType} from '@int/geotoolkit/charts/ChartType';\n\nwidget.addChart({\n'type': ChartType.RegressionLine,\n'series': {\n'x': 'length',\n'y': 'height'\n},\n'axis': {\n'x': 'x-axis',\n'y': 'y-axis'\n},\n'regressionmodel': {\n'type': Linear\n}\n});\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"tornadochart","__idx":19},"children":["TornadoChart"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["• ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["TornadoChart"]}," = ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"TornadoChart\""]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Tornado Chart"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Example"]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"widget.addChart({\n'type': ChartType.TornadoChart,\n'series': {\n'left': 'Serie 1',\n'right': 'Serie 2'\n}\n});\n","lang":"ts"},"children":[]}]}]},"headings":[{"value":"Enumeration: ChartType","id":"enumeration-charttype","depth":1},{"value":"Table of contents","id":"table-of-contents","depth":2},{"value":"Contents","id":"contents","depth":2},{"value":"AreaChart","id":"areachart","depth":4},{"value":"AreaRangeChart","id":"arearangechart","depth":4},{"value":"BarChart","id":"barchart","depth":4},{"value":"BoxPlotChart","id":"boxplotchart","depth":4},{"value":"BubbleChart","id":"bubblechart","depth":4},{"value":"CrossPlotChart","id":"crossplotchart","depth":4},{"value":"DensityContourChart","id":"densitycontourchart","depth":4},{"value":"DonutChart","id":"donutchart","depth":4},{"value":"ErrorChart","id":"errorchart","depth":4},{"value":"FloatingBarChart","id":"floatingbarchart","depth":4},{"value":"HeatMapChart","id":"heatmapchart","depth":4},{"value":"HistogramChart","id":"histogramchart","depth":4},{"value":"LineChart","id":"linechart","depth":4},{"value":"PieChart","id":"piechart","depth":4},{"value":"RadarChart","id":"radarchart","depth":4},{"value":"RegressionLine","id":"regressionline","depth":4},{"value":"TornadoChart","id":"tornadochart","depth":4}],"frontmatter":{"seo":{"title":"Enumeration: ChartType"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/apis/enums/geotoolkit.charts.charttype.charttype","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}