highcharts
Version:
JavaScript charting framework
727 lines (726 loc) • 24 kB
JavaScript
/* *
*
* (c) 2014-2025 Highsoft AS
*
* Authors: Jon Arild Nygard / Oystein Moseng
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
'use strict';
import SeriesRegistry from '../../Core/Series/SeriesRegistry.js';
import U from '../../Core/Utilities.js';
const { isString } = U;
/* *
*
* API Options
*
* */
/**
* A treemap displays hierarchical data using nested rectangles. The data
* can be laid out in varying ways depending on options.
*
* @sample highcharts/demo/treemap-large-dataset/
* Treemap
*
* @extends plotOptions.scatter
* @excluding connectEnds, connectNulls, dataSorting, dragDrop, jitter, marker
* @product highcharts
* @requires modules/treemap
* @optionparent plotOptions.treemap
*/
const TreemapSeriesDefaults = {
/**
* When enabled the user can click on a point which is a parent and
* zoom in on its children. Deprecated and replaced by
* [allowTraversingTree](#plotOptions.treemap.allowTraversingTree).
*
* @sample {highcharts} highcharts/plotoptions/treemap-allowdrilltonode/
* Enabled
*
* @deprecated
* @type {boolean}
* @default false
* @since 4.1.0
* @product highcharts
* @apioption plotOptions.treemap.allowDrillToNode
*/
/**
* When enabled the user can click on a point which is a parent and
* zoom in on its children.
*
* @sample {highcharts} highcharts/plotoptions/treemap-allowtraversingtree/
* Enabled
* @sample {highcharts} highcharts/plotoptions/treemap-grouping-traversing/
* Traversing to Grouped Points node
*
* @since 7.0.3
* @product highcharts
*/
allowTraversingTree: false,
animationLimit: 250,
/**
* The border radius for each treemap item.
*/
borderRadius: 0,
/**
* Options for the breadcrumbs, the navigation at the top leading the
* way up through the traversed levels.
*
*
* @since 10.0.0
* @product highcharts
* @extends navigation.breadcrumbs
* @apioption plotOptions.treemap.breadcrumbs
*/
/**
* When the series contains less points than the crop threshold, all
* points are drawn, event if the points fall outside the visible plot
* area at the current zoom. The advantage of drawing all points
* (including markers and columns), is that animation is performed on
* updates. On the other hand, when the series contains more points than
* the crop threshold, the series data is cropped to only contain points
* that fall within the plot area. The advantage of cropping away
* invisible points is to increase performance on large series.
*
* @type {number}
* @default 300
* @since 4.1.0
* @product highcharts
* @apioption plotOptions.treemap.cropThreshold
*/
/**
* Fires on a request for change of root node for the tree, before the
* update is made. An event object is passed to the function, containing
* additional properties `newRootId`, `previousRootId`, `redraw` and
* `trigger`.
*
* @sample {highcharts} highcharts/plotoptions/treemap-events-setrootnode/
* Alert update information on setRootNode event.
*
* @type {Function}
* @default undefined
* @since 7.0.3
* @product highcharts
* @apioption plotOptions.treemap.events.setRootNode
*/
/**
* This option decides if the user can interact with the parent nodes
* or just the leaf nodes. When this option is undefined, it will be
* true by default. However when allowTraversingTree is true, then it
* will be false by default.
*
* @sample {highcharts} highcharts/plotoptions/treemap-interactbyleaf-false/
* False
* @sample {highcharts} highcharts/plotoptions/treemap-interactbyleaf-true-and-allowtraversingtree/
* InteractByLeaf and allowTraversingTree is true
*
* @type {boolean}
* @since 4.1.2
* @product highcharts
* @apioption plotOptions.treemap.interactByLeaf
*/
/**
* The sort index of the point inside the treemap level.
*
* @sample {highcharts} highcharts/plotoptions/treemap-sortindex/
* Sort by years
*
* @type {number}
* @since 4.1.10
* @product highcharts
* @apioption plotOptions.treemap.sortIndex
*/
/**
* A series specific or series type specific color set to apply instead
* of the global [colors](#colors) when
* [colorByPoint](#plotOptions.treemap.colorByPoint) is true.
*
* @type {Array<Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject>}
* @since 3.0
* @product highcharts
* @apioption plotOptions.treemap.colors
*/
/**
* Whether to display this series type or specific series item in the
* legend.
*/
showInLegend: false,
/**
* @ignore-option
*/
marker: void 0,
/**
* When using automatic point colors pulled from the `options.colors`
* collection, this option determines whether the chart should receive
* one color per series or one color per point.
*
* @see [series colors](#plotOptions.treemap.colors)
*
* @since 2.0
* @product highcharts
* @apioption plotOptions.treemap.colorByPoint
*/
colorByPoint: false,
/**
* @since 4.1.0
*/
dataLabels: {
enabled: true,
formatter: function () {
const point = this && this.point ?
this.point :
{}, name = isString(point.name) ? point.name : '';
return name;
},
/**
* Whether the data label should act as a group-level header. For leaf
* nodes, headers are not supported and the data label will be rendered
* inside.
*
* @sample {highcharts} highcharts/series-treemap/headers
* Headers for parent nodes
*
* @since 12.2.0
*/
headers: false,
inside: true,
padding: 2,
verticalAlign: 'middle',
style: {
textOverflow: 'ellipsis'
}
},
tooltip: {
headerFormat: '',
pointFormat: '<b>{point.name}</b>: {point.value}<br/>',
/**
* The HTML of the grouped point's nodes in the tooltip. Works only for
* Treemap series grouping and analogously to
* [pointFormat](#tooltip.pointFormat).
*
* The grouped nodes point tooltip can be also formatted using
* `tooltip.formatter` callback function and `point.isGroupNode` flag.
*
* @type {string}
* @default '+ {point.groupedPointsAmount} more...'
* @apioption tooltip.clusterFormat
*/
clusterFormat: '+ {point.groupedPointsAmount} more...<br/>'
},
/**
* Whether to ignore hidden points when the layout algorithm runs.
* If `false`, hidden points will leave open spaces.
*
* @since 5.0.8
*/
ignoreHiddenPoint: true,
/**
* This option decides which algorithm is used for setting position
* and dimensions of the points.
*
* @see [How to write your own algorithm](https://www.highcharts.com/docs/chart-and-series-types/treemap)
*
* @sample {highcharts} highcharts/plotoptions/treemap-layoutalgorithm-sliceanddice/
* SliceAndDice by default
* @sample {highcharts} highcharts/plotoptions/treemap-layoutalgorithm-stripes/
* Stripes
* @sample {highcharts} highcharts/plotoptions/treemap-layoutalgorithm-squarified/
* Squarified
* @sample {highcharts} highcharts/plotoptions/treemap-layoutalgorithm-strip/
* Strip
*
* @since 4.1.0
* @validvalue ["sliceAndDice", "stripes", "squarified", "strip"]
*/
layoutAlgorithm: 'sliceAndDice',
/**
* Defines which direction the layout algorithm will start drawing.
*
* @since 4.1.0
* @validvalue ["vertical", "horizontal"]
*/
layoutStartingDirection: 'vertical',
/**
* Enabling this option will make the treemap alternate the drawing
* direction between vertical and horizontal. The next levels starting
* direction will always be the opposite of the previous.
*
* @sample {highcharts} highcharts/plotoptions/treemap-alternatestartingdirection-true/
* Enabled
*
* @since 4.1.0
*/
alternateStartingDirection: false,
/**
* Used together with the levels and allowTraversingTree options. When
* set to false the first level visible to be level one, which is
* dynamic when traversing the tree. Otherwise the level will be the
* same as the tree structure.
*
* @since 4.1.0
*/
levelIsConstant: true,
/**
* Options for the button appearing when traversing down in a treemap.
*
* Since v9.3.3 the `traverseUpButton` is replaced by `breadcrumbs`.
*
* @deprecated
*/
traverseUpButton: {
/**
* The position of the button.
*/
position: {
/**
* Vertical alignment of the button.
*
* @type {Highcharts.VerticalAlignValue}
* @default top
* @product highcharts
* @apioption plotOptions.treemap.traverseUpButton.position.verticalAlign
*/
/**
* Horizontal alignment of the button.
*
* @type {Highcharts.AlignValue}
*/
align: 'right',
/**
* Horizontal offset of the button.
*/
x: -10,
/**
* Vertical offset of the button.
*/
y: 10
}
},
/**
* Group padding for parent elements in terms of pixels. See also the
* `nodeSizeBy` option that controls how the leaf nodes' size is affected by
* the padding.
*
* @sample {highcharts} highcharts/series-treemap/grouppadding/
* Group padding
* @type {number}
* @since 12.2.0
* @product highcharts
* @apioption plotOptions.treemap.groupPadding
*/
/**
* Set options on specific levels. Takes precedence over series options,
* but not point options.
*
* @sample {highcharts} highcharts/plotoptions/treemap-levels/
* Styling dataLabels and borders
* @sample {highcharts} highcharts/demo/treemap-with-levels/
* Different layoutAlgorithm
*
* @type {Array<*>}
* @since 4.1.0
* @product highcharts
* @apioption plotOptions.treemap.levels
*/
/**
* Experimental. How to set the size of child nodes when a header or padding
* is present. When `leaf`, the group is expanded to make room for headers
* and padding in order to preserve the relative sizes between leaves. When
* `group`, the leaves are naïvely fit into the remaining area after the
* header and padding are subtracted.
*
* @sample {highcharts} highcharts/series-treemap/nodesizeby/
* Node sizing
* @since 12.2.0
* @type {string}
* @validvalue ["group", "leaf"]
* @default group
* @apioption plotOptions.treemap.nodeSizeBy
*/
/**
* Can set a `borderColor` on all points which lies on the same level.
*
* @type {Highcharts.ColorString}
* @since 4.1.0
* @product highcharts
* @apioption plotOptions.treemap.levels.borderColor
*/
/**
* Set the dash style of the border of all the point which lies on the
* level. See
* [plotOptions.scatter.dashStyle](#plotoptions.scatter.dashstyle)
* for possible options.
*
* @type {Highcharts.DashStyleValue}
* @since 4.1.0
* @product highcharts
* @apioption plotOptions.treemap.levels.borderDashStyle
*/
/**
* Can set the borderWidth on all points which lies on the same level.
*
* @type {number}
* @since 4.1.0
* @product highcharts
* @apioption plotOptions.treemap.levels.borderWidth
*/
/**
* Can set a color on all points which lies on the same level.
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @since 4.1.0
* @product highcharts
* @apioption plotOptions.treemap.levels.color
*/
/**
* A configuration object to define how the color of a child varies from
* the parent's color. The variation is distributed among the children
* of node. For example when setting brightness, the brightness change
* will range from the parent's original brightness on the first child,
* to the amount set in the `to` setting on the last node. This allows a
* gradient-like color scheme that sets children out from each other
* while highlighting the grouping on treemaps and sectors on sunburst
* charts.
*
* @sample highcharts/demo/sunburst/
* Sunburst with color variation
*
* @sample highcharts/series-treegraph/color-variation
* Treegraph nodes with color variation
*
* @since 6.0.0
* @product highcharts
* @apioption plotOptions.treemap.levels.colorVariation
*/
/**
* The key of a color variation. Currently supports `brightness` only.
*
* @type {string}
* @since 6.0.0
* @product highcharts
* @validvalue ["brightness"]
* @apioption plotOptions.treemap.levels.colorVariation.key
*/
/**
* The ending value of a color variation. The last sibling will receive
* this value.
*
* @type {number}
* @since 6.0.0
* @product highcharts
* @apioption plotOptions.treemap.levels.colorVariation.to
*/
/**
* Can set the options of dataLabels on each point which lies on the
* level.
* [plotOptions.treemap.dataLabels](#plotOptions.treemap.dataLabels) for
* possible values.
*
* @extends plotOptions.treemap.dataLabels
* @since 4.1.0
* @product highcharts
* @apioption plotOptions.treemap.levels.dataLabels
*/
/**
* Can set the layoutAlgorithm option on a specific level.
*
* @type {string}
* @since 4.1.0
* @product highcharts
* @validvalue ["sliceAndDice", "stripes", "squarified", "strip"]
* @apioption plotOptions.treemap.levels.layoutAlgorithm
*/
/**
* Can set the layoutStartingDirection option on a specific level.
*
* @type {string}
* @since 4.1.0
* @product highcharts
* @validvalue ["vertical", "horizontal"]
* @apioption plotOptions.treemap.levels.layoutStartingDirection
*/
/**
* Decides which level takes effect from the options set in the levels
* object.
*
* @sample {highcharts} highcharts/plotoptions/treemap-levels/
* Styling of both levels
*
* @type {number}
* @since 4.1.0
* @product highcharts
* @apioption plotOptions.treemap.levels.level
*/
// Presentational options
/**
* The color of the border surrounding each tree map item.
*
* @type {Highcharts.ColorString}
*/
borderColor: "#e6e6e6" /* Palette.neutralColor10 */,
/**
* The width of the border surrounding each tree map item.
*/
borderWidth: 1,
colorKey: 'colorValue',
/**
* The opacity of grouped points in treemap. When a point has children, the
* group point is covering the children, and is given this opacity. The
* visibility of the children is determined by the opacity.
*
* @since 4.2.4
*/
opacity: 0.15,
/**
* A wrapper object for all the series options in specific states.
*
* @extends plotOptions.heatmap.states
*/
states: {
/**
* Options for the hovered series
*
* @extends plotOptions.heatmap.states.hover
* @excluding halo
*/
hover: {
/**
* The border color for the hovered state.
*/
borderColor: "#999999" /* Palette.neutralColor40 */,
/**
* Brightness for the hovered point. Defaults to 0 if the
* heatmap series is loaded first, otherwise 0.1.
*
* @type {number}
* @default undefined
*/
brightness: SeriesRegistry.seriesTypes.heatmap ? 0 : 0.1,
/**
* @extends plotOptions.heatmap.states.hover.halo
*/
halo: false,
/**
* The opacity of a point in treemap. When a point has children,
* the visibility of the children is determined by the opacity.
*
* @since 4.2.4
*/
opacity: 0.75,
/**
* The shadow option for hovered state.
*/
shadow: false
}
},
legendSymbol: 'rectangle',
/**
* This option enables automatic traversing to the last child level upon
* node interaction. This feature simplifies navigation by immediately
* focusing on the deepest layer of the data structure without intermediate
* steps.
*
* @sample {highcharts} highcharts/plotoptions/treemap-traverse-to-leaf/
* Traverse to leaf enabled
*
* @since 11.4.4
*
* @product highcharts
*/
traverseToLeaf: false,
/**
* An option to optimize treemap series rendering by grouping smaller leaf
* nodes below a certain square area threshold in pixels. If the square area
* of a point becomes smaller than the specified threshold, determined by
* the `pixelWidth` and/or `pixelHeight` options, then this point is moved
* into one group point per series.
*
* @sample {highcharts} highcharts/plotoptions/treemap-grouping-simple
* Simple demo of Treemap grouping
* @sample {highcharts} highcharts/plotoptions/treemap-grouping-multiple-parents
* Treemap grouping with multiple parents
* @sample {highcharts} highcharts/plotoptions/treemap-grouping-advanced
* Advanced demo of Treemap grouping
*
* @since 12.1.0
*
* @excluding allowOverlap, animation, dataLabels, drillToCluster, events,
* layoutAlgorithm, marker, states, zones
*
* @product highcharts
*/
cluster: {
/**
* An additional, individual class name for the grouped point's graphic
* representation.
*
* @type string
* @product highcharts
*/
className: void 0,
/**
* Individual color for the grouped point. By default the color is
* pulled from the parent color.
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @product highcharts
*/
color: void 0,
/**
* Enable or disable Treemap grouping.
*
* @type {boolean}
* @since 12.1.0
* @product highcharts
*/
enabled: false,
/**
* The pixel threshold width of area, which is used in Treemap grouping.
*
* @type {number}
* @since 12.1.0
* @product highcharts
*/
pixelWidth: void 0,
/**
* The pixel threshold height of area, which is used in Treemap
* grouping.
*
* @type {number}
* @since 12.1.0
* @product highcharts
*/
pixelHeight: void 0,
/**
* The name of the point of grouped nodes shown in the tooltip,
* dataLabels, etc. By default it is set to '+ n', where n is number of
* grouped points.
*
* @type {string}
* @since 12.1.0
* @product highcharts
*/
name: void 0,
/**
* A configuration property that specifies the factor by which the value
* and size of a grouped node are reduced. This can be particularly
* useful when a grouped node occupies a disproportionately large
* portion of the graph, ensuring better visual balance and readability.
*
* @type {number}
* @since 12.1.0
* @product highcharts
*/
reductionFactor: void 0,
/**
* Defines the minimum number of child nodes required to create a group
* of small nodes.
*
* @type {number}
* @since 12.1.0
* @product highcharts
*/
minimumClusterSize: 5,
layoutAlgorithm: {
distance: 0,
gridSize: 0,
kmeansThreshold: 0
},
marker: {
lineWidth: 0,
radius: 0
}
}
};
/**
* A `treemap` series. If the [type](#series.treemap.type) option is
* not specified, it is inherited from [chart.type](#chart.type).
*
* @extends series,plotOptions.treemap
* @excluding dataParser, dataURL, stack, dataSorting
* @product highcharts
* @requires modules/treemap
* @apioption series.treemap
*/
/**
* An array of data points for the series. For the `treemap` series
* type, points can be given in the following ways:
*
* 1. An array of numerical values. In this case, the numerical values will be
* interpreted as `value` options. Example:
* ```js
* data: [0, 5, 3, 5]
* ```
*
* 2. An array of objects with named values. The following snippet shows only a
* few settings, see the complete options set below. If the total number of
* data points exceeds the series'
* [turboThreshold](#series.treemap.turboThreshold),
* this option is not available.
* ```js
* data: [{
* value: 9,
* name: "Point2",
* color: "#00FF00"
* }, {
* value: 6,
* name: "Point1",
* color: "#FF00FF"
* }]
* ```
*
* @sample {highcharts} highcharts/chart/reflow-true/
* Numerical values
* @sample {highcharts} highcharts/series/data-array-of-objects/
* Config objects
*
* @type {Array<number|null|*>}
* @extends series.heatmap.data
* @excluding x, y, pointPadding
* @product highcharts
* @apioption series.treemap.data
*/
/**
* The value of the point, resulting in a relative area of the point
* in the treemap.
*
* @type {number|null}
* @product highcharts
* @apioption series.treemap.data.value
*/
/**
* Serves a purpose only if a `colorAxis` object is defined in the chart
* options. This value will decide which color the point gets from the
* scale of the colorAxis.
*
* @type {number}
* @since 4.1.0
* @product highcharts
* @apioption series.treemap.data.colorValue
*/
/**
* Only for treemap. Use this option to build a tree structure. The
* value should be the id of the point which is the parent. If no points
* has a matching id, or this option is undefined, then the parent will
* be set to the root.
*
* @sample {highcharts} highcharts/point/parent/
* Point parent
* @sample {highcharts} highcharts/demo/treemap-with-levels/
* Example where parent id is not matching
*
* @type {string}
* @since 4.1.0
* @product highcharts
* @apioption series.treemap.data.parent
*/
''; // Keeps doclets above detached
/* *
*
* Default Export
*
* */
export default TreemapSeriesDefaults;