Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
70
Displaying X and Y axis on IgrGeographicMap
posted

Hello,

I am using the IgrGeographicMap component to display Earth maps with data projection on them.

I am for the most part getting my inspiration from already existing templates : https://www.infragistics.com/products/ignite-ui-react/react/components/geo-map-type-scatter-area-series

However these templates don't have a X and a Y axis.

Any solution on how to display them? I have noticed "xAxis" and "yAxis" props in the official documentation of IgrGeographicMap.

These props require IgrNumericXAxis and IgrNumericYAxis types, but I get the following error when I assign my IgrNumericXAxis component to my xAxis prop :

Type '() => Element' is missing the following properties from type 'IgrNumericXAxis': createImplementation, i, scrollRangeIntoView, scaleMode, and 139 more.ts(2740)
igr-geographic-map.d.ts(306, 5): The expected type comes from property 'xAxis' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<IgrGeographicMap> & Readonly<IIgrGeographicMapProps> & Readonly<...>'
(JSX attribute) xAxis?: IgrNumericXAxis

The X-axis for this IgxGeographicMap.Component Under normal circumstances, this property should not be set in application code. By default, it will be set to a numeric axis with a spherical mercator scaler.

It would feel weird to add the 139 missing props, I feel like I'm assigning the component in a bad way. The code in question (thanks in advance for helping) :

 
<IgrGeographicMap
   ref={this.onMapRef}
   width={mapWidth+"px"}
   height={mapHeight+"px"}
   xAxis={() => <IgrNumericXAxis
name="xAxis1" labelLocation="OutsideBottom"
title={this.state.xtitle} minimumValue={this.state.minValueX}
maximumValue={this.state.maxValueX}
/>}
   zoomable="true"
/>
Parents Reply Children
No Data