es6-react-admin-lte

# Chart Components > ./src/js/components/charts/ ## Purpose A ton of awesome charts for displaying visually appealing data. ## Important Items - line-chart.jsx - bar-chart.jsx - pie-chart.jsx - doughnut-chart.jsx - radar-chart.jsx - map-chart.jsx --- --- ### LineChart - _line-chart.jsx_ ### Purpose Displays a chart in a simple line chart format of data. More documentation about these kinds of charts can be found at the (Chart.JS website)[http://www.chartjs.org/docs/] ### Props __id__ * Required - _false_ * Data Type - _STRING_ * Functionality - _The id of the component's canvas element_ * Default - _'line-chart-0'_ __width__ * Required - _false_ * Data Type - _STRING_ * Functionality - _The width of the component's canvas element_ * Default - _'300'_ __height__ * Required - _false_ * Data Type - _STRING_ * Functionality - _The height of the component's canvas element_ * Default - _'200'_ __datasets__ * Required - _false_ * Data Type - _ARRAY_ * Functionality - _You can send in an object with the properties you would expect from the (Chart.JS documentation)[http://www.chartjs.org/docs/] for this component instead of the props listed below_ __axisLabels__ * Required - _false_ * Data Type - _ARRAY_ * Functionality - _An array of labels for the linear sections on the chart_ __datasetLabel__ * Required - _false_ * Data Type - _STRING_ * Functionality - _The label for this main dataset. Like saying "This graph section is about X data"_ __data__ * Required - _false_ * Data Type - _ARRAY_ * Functionality - _An array of data points to display on the chart, usually made of numbers._ __backgroundColor__ * Required - _false_ * Data Type - _STRING_ * Functionality - _The fill colors of the chart._ __borderColor__ * Required - _false_ * Data Type - _STRING_ * Functionality - _The border colors of the chart._ __borderWidth__ * Required - _false_ * Data Type - _NUMBER_ * Functionality - _The widths of the chart's borders, set in pixels._ __pointBackgroundColor__ * Required - _false_ * Data Type - _ARRAY || STRING_ * Functionality - _A color string or array of color strings to color the background of points marked on the chart_ __pointBorderColor__ * Required - _false_ * Data Type - _ARRAY || STRING_ * Functionality - _A color string or array of color strings to color the border of points marked on the chart_ __pointBorderWidth__ * Required - _false_ * Data Type - _ARRAY || NUMBER_ * Functionality - _A number or array of numbers to set the width the borders on points marked on the chart_ __pointRadius__ * Required - _false_ * Data Type - _ARRAY || NUMBER_ * Functionality - _The radius number or array of them that marks each point's radius_ __pointHoverRadius__ * Required - _false_ * Data Type - _ARRAY || NUMBER_ * Functionality - _The radius number or array of them that marks each point's radius while hovered_ __pointHoverBackgroundColor__ * Required - _false_ * Data Type - _ARRAY || STRING_ * Functionality - _The color string or array of them that marks each point's fill color while hovered_ __pointHoverBorderColor__ * Required - _false_ * Data Type - _ARRAY || STRING_ * Functionality - _The color string or array of them that marks each point's border color while hovered_ __pointHoverBorderWidth__ * Required - _false_ * Data Type - _ARRAY || NUMBER_ * Functionality - _The number or array of them that marks each point's border width, in pixels, while hovered_ __pointStyle__ * Required - _false_ * Data Type - _ARRAY || STRING_ * Functionality - _"The style of point. Options include 'circle', 'triangle', 'rect', 'rectRounded', 'rectRot', 'cross', 'crossRot', 'star', 'line', and 'dash'"_ __fill__ * Required - _false_ * Data Type - _BOOL_ * Functionality - _Fills the charted area with color instead of leaving it transparent. If left transparent, the chart only shows color on the outlined parts_ * Default - _false_ __lineTension__ * Required - _false_ * Data Type - _NUMBER_ * Functionality - _How smooth / curvey the chart lines are. 0 is the straightest line_ * Default - _0_ __borderCapStyle__ * Required - _false_ * Data Type - _STRING_ * Functionality - _Line cap style, much like is the usual when using a Canvas element_ __showLine__ * Required - _false_ * Data Type - _BOOLEAN_ * Functionality - _Display a line between each point of data_ __xAxisId__ * Required - _false_ * Data Type - _STRING_ * Functionality - _The label for the X axis._ __yAxisId__ * Required - _false_ * Data Type - _STRING_ * Functionality - _The label for the Y axis._ __options__ * Required - _false_ * Data Type - _OBJECT_ * Functionality - _See the (Chart.JS documentation)[http://www.chartjs.org/docs/] to get a better understanding of what options are and what they can do for your chart._ ### Example ```javascript/jsx import LineChart from './src/js/components/charts/line-chart.jsx'; <LineChart id="line-chart-test" width="300px" height="200px" datasetLabel="Test Line Chart" xAxisID="X Id" yAxisID="Y Id" axislabels={["I1", "I2", "I3", "I4", "I5"]} data={[12, 9, 33, 6, 14]} backgroundColor="#ff0000" hoverBackgroundColor="#dd0000" /> ``` --- ### BarChart - _bar-chart.jsx_ ### Purpose Displays a chart in a simple bar graph format of data. More documentation about these kinds of charts can be found at the (Chart.JS website)[http://www.chartjs.org/docs/] ### Props __id__ * Required - _false_ * Data Type - _STRING_ * Functionality - _The id of the component's canvas element_ * Default - _'bar-chart-0'_ __width__ * Required - _false_ * Data Type - _STRING_ * Functionality - _The width of the component's canvas element_ * Default - _'300'_ __height__ * Required - _false_ * Data Type - _STRING_ * Functionality - _The height of the component's canvas element_ * Default - _'200'_ __datasets__ * Required - _false_ * Data Type - _ARRAY_ * Functionality - _You can send in an object with the properties you would expect from the (Chart.JS documentation)[http://www.chartjs.org/docs/] for this component instead of the props listed below_ __labels__ * Required - _false_ * Data Type - _ARRAY_ * Functionality - _An array of labels for the linear sections on the chart_ __datasetLabel__ * Required - _false_ * Data Type - _STRING_ * Functionality - _The label for this main dataset. Like saying "This graph section is about X data"_ __data__ * Required - _false_ * Data Type - _ARRAY_ * Functionality - _An array of data points to display on the chart, usually made of numbers._ __backgroundColor__ * Required - _false_ * Data Type - _ARRAY || STRING_ * Functionality - _The fill colors of the chart._ __borderColor__ * Required - _false_ * Data Type - _ARRAY || STRING_ * Functionality - _The border colors of the chart._ __borderWidth__ * Required - _false_ * Data Type - _ARRAY || NUMBER_ * Functionality - _The widths of the chart's borders, set in pixels._ __xAxisId__ * Required - _false_ * Data Type - _STRING_ * Functionality - _The label for the X axis._ __yAxisId__ * Required - _false_ * Data Type - _STRING_ * Functionality - _The label for the Y axis._ __borderSkipped__ * Required - _false_ * Data Type - _ARRAY || STRING_ * Functionality - _Skipped borders for the data bars._ * Expected Data - _'bottom', 'left', 'top', 'right'_ __hoverBackgroundColor__ * Required - _false_ * Data Type - _ARRAY || STRING_ * Functionality - _The array of color strings that marks each section's fill color while hovered_ __hoverBorderColor__ * Required - _false_ * Data Type - _ARRAY || STRING_ * Functionality - _The array of color strings that marks each section's border color while hovered_ __hoverBorderWidth__ * Required - _false_ * Data Type - _ARRAY || STRING_ * Functionality - _The array of numbers that marks each section's border width, in pixels, while hovered_ __options__ * Required - _false_ * Data Type - _OBJECT_ * Functionality - _See the (Chart.JS documentation)[http://www.chartjs.org/docs/] to get a better understanding of what options are and what they can do for your chart._ * Default - ```javascript { scales: { yAxes: [{ ticks: { beginAtZero: true } }] } } ``` ### Example ```javascript/jsx import BarChart from './src/js/components/charts/bar-chart.jsx'; <BarChart id="bar-chart-test" width="300px" height="200px" datasetLabel="Test Bar Chart" xAxisID="X Id" yAxisID="Y Id" labels={["I1", "I2", "I3", "I4", "I5"]} data={[12, 9, 33, 6, 14]} backgroundColor="#ff0000" hoverBackgroundColor="#dd0000" /> ``` --- ### PieChart - _pie-chart.jsx_ ### Purpose Displays a chart in a simple pie chart format of data. More documentation about these kinds of charts can be found at the (Chart.JS website)[http://www.chartjs.org/docs/] ### Props __id__ * Required - _false_ * Data Type - _STRING_ * Functionality - _The id of the component's canvas element_ * Default - _'pie-chart-0'_ __width__ * Required - _false_ * Data Type - _STRING_ * Functionality - _The width of the component's canvas element_ * Default - _'300'_ __height__ * Required - _false_ * Data Type - _STRING_ * Functionality - _The height of the component's canvas element_ * Default - _'300'_ __datasets__ * Required - _false_ * Data Type - _ARRAY_ * Functionality - _You can send in an object with the properties you would expect from the (Chart.JS documentation)[http://www.chartjs.org/docs/] for this component instead of the props listed below_ __axisLabels__ * Required - _false_ * Data Type - _ARRAY_ * Functionality - _An array of labels for the radial sections on the chart_ __datasetLabel__ * Required - _false_ * Data Type - _STRING_ * Functionality - _The label for this main dataset. Like saying "This graph section is about X data"_ __data__ * Required - _false_ * Data Type - _ARRAY_ * Functionality - _An array of data points to display on the chart, usually made of numbers._ __backgroundColor__ * Required - _false_ * Data Type - _ARRAY_ * Functionality - _The fill colors of the chart._ __borderColor__ * Required - _false_ * Data Type - _ARRAY_ * Functionality - _The border colors of the chart._ __borderWidth__ * Required - _false_ * Data Type - _ARRAY_ * Functionality - _The widths of the chart's borders, set in pixels._ __hoverBackgroundColor__ * Required - _false_ * Data Type - _ARRAY_ * Functionality - _The array of color strings that marks each section's fill color while hovered_ __hoverBorderColor__ * Required - _false_ * Data Type - _ARRAY_ * Functionality - _The array of color strings that marks each section's border color while hovered_ __hoverBorderWidth__ * Required - _false_ * Data Type - _ARRAY_ * Functionality - _The array of numbers that marks each section's border width, in pixels, while hovered_ __options__ * Required - _false_ * Data Type - _OBJECT_ * Functionality - _See the (Chart.JS documentation)[http://www.chartjs.org/docs/] to get a better understanding of what options are and what they can do for your chart._ ### Example ```javascript/jsx import PieChart from './src/js/components/charts/pie-chart.jsx'; <PieChart id="pie-chart-test" width="200px" height="200px" datasetLabel="Test Pie Chart" axisLabels={["I1", "I2", "I3", "I4", "I5"]} data={[12, 9, 33, 6, 14]} backgroundColor={["#ff0000", "#f0f000", "#f00f00", "#f000f0", "#f0000f"]} hoverBackgroundColor={["#dd0000", "#d0d000", "#d00d00", "#d000d0", "#d0000d"]} /> ``` --- ### DoughnutChart - _doughnut-chart.jsx_ ### Purpose Displays a chart in a simple pie-like chart format of data. The difference between this and a pie chart is that the center is hollowed out, much like a doughnut. _Alternatively we could have called the PieChart component a DoughnutHoleChart, but that would just be silly._ More documentation about these kinds of charts can be found at the (Chart.JS website)[http://www.chartjs.org/docs/] ### Props __id__ * Required - _false_ * Data Type - _STRING_ * Functionality - _The id of the component's canvas element_ * Default - _'doughnut-chart-0'_ __width__ * Required - _false_ * Data Type - _STRING_ * Functionality - _The width of the component's canvas element_ * Default - _'300'_ __height__ * Required - _false_ * Data Type - _STRING_ * Functionality - _The height of the component's canvas element_ * Default - _'300'_ __datasets__ * Required - _false_ * Data Type - _ARRAY_ * Functionality - _You can send in an object with the properties you would expect from the (Chart.JS documentation)[http://www.chartjs.org/docs/] for this component instead of the props listed below_ __axisLabels__ * Required - _false_ * Data Type - _ARRAY_ * Functionality - _An array of labels for the radial sections on the chart_ __datasetLabel__ * Required - _false_ * Data Type - _STRING_ * Functionality - _The label for this main dataset. Like saying "This graph section is about X data"_ __data__ * Required - _false_ * Data Type - _ARRAY_ * Functionality - _An array of data points to display on the chart, usually made of numbers._ __backgroundColor__ * Required - _false_ * Data Type - _ARRAY_ * Functionality - _The fill colors of the chart._ __borderColor__ * Required - _false_ * Data Type - _ARRAY_ * Functionality - _The border colors of the chart._ __borderWidth__ * Required - _false_ * Data Type - _ARRAY_ * Functionality - _The widths of the chart's borders, set in pixels._ __hoverBackgroundColor__ * Required - _false_ * Data Type - _ARRAY_ * Functionality - _The array of color strings that marks each section's fill color while hovered_ __hoverBorderColor__ * Required - _false_ * Data Type - _ARRAY_ * Functionality - _The array of color strings that marks each section's border color while hovered_ __hoverBorderWidth__ * Required - _false_ * Data Type - _ARRAY_ * Functionality - _The array of numbers that marks each section's border width, in pixels, while hovered_ __options__ * Required - _false_ * Data Type - _OBJECT_ * Functionality - _See the (Chart.JS documentation)[http://www.chartjs.org/docs/] to get a better understanding of what options are and what they can do for your chart._ ### Example ```javascript/jsx import DoughnutChart from './src/js/components/charts/doughnut-chart.jsx'; <DoughnutChart id="doughnut-chart-test" width="200px" height="200px" datasetLabel="Test Doughnut Chart" axisLabels={["I1", "I2", "I3", "I4", "I5"]} data={[12, 9, 33, 6, 14]} backgroundColor={["#ff0000", "#f0f000", "#f00f00", "#f000f0", "#f0000f"]} hoverBackgroundColor={["#dd0000", "#d0d000", "#d00d00", "#d000d0", "#d0000d"]} /> ``` --- ### RadarChart - _radar-chart.jsx_ ### Purpose Displays a chart in a radar-like format. Give it a try, as that it is the best I can explain it. More documentation about these kinds of charts can be found at the (Chart.JS website)[http://www.chartjs.org/docs/] ### Props __id__ * Required - _false_ * Data Type - _STRING_ * Functionality - _The id of the component's canvas element_ * Default - _'radar-chart-0'_ __width__ * Required - _false_ * Data Type - _STRING_ * Functionality - _The width of the component's canvas element_ * Default - _'300'_ __height__ * Required - _false_ * Data Type - _STRING_ * Functionality - _The height of the component's canvas element_ * Default - _'300'_ __datasets__ * Required - _false_ * Data Type - _ARRAY_ * Functionality - _You can send in an object with the properties you would expect from the (Chart.JS documentation)[http://www.chartjs.org/docs/] for this component instead of the props listed below_ __axisLabels__ * Required - _false_ * Data Type - _ARRAY_ * Functionality - _An array of labels for the radial sections on the chart_ __fill__ * Required - _false_ * Data Type - _BOOL_ * Functionality - _Fills the charted area with color instead of leaving it transparent. If left transparent, the chart only shows color on the outlined parts_ * Default - _false_ __lineTension__ * Required - _false_ * Data Type - _NUMBER_ * Functionality - _How smooth / curvey the chart lines are. 0 is the straightest line_ __borderCapStyle__ * Required - _false_ * Data Type - _STRING_ * Functionality - _Line cap style, much like is the usual when using a Canvas element_ __datasetLabel__ * Required - _false_ * Data Type - _STRING_ * Functionality - _The label for this main dataset. Like saying "This graph section is about X data"_ __data__ * Required - _false_ * Data Type - _ARRAY_ * Functionality - _An array of data points to display on the chart, usually made of numbers._ __backgroundColor__ * Required - _false_ * Data Type - _STRING_ * Functionality - _The fill color of the chart._ __borderColor__ * Required - _false_ * Data Type - _STRING_ * Functionality - _The border color of the chart._ __borderWidth__ * Required - _false_ * Data Type - _NUMBER_ * Functionality - _The width of the chart's borders, set in pixels._ __pointBackgroundColor__ * Required - _false_ * Data Type - _ARRAY || STRING_ * Functionality - _A color string or array of color strings to color the background of points marked on the chart_ __pointBorderColor__ * Required - _false_ * Data Type - _ARRAY || STRING_ * Functionality - _A color string or array of color strings to color the border of points marked on the chart_ __pointBorderWidth__ * Required - _false_ * Data Type - _ARRAY || NUMBER_ * Functionality - _A number or array of numbers to set the width the borders on points marked on the chart_ __pointRadius__ * Required - _false_ * Data Type - _ARRAY || NUMBER_ * Functionality - _The radius number or array of them that marks each point's radius_ __pointHoverRadius__ * Required - _false_ * Data Type - _ARRAY || NUMBER_ * Functionality - _The radius number or array of them that marks each point's radius while hovered_ __pointHoverBackgroundColor__ * Required - _false_ * Data Type - _ARRAY || STRING_ * Functionality - _The color string or array of them that marks each point's fill color while hovered_ __pointHoverBorderColor__ * Required - _false_ * Data Type - _ARRAY || STRING_ * Functionality - _The color string or array of them that marks each point's border color while hovered_ __pointHoverBorderWidth__ * Required - _false_ * Data Type - _ARRAY || NUMBER_ * Functionality - _The number or array of them that marks each point's border width, in pixels, while hovered_ __pointStyle__ * Required - _false_ * Data Type - _ARRAY || STRING_ * Functionality - _"The style of point. Options include 'circle', 'triangle', 'rect', 'rectRounded', 'rectRot', 'cross', 'crossRot', 'star', 'line', and 'dash'"_ __options__ * Required - _false_ * Data Type - _OBJECT_ * Functionality - _See the (Chart.JS documentation)[http://www.chartjs.org/docs/] to get a better understanding of what options are and what they can do for your chart._ ### Example ```javascript/jsx import RadarChart from './src/js/components/charts/radar-chart.jsx'; <RadarChart id="my-little-radar" width="400" height="450" datasetLabel="The Chartest AFRadar" axisLabels={["I1", "I2", "I3", "I4", "I5"]} data={[12, 9, 33, 6, 14]} pointBackgroundColor={["#ff0000", "#f0f000", "#f00f00", "#f000f0", "#f0000f"]} pointHoverBackgroundColor={["#dd0000", "#d0d000", "#d00d00", "#d000d0", "#d0000d"]} /> ``` --- ### MapChart - _map-chart.jsx_ ### Purpose Displays a chart in a map format. Much of the prop documentation can be found on [jVectorMap's documentation](http://jvectormap.com/documentation/javascript-api/jvm-map/). ### Props __id__ * Required - _false_ * Data Type - _STRING_ * Functionality - _The id of the component's main element_ * Default - _'world-map-0'_ __width__ * Required - _false_ * Data Type - _STRING_ * Functionality - _The width of the component's main element_ * Default - _'100%'_ __height__ * Required - _false_ * Data Type - _STRING_ * Functionality - _The height of the component's main element_ * Default - _'300px'_ __mapParams__ * Required - _false_ * Data Type - _OBJECT_ * Functionality - _An object containing keys equal to all of the props below if you didn't want to input them via React Props._ __map__ * Required - _false_ * Data Type - _STRING_ * Functionality - _The type of map to be used for the component_ * Default - _'world_mill_en'_ __backgroundColor__ * Required - _false_ * Data Type - _STRING_ * Functionality - _The color of the map's background. Covers hex, rgb, rgba._ * Default - _'#555555'_ __zoomOnScroll__ * Required - _false_ * Data Type - _BOOLEAN_ * Functionality - _Whether you want to zoom via mouse scrolls._ * Default - _true_ __zoomOnScrollSpeed__ * Required - _false_ * Data Type - _NUMBER_ * Functionality - _From 1 - 10, mouse speed on zoom scrolling._ * Default - _3_ __panOnDrag__ * Required - _false_ * Data Type - _BOOLEAN_ * Functionality - _Whether you want to pan by dragging the map._ * Default - _true_ __zoomMax__ * Required - _false_ * Data Type - _NUMBER_ * Functionality - _The maximum zoom ratio reachable while zooming the map_ * Default - _8_ __zoomMin__ * Required - _false_ * Data Type - _NUMBER_ * Functionality - _The minimum zoom ratio reachable while zoominb the map_ * Default - _1_ __zoomStep__ * Required - _false_ * Data Type - _NUMBER_ * Functionality - _The multiplier for zooming when clicking the +/- buttons_ * Default - _1.6_ __zoomAnimate__ * Required - _false_ * Data Type - _BOOLEAN_ * Functionality - _Whether to animate zoomingness when clicking +/- buttons._ * Default - _false_ __regionsSelectable__ * Required - _false_ * Data Type - _BOOLEAN_ * Functionality - _Ability to select regions on the map_ * Default - _false_ __regionsSelectableOne__ * Required - _false_ * Data Type - _BOOLEAN_ * Functionality - _Can only one region on the map be selected at a time?_ * Default - _false_ __markersSelectable__ * Required - _false_ * Data Type - _BOOLEAN_ * Functionality - _The ability to select markers on the map_ * Default - _false_ __markersSelectableOne__ * Required - _false_ * Data Type - _BOOLEAN_ * Functionality - _Can only one marker be selected at a time?_ * Default - _false_ __regionStyle__ * Required - _false_ * Data Type - _OBJECT_ * Functionality - _Styling for map regions via css-like javascript object._ * Default - ```javascript { initial: { fill: '#bbbbbb', "fill-opacity": 1, stroke: 'none', "stroke-width": 0, "stroke-opacity": 1 }, hover: { "fill-opacity": 0.8, cursor: 'pointer' }, selected: { fill: 'yellow' } } ``` __regionLabelStyle__ * Required - _false_ * Data Type - _OBJECT_ * Functionality - _Styling for region labels via css-like object._ * Default - ```javascript { initial: { 'font-family': 'Verdana', 'font-size': '12', 'font-weight': 'bold', cursor: 'default', fill: 'black' }, hover: { cursor: 'pointer' } } ``` __markerStyle__ * Required - _false_ * Data Type - _OBJECT_ * Functionality - _Styling for markers via css-like object_ * Default - ```javascript { initial: { fill: 'grey', stroke: '#505050', "fill-opacity": 1, "stroke-width": 1, "stroke-opacity": 1, r: 5 }, hover: { stroke: 'black', "stroke-width": 2, cursor: 'pointer' }, selected: { fill: 'blue' }, selectedHover: { } } ``` __markerLabelStyle__ * Required - _false_ * Data Type - _OBJECT_ * Functionality - _Styling for marker labels via css-like object_ * Default - ```javascript { initial: { 'font-family': 'Verdana', 'font-size': '12', 'font-weight': 'bold', cursor: 'default', fill: 'black' }, hover: { cursor: 'pointer' } } ``` __markers__ * Required - _Set of markers to add to the map during initialization_ * Data Type - _ARRAY || OBJECT_ * Functionality - _Desc_ * Expected Data - ```json [{ name: 'string to show on marker tip', latLng: [25, 42] }] ``` __series__ * Required - _false_ * Data Type - _OBJECT_ * Functionality - _See (official documentation)[http://jvectormap.com/documentation/javascript-api/jvm-map/] for a better understanding_ __focusOn__ * Required - _false_ * Data Type - _OBJECT || STRING_ * Functionality - _See (official documentation)[http://jvectormap.com/documentation/javascript-api/jvm-map/] for a better understanding_ __labels__ * Required - _false_ * Data Type - _OBJECT_ * Functionality - _See (official documentation)[http://jvectormap.com/documentation/javascript-api/jvm-map/] for a better understanding_ __selectedRegions__ * Required - _false_ * Data Type - _OBJECT || ARRAY || STRING_ * Functionality - _See (official documentation)[http://jvectormap.com/documentation/javascript-api/jvm-map/] for a better understanding_ __selectedMarkers__ * Required - _false_ * Data Type - _OBJECT || ARRAY || STRING_ * Functionality - _See (official documentation)[http://jvectormap.com/documentation/javascript-api/jvm-map/] for a better understanding_ __onRegionTipShow__ * Required - _false_ * Data Type - _FUNCTION_ * Functionality - _See (official documentation)[http://jvectormap.com/documentation/javascript-api/jvm-map/] for a better understanding_ __onRegionOver__ * Required - _false_ * Data Type - _FUNCTION_ * Functionality - _See (official documentation)[http://jvectormap.com/documentation/javascript-api/jvm-map/] for a better understanding_ __onRegionOut__ * Required - _false_ * Data Type - _FUNCTION_ * Functionality - _See (official documentation)[http://jvectormap.com/documentation/javascript-api/jvm-map/] for a better understanding_ __onRegionClick__ * Required - _false_ * Data Type - _FUNCTION_ * Functionality - _See (official documentation)[http://jvectormap.com/documentation/javascript-api/jvm-map/] for a better understanding_ __onRegionSelected__ * Required - _false_ * Data Type - _FUNCTION_ * Functionality - _See (official documentation)[http://jvectormap.com/documentation/javascript-api/jvm-map/] for a better understanding_ __onMarkerTipShow__ * Required - _false_ * Data Type - _FUNCTION_ * Functionality - _See (official documentation)[http://jvectormap.com/documentation/javascript-api/jvm-map/] for a better understanding_ __onMarkerOver__ * Required - _false_ * Data Type - _FUNCTION_ * Functionality - _See (official documentation)[http://jvectormap.com/documentation/javascript-api/jvm-map/] for a better understanding_ __onMarkerOut__ * Required - _false_ * Data Type - _FUNCTION_ * Functionality - _See (official documentation)[http://jvectormap.com/documentation/javascript-api/jvm-map/] for a better understanding_ __onMarkerClick__ * Required - _false_ * Data Type - _FUNCTION_ * Functionality - _See (official documentation)[http://jvectormap.com/documentation/javascript-api/jvm-map/] for a better understanding_ __onMarkerSelected__ * Required - _false_ * Data Type - _FUNCTION_ * Functionality - _See (official documentation)[http://jvectormap.com/documentation/javascript-api/jvm-map/] for a better understanding_ __onViewportChange__ * Required - _false_ * Data Type - _FUNCTION_ * Functionality - _See (official documentation)[http://jvectormap.com/documentation/javascript-api/jvm-map/] for a better understanding_ ### Example ```javascript/jsx import MapChart from './src/js/components/charts/map-chart.jsx'; <MapChart id="test-map" map="world_mill_en" /> ```