ColorMap

import {ColorMap} from 'cx/charts';

The ColorMap widget is used to assign a different color to each chart element (e.g. LineGraph) from the standard color palette. This comes in very handy when the number of elements on the chart is variable.

ColorMap assigns a different color to every chart element with the same colorMap attribute and keeps the maximum distance between used colors.

Series 1

Series 2

Series 3

Series 4

Series 5

Controller Index

<div class="widgets" controller={PageController}>
    <Svg style="width:600px; height:400px;">
        <Chart offset="20 -10 -40 40"
            axes={{
                x: {type: NumericAxis},
                y: {type: NumericAxis, vertical: true}
            }}>
            <Gridlines />
            <ColorMap />
            <Repeater records-bind="$page.series">
                <LineGraph name-bind="$record.name"
                        active-bind="$record.active"
                        data-bind="$record.points"
                        colorMap="lines" />
            </Repeater>
        </Chart>
    </Svg>
    <Legend />
</div>

Copied!Cx Fiddle

Please note that ColorMap widget must be placed above the elements that use it.

To isolate overlapping color maps, use the ColorMap.Scope widget. Take a look at the example here.

Configuration

Property	Description	Type
names	A precomputed array of names to be registered. Useful if color registrations do not come in the same order in different render cycles.	array
offset	The index of the first color. Default value is `0`.	number
size	The total number of colors in a palette. Default value is `16`.	number
step	Distance between two subsequent series colors. If `step` is not set the map will calculate it based on the number of data series.	number
mod	Appearance modifier. For example, `mod="big"` will add the CSS class `.cxm-big` to the block element.	string/array
outerLayout	Defines the outer layout which wraps the widget.	widget
putInto contentFor	Used with outer layouts. Specifies the name of the content placeholder which should render the widget.	string
vdomKey	Key that will be used as the key when rendering the React component.	string
visible if	Visibility of the widget. Defaults to `true`.	boolean

Documentation

ColorMap