Skip to main content

Navigation Map

Navigation map is a component which allows to see the entire chart data series and navigate through it.

It consists of a slider, which shows a certain amount of data, knots, which are used to change slider's length and arrow buttons for precise navigation.

Configuration​

Visibility of the navigation map could be configured via initial dependencies config:

initialChartConfig: {
	components: {
		navigationMap: {
			visible: true,
		},
	},
},

Example​

export const NavigationMapExample = () => {
    return (
        <div style={{ height: '500px' }}>
            <ChartReactApp
                dependencies={{
                    ...CREATE_MOCK_PROVIDERS(),
                    initialChartConfig: {
                        components: {
                            navigationMap: {
                                visible: true,
                                timeLabels: {
                                    visible: true,
                                    dateFormat: 'dd.MM.YYYY HH:mm',
                                    fontSize: 12,
                                    padding: {
                                        x: 10,
                                        y: 0,
                                    },
                                },
                            },
                        },
                    },
                }}
            />
        </div>
    );
}

Further Reading​