{"id":30580689,"url":"https://github.com/akvo/akvo-charts","last_synced_at":"2025-08-29T05:41:21.880Z","repository":{"id":249625457,"uuid":"832031386","full_name":"akvo/akvo-charts","owner":"akvo","description":"React Wrapper for Apache Echarts","archived":false,"fork":false,"pushed_at":"2025-01-30T06:44:10.000Z","size":4844,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-08-17T20:25:49.533Z","etag":null,"topics":["echarts-for-react","js","leafletjs","wrapper-library"],"latest_commit_sha":null,"homepage":"https://akvo.github.io/akvo-charts/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/akvo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-22T08:07:41.000Z","updated_at":"2025-03-01T16:00:55.000Z","dependencies_parsed_at":"2024-08-05T01:30:52.096Z","dependency_job_id":"f3909a22-f958-46c4-b6d6-4fb8274baeab","html_url":"https://github.com/akvo/akvo-charts","commit_stats":null,"previous_names":["akvo/akvo-charts"],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/akvo/akvo-charts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akvo%2Fakvo-charts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akvo%2Fakvo-charts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akvo%2Fakvo-charts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akvo%2Fakvo-charts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/akvo","download_url":"https://codeload.github.com/akvo/akvo-charts/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akvo%2Fakvo-charts/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272636824,"owners_count":24967985,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-29T02:00:10.610Z","response_time":87,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["echarts-for-react","js","leafletjs","wrapper-library"],"created_at":"2025-08-29T05:41:16.385Z","updated_at":"2025-08-29T05:41:21.863Z","avatar_url":"https://github.com/akvo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Akvo Charts\n\nThe `akvo-charts` library allows you to create a variety of charts by leveraging [Apache ECharts](https://echarts.apache.org/en/index.html) configurations. In this documentation, we'll demonstrate how to use all the components from akvo-charts with custom configurations, using both the default config and the rawConfig prop, which directly maps to the ECharts options.\n\n**Note:** In addition to chart components, `akvo-charts` also includes a `MapView` component that leverages [Leaflet](https://leafletjs.com/) for creating interactive maps. This provides a powerful combination of charting and mapping capabilities within a single library.\n\n[![NPM](https://img.shields.io/npm/v/akvo-charts.svg)](https://www.npmjs.com/package/akvo-charts) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n---\n\n# Table of Contents\n\n- [Akvo Charts](#akvo-charts)\n- [Table of Contents](#table-of-contents)\n  - [Installation](#installation)\n  - [API](#api)\n    - [Raw config](#raw-config)\n    - [Config](#config)\n      - [Legend](#legend)\n      - [Text Style](#text-style)\n      - [Item Style](#item-style)\n      - [Example Config](#example-config)\n    - [Data](#data)\n      - [2D Array](#2d-array)\n      - [Row-Based Key-Value Format](#row-based-key-value-format)\n      - [Column-Based Key-Value Format](#column-based-key-value-format)\n  - [Usage](#usage)\n    - [Bar Chart](#bar-chart)\n      - [Props](#props)\n      - [Example usage of Bar chart](#example-usage-of-bar-chart)\n      - [Example usage of `rawConfig` for a Bar chart](#example-usage-of-rawconfig-for-a-bar-chart)\n    - [Line Chart](#line-chart)\n      - [Props](#props-1)\n      - [Example usage of Line chart](#example-usage-of-line-chart)\n      - [Example usage of `rawConfig` for a Line chart](#example-usage-of-rawconfig-for-a-line-chart)\n    - [Pie Chart](#pie-chart)\n      - [Props](#props-2)\n      - [Example usage of Pie chart](#example-usage-of-pie-chart)\n      - [Example usage of `rawConfig` for a Pie chart](#example-usage-of-rawconfig-for-a-pie-chart)\n    - [Doughnut Chart](#doughnut-chart)\n      - [Props](#props-3)\n      - [Example usage of Doughnut chart](#example-usage-of-doughnut-chart)\n      - [Example usage of `rawConfig` for a Doughnut chart](#example-usage-of-rawconfig-for-a-doughnut-chart)\n    - [Stack Bar Chart](#stack-bar-chart)\n      - [Props](#props-4)\n      - [Example of stackMapping props](#example-of-stackmapping-props)\n      - [Example usage of StackBar chart](#example-usage-of-stackbar-chart)\n      - [Example usage of `rawConfig` for a StackBar chart](#example-usage-of-rawconfig-for-a-stackbar-chart)\n    - [Stack Cluster Column](#stack-cluster-column)\n      - [Props](#props-5)\n      - [Example usage of StackClusterColumn chart](#example-usage-of-stackclustercolumn-chart)\n      - [Example usage of `rawConfig` for a StackClusterColumn chart](#example-usage-of-rawconfig-for-a-stackclustercolumn-chart)\n    - [Scatter Plot Chart](#scatter-plot-chart)\n      - [Props](#props-6)\n      - [Example usage of ScatterPlot chart](#example-usage-of-scatterplot-chart)\n      - [Example usage of `rawConfig` for a ScatterPlot chart](#example-usage-of-rawconfig-for-a-scatterplot-chart)\n    - [Stack Line Chart](#stack-line-chart)\n      - [Props](#props-7)\n      - [Example usage of StackLine chart](#example-usage-of-stackline-chart)\n      - [Example usage of `rawConfig` for a StackLine chart](#example-usage-of-rawconfig-for-a-stackline-chart)\n    - [MapView](#mapview)\n      - [config](#config-1)\n      - [layer](#layer)\n        - [tooltip (object)](#tooltip-object)\n      - [data](#data-1)\n      - [config](#config-2)\n      - [Example usage of MapView](#example-usage-of-mapview)\n      - [Example Usage with Choropleth Mapping](#example-usage-with-choropleth-mapping)\n    - [MapCluster](#mapcluster)\n      - [Props](#props-8)\n        - [`markerIcon`](#markericon)\n        - [`clusterIcon`](#clustericon)\n        - [Additional Properties](#additional-properties)\n      - [Example Usage](#example-usage)\n      - [MapCluster Notes](#mapcluster-notes)\n    - [Fully Customized Map](#fully-customized-map)\n    - [Components](#components)\n      - [Container](#container)\n      - [GeoJson](#geojson)\n      - [LegendControl](#legendcontrol)\n      - [Marker](#marker)\n      - [MarkerClusterGroup](#markerclustergroup)\n      - [TileLayer](#tilelayer)\n      - [Utils](#utils)\n      - [Example Usage](#example-usage-1)\n      - [Map components Notes](#map-components-notes)\n---\n\n## Installation\nTo get started, install the package via npm:\n\n```bash\nnpm install --save akvo-charts\n```\nor yarn:\n```bash\nyarn add akvo-charts\n```\n---\n\n## API\n\n### Raw config\n\nAn object containing the chart configuration options that adhere to Apache ECharts' specifications. This allows you to customize various aspects of the chart, including axes, series, grid, and more. The structure of this object should follow the [ECharts option documentation](https://echarts.apache.org/en/option.html).\n\n\n| Prop\t| Type |\tDescription |\n|-------|------|--------------|\n| rawConfig | object | An object containing the chart configuration options that adhere to Apache ECharts' specifications. **When `rawConfig` is provided, it will override the default `data` and `config` props.** This allows you to customize various aspects of the chart, including axes, series, grid, and more. The structure of this object should follow the [ECharts option documentation](https://echarts.apache.org/en/option.html). |\n\n### Config\n\n| Prop\t| Description |\tType | Default |\n|-------|-------------|------|---------|\n| `title`\t| A string representing the title of the chart. | string | - |\n| `subtitle`\t| A string representing the subtitle of the chart. | string | - |\n| `xAxisLabel`\t|\tA string that specifies the label text for the X axis of the chart. This helps to describe the data represented along the X axis. This prop is applicable **only for Bar and Line charts**. | string | - |\n| `yAxisLabel`\t|\tA string that specifies the label text for the Y axis of the chart. This helps to describe the data represented along the Y axis. This prop is applicable **only for Bar and Line charts**. | string | - |\n| `horizontal` _(optional)_ | If true, the chart will be rendered with horizontal bars. This option is **only applicable for Bar and Line chart** types. | boolean | `false` |\n| `legend`\t| An object that specifies the legend style for the chart. For detailed configuration options, refer to the [Legend Section](#legend). | object | None |\n| `textStyle` | An object that specifies the general text style options for the entire chart. This textStyle configuration will override all individual text styles within the chart. For detailed configuration options, refer to the [Text Style Section](#text-style). | object | None |\n| `itemStyle` | An object that defines the general styling options for items within the entire series in the chart. For more detailed configuration options, refer to the [Item Style Section](#item-style). | object | None |\n| `color`\t| An array that specifies the color list of palette. If no color is set in series, the colors would be adopted sequentially and circularly from this list as the colors of series. | array | `['#4475B4', '#73ADD1', '#AAD9E8', '#FEE08F', '#FDAE60', '#F36C42', '#D73027']` |\n\n#### Legend\n\n| Prop\t| Description |\tType | Default |\n|-------|-------------|------|---------|\n| `show`\t| Option to show/hide the legend. |\tboolean | `true` |\n| `icon`\t| Icon of the legend items. Options are: `'circle'`, `'rect'`, `'roundRect'`, `'triangle'`, `'diamond'`, `'pin'`, `'arrow'`, `'none'`. |\tstring | `circle` |\n| `top`\t| Distance between legend component and the top side of the container. `top` can be a pixel value like `20`, it can also be a percentage value relative to container width like `'20%'`, and it can also be `'top'`, `'middle'`, or `'bottom'`. If the top value is set to be `'top'`, `'middle'`, or `'bottom'`, then the component will be aligned automatically based on position. |\tstring \\| number | `35` |\n| `left`\t| Distance between legend component and the left side of the container. `left` can be a pixel value like `20`, it can also be a percentage value relative to container width like `'20%'`, and it can also be `'left'`, `'center'`, or `'right'`. If the left value is set to be `'left'`, `'center'`, or `'right'`, then the component will be aligned automatically based on position. |\tstring \\| number | `'center'` |\n| `align`\t| Legend marker and text aligning. Options are: `'auto'`, `'left'`, `'right'`. |\tstring | `'left'` |\n| `orient`\t| The layout orientation of legend. Options are: `'horizontal'`, `'vertical'`. |\tstring | `'horizontal'` |\n| `itemGap`\t| The distance between each legend, horizontal distance in horizontal layout, and vertical distance in vertical layout. |\tnumber | `10` |\n\n**Example of `legend` config**\n\n```javascript\nconst config = {\n  // ...other config\n  legend: {\n    show: true,\n    icon: 'pin',\n    top: 40,\n    left: 'left',\n    align: 'left',\n    orient: 'vertical',\n    itemGap: 15\n  }\n}\n```\n\n#### Text Style\n\n| Prop\t| Description |\tType | Default |\n|-------|-------------|------|---------|\n| `color`\t| The color of the text. |\thexa | `#000` |\n| `fontStyle`\t| The font style of the text. Options are: `'normal'`, `'italic'`, `'oblique'`. |\tstring | None |\n| `fontWeight`\t| The font thick weight of the text. Options are: `'normal'`, `'bold'`, `'bolder'`, `'lighter'`, `100 \\| 200 \\| 200 \\| 400...`. |\tstring \\| number | None |\n| `fontFamily`\t| The font family of the text. |\tstring | `sans-serif` |\n| `fontSize`\t| The font size of the text. |\tnumber | None |\n\n**Example of `textStyle` config**\n\n```javascript\nconst config = {\n  // ...other config\n  textStyle: {\n    color: '#000100',\n    fontStyle: 'normal',\n    fontWeight: 'bold',\n    fontFamily: 'Arial',\n    fontSize: 12\n  }\n}\n```\n\n#### Item Style\n\n| Prop\t| Description |\tType | Default |\n|-------|-------------|------|---------|\n| `color`\t| Defines the color of the series. By default, colors from the global palette `color` configuration are used. |\tstring (hexa) | `auto` |\n| `borderColor`\t| Specifies the border color of the series. |\tstring (hexa) | `'#000'` |\n| `borderWidth`\t| Sets the width of the series border. Defaults to no border. | number | `0` |\n| `borderType`\t| Determines the type of border for the series. Options include `'solid'`, `'dashed'`, `'dotted'`. |\tstring | `solid` |\n| `opacity`\t| Adjusts the opacity of the component, supporting values from 0 to 1. The component will not be drawn when set to 0. |\tnumber | `1` |\n\n**Example of `itemStyle` config**\n\n```javascript\nconst config = {\n  // ...other config\n  itemStyle: {\n    color: '#5470c6',\n    borderColor: '#fff',\n    borderWidth: 1,\n    borderType: 'dashed',\n    opacity: 0.6\n  }\n}\n```\n\n\n#### Example Config\n\n```jsx\nconst config = {\n  title: 'Akvo Chart',\n  xAxisLabel: 'Year',\n  yAxisLabel: 'Income',\n  legend: {\n    show: true,\n    icon: 'pin',\n    top: 40,\n    left: 'left',\n    align: 'left',\n    orient: 'vertical',\n    itemGap: 15\n  },\n  textStyle: {\n    color: '#000100',\n    fontStyle: 'normal',\n    fontWeight: 'bold',\n    fontFamily: 'Arial',\n    fontSize: 12\n  },\n  itemStyle: {\n    color: '#5470c6',\n    borderColor: '#fff',\n    borderWidth: 1,\n    borderType: 'dashed',\n    opacity: 0.6\n  },\n  color: ['#5470c6', '#91cc75', '#fac858', '#ee6666']\n}\n```\n\n### Data\n\nIn Akvo-Charts, we follow the [ECharts dataset format](https://echarts.apache.org/en/option.html#dataset.source) to ensure compatibility and ease of use. The following data formats are supported:\n\n#### 2D Array\n\nA 2D array where the first row and/or column can contain dimension names. If dimension names are not provided, only the data will be used. This format is useful for simple tabular data representations.\n\n**Example**\n\n```jsx\n[\n    ['product', '2015', '2016', '2017'],\n    ['Matcha Latte', 43.3, 85.8, 93.7],\n    ['Milk Tea', 83.1, 73.4, 55.1],\n    ['Cheese Cocoa', 86.4, 65.2, 82.5],\n    ['Walnut Brownie', 72.4, 53.9, 39.1]\n]\n```\n\n#### Row-Based Key-Value Format\n\nAn array of objects where each object represents a row of data. The keys in the objects correspond to dimension names, and the values represent the data points. This format is useful for datasets with named dimensions.\n\n**Example**\n\n```jsx\n[\n    { product: 'Matcha Latte', count: 823, score: 95.8 },\n    { product: 'Milk Tea', count: 235, score: 81.4 },\n    { product: 'Cheese Cocoa', count: 1042, score: 91.2 },\n    { product: 'Walnut Brownie', count: 988, score: 76.9 }\n]\n```\n\n\n#### Column-Based Key-Value Format\n\nAn object where each key represents a column of data. The values for each key are arrays that correspond to the data in each column. This format is useful for datasets where columns are explicitly defined.\n\n**Example**\n\n```jsx\n{\n    'product': ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],\n    'count': [823, 235, 1042, 988],\n    'score': [95.8, 81.4, 91.2, 76.9]\n}\n\n```\n\n---\n\n## Usage\n\n### Bar Chart\nA component for rendering basic bar chart.\n\n#### Props\n\n| Prop\t| Type |\tDescription |\n|-------|------|--------------|\n| `config` | object |\tConfiguration options for the chart. For detailed information on the available configuration options, see the [Config Section](#config).  |\n| `data` |\tarray |\tData to be displayed in the chart. For more details on the data format, see the [Data Section](#data). |\n\n#### Example usage of Bar chart\n\n```jsx\nimport React from 'react';\nimport { Bar } from 'akvo-charts';\nimport 'akvo-charts/dist/index.css'\n\nconst BarChartExample = () =\u003e {\n  const data = [\n    { label: 'January', value: 30 },\n    { label: 'February', value: 20 },\n    // ...\n  ];\n\n  const config = {\n    title: 'Monthly Sales',\n    xAxisLabel: 'Month',\n    yAxisLabel: 'Sales'\n  };\n\n  return \u003cBar config={config} data={data} /\u003e;\n};\n\nexport default BarChartExample;\n```\n\n#### Example usage of `rawConfig` for a Bar chart\n\n```jsx\nimport { Bar } from \"akvo-charts\";\nimport 'akvo-charts/dist/index.css'\n\nconst BarChartExample = () =\u003e {\n  const rawConfig = {\n    xAxis: {\n      type: \"category\",\n      data: [\n        \"Mon\",\n        \"Tue\",\n        \"Wed\",\n        \"Thu\",\n        \"Fri\",\n        \"Sat\",\n        \"Sun\"\n      ]\n    },\n    yAxis: {\n      type: \"value\"\n    },\n    series: [\n      {\n        data: [\n          120,\n          200,\n          150,\n          80,\n          70,\n          110,\n          130\n        ],\n        type: \"bar\"\n      }\n    ]\n  };\n\n  return \u003cBar rawConfig={rawConfig} /\u003e;\n};\n\nexport default BarChartExample;\n```\n\n\n### Line Chart\nA component for rendering basic line chart.\n\n#### Props\n\n| Prop\t| Type |\tDescription |\n|-------|------|--------------|\n| `config` | object |\tConfiguration options for the chart. For detailed information on the available configuration options, see the [Config Section](#config).  |\n| `data` |\tarray |\tData to be displayed in the chart. For more details on the data format, see the [Data Section](#data). |\n\n #### Example usage of Line chart\n\n```jsx\nimport React from 'react';\nimport { Line } from 'akvo-charts';\nimport 'akvo-charts/dist/index.css'\n\nconst LineChartExample = () =\u003e {\n  const data = [\n    { label: 'January', value: 30 },\n    { label: 'February', value: 20 },\n    // ...\n  ];\n\n  const config = {\n    title: 'Monthly Sales',\n    xAxisLabel: 'Month',\n    yAxisLabel: 'Sales'\n  };\n\n  return \u003cLine config={config} data={data} /\u003e;\n};\n\nexport default LineChartExample;\n```\n#### Example usage of `rawConfig` for a Line chart\n\n```jsx\nimport { Line } from \"akvo-charts\";\nimport 'akvo-charts/dist/index.css'\n\nconst LineChartExample = () =\u003e {\n  const rawConfig = {\n    xAxis: {\n      type: \"category\",\n      data: [\n        \"Mon\",\n        \"Tue\",\n        \"Wed\",\n        \"Thu\",\n        \"Fri\",\n        \"Sat\",\n        \"Sun\"\n      ]\n    },\n    yAxis: {\n      type: \"value\"\n    },\n    series: [\n      {\n        data: [\n          820,\n          932,\n          901,\n          934,\n          1290,\n          1330,\n          1320\n        ],\n        type: \"line\",\n        smooth: true\n      }\n    ]\n  };\n\n  return \u003cLine rawConfig={rawConfig} /\u003e;\n};\n\nexport default LineChartExample;\n```\n\n### Pie Chart\nA component for rendering basic pie chart.\n\n#### Props\n\n| Prop\t| Type |\tDescription |\n|-------|------|--------------|\n| `config` | object |\tConfiguration options for the chart. For detailed information on the available configuration options, see the [Config Section](#config).  |\n| `data` |\tarray |\tData to be displayed in the chart. For more details on the data format, see the [Data Section](#data). |\n\n#### Example usage of Pie chart\n\n```jsx\nimport React from 'react';\nimport { Pie } from 'akvo-charts';\nimport 'akvo-charts/dist/index.css'\n\nconst PieChartExample = () =\u003e {\n  const data = [\n    { label: 'A', value: 30 },\n    { label: 'B', value: 70 },\n    // ...\n  ];\n\n  const config = {\n    title: 'Market Share'\n  };\n\n  return \u003cPie config={config} data={data} /\u003e;\n};\n\nexport default PieChartExample;\n```\n\n#### Example usage of `rawConfig` for a Pie chart\n\n```jsx\nimport { Pie } from \"akvo-charts\";\nimport 'akvo-charts/dist/index.css'\n\nconst PieChartExample = () =\u003e {\n  const rawConfig = {\n    title: {\n      text: \"Referer of a Website\",\n      subtext: \"Fake Data\",\n      left: \"center\"\n    },\n    tooltip: {\n      trigger: \"item\"\n    },\n    legend: {\n      orient: \"vertical\",\n      left: \"left\"\n    },\n    series: [\n      {\n        name: \"Access From\",\n        type: \"pie\",\n        radius: \"50%\",\n        data: [\n          {\n            value: 1048,\n            name: \"Search Engine\"\n          },\n          {\n            value: 735,\n            name: \"Direct\"\n          },\n          {\n            value: 580,\n            name: \"Email\"\n          },\n          {\n            value: 484,\n            name: \"Union Ads\"\n          },\n          {\n            value: 300,\n            name: \"Video Ads\"\n          }\n        ],\n        emphasis: {\n          itemStyle: {\n            shadowBlur: 10,\n            shadowOffsetX: 0,\n            shadowColor: \"rgba(0, 0, 0, 0.5)\"\n          }\n        }\n      }\n    ]\n  };\n\n  return \u003cPie rawConfig={rawConfig} /\u003e;\n};\n\nexport default PieChartExample;\n```\n\n### Doughnut Chart\nA component for rendering basic doughnut chart.\n\n#### Props\n\n| Prop\t| Type |\tDescription |\n|-------|------|--------------|\n| `config` | object |\tConfiguration options for the chart. For detailed information on the available configuration options, see the [Config Section](#config). |\n| `data` |\tarray |\tData to be displayed in the chart. For more details on the data format, see the [Data Section](#data). |\n| `size` | number | The size of the doughnut chart's torus (optional). This value determines the radius of the inner circle of the doughnut chart, affecting the overall appearance and size of the chart. |\n\n#### Example usage of Doughnut chart\n\n```jsx\nimport React from 'react';\nimport { Doughnut } from 'akvo-charts';\nimport 'akvo-charts/dist/index.css'\n\nconst DoughnutChartExample = () =\u003e {\n  const data = [\n    { label: 'A', value: 30 },\n    { label: 'B', value: 70 },\n    // ...\n  ];\n\n  const config = {\n    title: 'Market Share'\n  };\n\n  return \u003cDoughnut config={config} data={data} size={50} /\u003e;\n};\n\nexport default DoughnutChartExample;\n```\n\n#### Example usage of `rawConfig` for a Doughnut chart\n\n```jsx\nimport { Doughnut } from \"akvo-charts\";\nimport 'akvo-charts/dist/index.css'\n\nconst DoughnutChartExample = () =\u003e {\n  const rawConfig = {\n    tooltip: {\n      trigger: \"item\"\n    },\n    legend: {\n      top: \"5%\",\n      left: \"center\"\n    },\n    series: [\n      {\n        name: \"Access From\",\n        type: \"pie\",\n        radius: [\n          \"40%\",\n          \"70%\"\n        ],\n        avoidLabelOverlap: false,\n        label: {\n          show: false,\n          position: \"center\"\n        },\n        emphasis: {\n          label: {\n            show: true,\n            fontSize: 40,\n            fontWeight: \"bold\"\n          }\n        },\n        labelLine: {\n          show: false\n        },\n        data: [\n          {\n            value: 1048,\n            name: \"Search Engine\"\n          },\n          {\n            value: 735,\n            name: \"Direct\"\n          },\n          {\n            value: 580,\n            name: \"Email\"\n          },\n          {\n            value: 484,\n            name: \"Union Ads\"\n          },\n          {\n            value: 300,\n            name: \"Video Ads\"\n          }\n        ]\n      }\n    ]\n  };\n\n  return \u003cDoughnut rawConfig={rawConfig} /\u003e;\n};\n\nexport default DoughnutChartExample;\n```\n\n\n### Stack Bar Chart\n\nA component for rendering stacked bar chart.\n\n\n#### Props\n\n| Prop\t| Type |\tDescription |\n|-------|------|--------------|\n| `config` | object |\tConfiguration options for the chart. For detailed information on the available configuration options, see the [Config Section](#config).  |\n| `data` |\tarray |\tData to be displayed in the chart. For more details on the data format, see the [Data Section](#data). |\n| stackMapping _(optional)_ | object | Configuration object for defining the stack groups in a stack bar chart. If not provided, all series will be rendered in a single stack. Refer to the [Example of stackMapping props](#example-of-stackmapping-props) for detailed usage. |\n\n#### Example of stackMapping props\n\n```jsx\nconst data = [\n    ['product', '2015', '2016', '2017', '2018'],\n    ['Matcha Latte', 43.3, 85.8, 93.7, 90],\n    ['Milk Tea', 83.1, 73.4, 55.1, 78],\n    ['Cheese Cocoa', 86.4, 65.2, 82.5, 44.3],\n    ['Walnut Brownie', 72.4, 53.9, 39.1, 55.5]\n];\n\nconst stackMapping = {\n  'stack1': [2015, 2016],\n  'stack2': [2017, 2018],\n}\n```\n\n\n#### Example usage of StackBar chart\n\n```jsx\nimport React from 'react';\nimport { StackBar } from 'akvo-charts';\nimport 'akvo-charts/dist/index.css'\n\nconst StackBarChartExample = () =\u003e {\n  const data = [\n      ['product', '2015', '2016', '2017', '2018'],\n      ['Matcha Latte', 43.3, 85.8, 93.7, 90],\n      ['Milk Tea', 83.1, 73.4, 55.1, 78],\n      ['Cheese Cocoa', 86.4, 65.2, 82.5, 44.3],\n      ['Walnut Brownie', 72.4, 53.9, 39.1, 55.5]\n  ];\n\n  const stackMapping = {\n    'stack1': [2015, 2016],\n    'stack2': [2017, 2018],\n  }\n\n  const config = {\n    title: 'Product Sales Stack Bar',\n    xAxisLabel: 'Product',\n    yAxisLabel: 'Sales'\n  };\n\n  return \u003cStackBar config={config} data={data} stackMapping={stackMapping} /\u003e;\n};\n\nexport default StackBarChartExample;\n```\n\n#### Example usage of `rawConfig` for a StackBar chart\n\n```jsx\nimport { StackBar } from \"akvo-charts\";\nimport 'akvo-charts/dist/index.css'\n\nconst StackBarChartExample = () =\u003e {\n  const rawConfig = {\n    legend: {},\n    tooltip: {},\n    dataset: {\n      source: [\n        [\n          \"product\",\n          \"2015\",\n          \"2016\",\n          \"2017\"\n        ],\n        [\n          \"Matcha Latte\",\n          43.3,\n          85.8,\n          93.7\n        ],\n        [\n          \"Milk Tea\",\n          83.1,\n          73.4,\n          55.1\n        ],\n        [\n          \"Cheese Cocoa\",\n          86.4,\n          65.2,\n          82.5\n        ],\n        [\n          \"Walnut Brownie\",\n          72.4,\n          53.9,\n          39.1\n        ]\n      ]\n    },\n    xAxis: {\n      type: \"category\"\n    },\n    yAxis: {},\n    series: [\n      {\n        type: \"bar\"\n      },\n      {\n        type: \"bar\"\n      },\n      {\n        type: \"bar\"\n      }\n    ]\n  };\n\n  return \u003cStackBar rawConfig={rawConfig} /\u003e;\n};\n\nexport default StackBarChartExample;\n```\n\n\n### Stack Cluster Column\n\nA component for rendering stakc cluster column. Basically this chart is like stack bar chart but stacked into a group of bar chart.\n\n\n#### Props\n\n| Prop\t| Type |\tDescription |\n|-------|------|--------------|\n| `config` | object |\tConfiguration options for the chart. For detailed information on the available configuration options, see the [Config Section](#config).  |\n| `data` |\tarray |\tData to be displayed in the chart. For more details on the data format, see the [Data Section](#data). |\n\n\n#### Example usage of StackClusterColumn chart\n\n```jsx\nimport React from 'react';\nimport { StackClusterColumn } from 'akvo-charts';\nimport 'akvo-charts/dist/index.css'\n\nconst StackClusterColumnChartExample = () =\u003e {\n  const data = [\n      ['product', '2015', '2016', '2017', '2018'],\n      ['Matcha Latte', 43.3, 85.8, 93.7, 90],\n      ['Milk Tea', 83.1, 73.4, 55.1, 78],\n      ['Cheese Cocoa', 86.4, 65.2, 82.5, 44.3],\n      ['Walnut Brownie', 72.4, 53.9, 39.1, 55.5]\n  ];\n\n  const config = {\n    title: 'Product Sales Stack Bar',\n    xAxisLabel: 'Product',\n    yAxisLabel: 'Sales'\n  };\n\n  return \u003cStackClusterColumn config={config} data={data} /\u003e;\n};\n\nexport default StackClusterColumnChartExample;\n```\n\n#### Example usage of `rawConfig` for a StackClusterColumn chart\n\n```jsx\nimport { StackClusterColumn } from \"akvo-charts\";\nimport 'akvo-charts/dist/index.css'\n\nconst StackClusterColumnChartExample = () =\u003e {\n  const rawConfig = {\n    legend: {},\n    tooltip: {},\n    dataset: {\n      source: [\n        [\n          \"product\",\n          \"2015\",\n          \"2016\",\n          \"2017\"\n        ],\n        [\n          \"Matcha Latte\",\n          43.3,\n          85.8,\n          93.7\n        ],\n        [\n          \"Milk Tea\",\n          83.1,\n          73.4,\n          55.1\n        ],\n        [\n          \"Cheese Cocoa\",\n          86.4,\n          65.2,\n          82.5\n        ],\n        [\n          \"Walnut Brownie\",\n          72.4,\n          53.9,\n          39.1\n        ]\n      ]\n    },\n    xAxis: {\n      type: \"category\"\n    },\n    yAxis: {},\n    series: [\n      {\n        type: \"bar\"\n      },\n      {\n        type: \"bar\"\n      },\n      {\n        type: \"bar\"\n      }\n    ]\n  };\n\n  return \u003cStackClusterColumn rawConfig={rawConfig} /\u003e;\n};\n\nexport default StackClusterColumnChartExample;\n```\n\n### Scatter Plot Chart\n\nA component for rendering basic scatter plot chart.\n\n#### Props\n\n| Prop\t| Type |\tDescription |\n|-------|------|--------------|\n| `config` | object |\tConfiguration options for the chart. For detailed information on the available configuration options, see the [Config Section](#config). |\n| `data` |\tarray |\tData to be displayed in the chart. For more details on the data format, see the [Data Section](#data). |\n| `symbolSize` _(optional)_| number |Optional parameter to set the dot size. The default value is `10`|\n| `showLabel` _(optional)_| boolean |Optional parameter to set the dot size. The default value is `true`|\n\n\n#### Example usage of ScatterPlot chart\n\n```jsx\nimport React from 'react';\nimport { ScatterPlot } from 'akvo-charts';\nimport 'akvo-charts/dist/index.css'\n\nconst ScatterPlotChartExample = () =\u003e {\n   const data = [\n      { label: 'A', x: 1, y: 2 },\n      { label: 'B', x: 1, y: 3 },\n      { label: 'C', x: 5, y: 7 }\n    ];\n\n    const config = {\n      title: 'ScatterPlot Chart Example'\n    };\n\n  return \u003cScatterPlot config={config} data={data} symbolSize={25} /\u003e;\n};\n\nexport default ScatterPlotChartExample;\n```\n\n#### Example usage of `rawConfig` for a ScatterPlot chart\n\n```jsx\nimport { ScatterPlot } from \"akvo-charts\";\nimport 'akvo-charts/dist/index.css'\n\nconst ScatterPlotChartExample = () =\u003e {\n  const rawConfig = {\n    xAxis: {},\n    yAxis: {},\n    series: [\n      {\n        symbolSize: 20,\n        data: [\n          [\n            10,\n            8.04\n          ],\n          [\n            8.07,\n            6.95\n          ],\n          [\n            13,\n            7.58\n          ],\n          [\n            9.05,\n            8.81\n          ],\n        ],\n        type: \"scatter\"\n      }\n    ]\n  };\n\n  return \u003cScatterPlot rawConfig={rawConfig} /\u003e;\n};\n\nexport default ScatterPlotChartExample;\n```\n\n### Stack Line Chart\n\nA component for rendering stack line chart.\n\n#### Props\n\n| Prop\t| Type |\tDescription |\n|-------|------|--------------|\n| `config` | object |\tConfiguration options for the chart. For detailed information on the available configuration options, see the [Config Section](#config).  |\n| `data` |\tarray |\tData to be displayed in the chart. For more details on the data format, see the [Data Section](#data). |\n\n\n#### Example usage of StackLine chart\n\n```jsx\nimport React from 'react';\nimport { StackLine } from 'akvo-charts';\nimport 'akvo-charts/dist/index.css'\n\nconst StackLineChartExample = () =\u003e {\n  const data = [\n      ['product', '2015', '2016', '2017', '2018'],\n      ['Matcha Latte', 43.3, 85.8, 93.7, 90],\n      ['Milk Tea', 83.1, 73.4, 55.1, 78],\n      ['Cheese Cocoa', 86.4, 65.2, 82.5, 44.3],\n      ['Walnut Brownie', 72.4, 53.9, 39.1, 55.5]\n  ];\n\n  const config = {\n    title: 'Product Sales Stack Bar',\n    xAxisLabel: 'Product',\n    yAxisLabel: 'Sales'\n  };\n\n  return \u003cStackLine config={config} data={data} /\u003e;\n};\n\nexport default StackLineChartExample;\n```\n\n#### Example usage of `rawConfig` for a StackLine chart\n\n```jsx\nimport { StackLine } from \"akvo-charts\";\nimport 'akvo-charts/dist/index.css'\n\nconst StackLineChartExample = () =\u003e {\n  const rawConfig = {\n    title: {\n      text: \"Product Sales\"\n    },\n    tooltip: {\n      trigger: \"axis\",\n      axisPointer: {\n        type: \"cross\",\n        label: {\n          backgroundColor: \"#6a7985\"\n        }\n      }\n    },\n    legend: {\n      data: [\n        \"Matcha Latte\",\n        \"Milk Tea\",\n        \"Cheese Cocoa\",\n        \"Walnut Brownie\"\n      ]\n    },\n    toolbox: {\n      feature: {\n        saveAsImage: {}\n      }\n    },\n    grid: {\n      left: \"3%\",\n      right: \"4%\",\n      bottom: \"3%\",\n      containLabel: true\n    },\n    xAxis: [\n      {\n        type: \"category\",\n        boundaryGap: false,\n        data: [\n          \"2015\",\n          \"2016\",\n          \"2017\",\n          \"2018\"\n        ]\n      }\n    ],\n    yAxis: [\n      {\n        type: \"value\"\n      }\n    ],\n    series: [\n      {\n        name: \"Matcha Latte\",\n        type: \"line\",\n        stack: \"Total\",\n        areaStyle: {},\n        emphasis: {\n          focus: \"series\"\n        },\n        data: [\n          43.3,\n          85.8,\n          93.7,\n          90\n        ]\n      },\n      {\n        name: \"Milk Tea\",\n        type: \"line\",\n        stack: \"Total\",\n        areaStyle: {},\n        emphasis: {\n          focus: \"series\"\n        },\n        data: [\n          83.1,\n          73.4,\n          55.1,\n          78\n        ]\n      },\n      {\n        name: \"Cheese Cocoa\",\n        type: \"line\",\n        stack: \"Total\",\n        areaStyle: {},\n        emphasis: {\n          focus: \"series\"\n        },\n        data: [\n          86.4,\n          65.2,\n          82.5,\n          44.3\n        ]\n      },\n      {\n        name: \"Walnut Brownie\",\n        type: \"line\",\n        stack: \"Total\",\n        areaStyle: {},\n        emphasis: {\n          focus: \"series\"\n        },\n        data: [\n          72.4,\n          53.9,\n          39.1,\n          55.5\n        ]\n      }\n    ]\n  };\n\n  return \u003cStackLine rawConfig={rawConfig} /\u003e;\n};\n\nexport default StackLineChartExample;\n```\n\n### MapView\n\nThe `MapView` component provides an easy way to render a map in your React application using [Leaflet](https://leafletjs.com/). You can customize the map's appearance, add layers, plot points, and handle user interactions such as clicks. The map configuration is passed via the `config`, `data`, `tile`, and `layer` props.\n\n\n\u003ca id=\"map-config\"\u003e\u003c/a\u003e\n#### config\n\n\n\n#### layer\n\n| Prop         | Type                                                   | Description                                                                                                                                                                   |\n|--------------|--------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `source`     | string _or_ object [(GeoJSON/TopoJSON)](https://en.wikipedia.org/wiki/GeoJSON) | Sets the source of the layer data. This can be a reference to a GeoJSON/TopoJSON object stored in a global variable (e.g., `window.topoData`) or a GeoJSON/TopoJSON object directly. |\n| `url`        | string                                                  | Sets the GeoJSON/TopoJSON source from a URL. The data from this URL will be fetched and used as the layer source.                                                              |\n| `style` _(optional)_  | object                                                  | Defines the styling for GeoJSON lines and polygons using [Path options](https://leafletjs.com/reference.html#path-option), including properties like color, weight, and fillColor. |\n| `onClick(map, props)` _(optional)_| function _or_ string                                    | A function that is triggered when a layer feature is clicked. It receives the [map: Map instance](https://leafletjs.com/reference.html#map-factory) and [props: GeoJSON event properties](https://leafletjs.com/reference.html#geojsonevent-properties) as arguments, allowing you to interact with the map or the feature.   |\n| `onMouseOver(map, props)` _(optional)_| function _or_ string                                    | A function that is triggered when the mouse hovers over a layer feature. It receives the [map: Map instance](https://leafletjs.com/reference.html#map-factory) and [props: GeoJSON event properties](https://leafletjs.com/reference.html#geojsonevent-properties) as arguments, enabling hover-based interactions. |\n|`color` _(optional)_ | array | An array of colors used for choropleth mapping. Each feature will be colored according to its data value based on this color scale.|\n|`mapKey` _(optional)_ |string | The key in the GeoJSON feature properties that is used to map the data values for the choropleth map.|\n|`choropleth` _(optional)_ | string | The data attribute used for determining the color scale in the choropleth map. This value should match the data property in your dataset.|\n|`tooltip` _(optional)_ | object | Configuration for displaying a Leaflet tooltip on a choropleth map. |\n\n\n##### tooltip (object)\nConfiguration for displaying a Leaflet tooltip on a choropleth map.\n| Prop\t| Type |\tDescription |\n|-------|------|--------------|\n| `show` | `boolean` |\tDetermines whether tooltips are enabled globally on the map. |\n| `showTooltipForAll` |\t`boolean` |\tIndicates if tooltips should be shown for all data points, regardless of value. |\n| `tooltipComponent` |\t`React component` |\tCustom React component used to render the tooltip content. |\n\n\n#### data\n\nAn array of objects that define either marker points or data for choropleth mapping. For markers, objects should include point (latitude, longitude) and label. For choropleth, objects should include keys that match [mapKey](#layer) and the corresponding data value (e.g., density).\n\n| Prop\t| Type |\tDescription |\n|-------|------|--------------|\n| `point` | array [LatLng](https://leafletjs.com/reference.html#latlng) |\tContains geographic points that will be displayed as markers.|\n| `label` |\tstring |\tText to be displayed in the pop-up marker|\n\n\n#### config\n\n| Prop\t| Type |\tDescription |\n|-------|------|--------------|\n| `center` | array [LatLng](https://leafletjs.com/reference.html#latlng) |Initial geographic center of the map. `[latitude, longitude]`|\n| `zoom` |\tnumber | Initial map zoom level\t|\n| `height` | string | Set the map height. By default is: `100vh`\t|\n| `width` |\tstring | Set the map width.\tBy default is: `100%`|\n\n#### Example usage of MapView\n\n```jsx\nimport React from \"react\";\nimport { MapView } from \"akvo-charts\";\nimport 'akvo-charts/dist/index.css'\n\nconst MapViewExample = () =\u003e {\n  const config = {\n    center: [\n      -6.2,\n      106.816666\n    ],\n    zoom: 8,\n    height: \"100vh\",\n    width: \"100%\"\n  };\n\n  const data = [\n    {\n      point: [\n        -6.170166,\n        106.831375\n      ],\n      label: \"Istiqlal Mosque\"\n    },\n    {\n      point: [\n        -6.174596,\n        106.830407\n      ],\n      label: \"Gambir Station\"\n    },\n    {\n      point: [\n        -6.175414,\n        106.827175\n      ],\n      label: \"The National Monument\"\n    }\n  ];\n\n  const onClick = (map, { target }) =\u003e map.fitBounds(target._bounds);\n  const layer = {\n    source: \"window.topoData\",\n    url: \"https://akvo.github.io/akvo-charts/static/geojson/indonesia-prov.geojson\",\n    style: {\n      color: \"#92400e\",\n      weight: 1,\n      fillColor: \"#fbbf24\"\n    },\n    onClick: onClick\n  };\n\n  const tile = {\n    url: \"https://tile.openstreetmap.org/{z}/{x}/{y}.png\",\n    maxZoom: 19,\n    attribution: \"© OpenStreetMap\"\n  };\n\n  return \u003cMapView tile={tile} layer={layer} data={data} config={config} /\u003e;\n};\n\nexport default MapViewExample;\n```\n\n#### Example Usage with Choropleth Mapping\n\nHere is an example of how to define a layer in MapView for applying a choropleth map:\n\n```jsx\nconst ChoroPlethExample = () =\u003e {\n  const CustomTooltip = ({ props }) =\u003e (\n    \u003cdiv\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        gap: 10\n      }}\n    \u003e\n      \u003cdiv style={{ fontWeight: 700 }}\u003e{props?.name || 'No Name'}\u003c/div\u003e\n      \u003cdiv\u003eDensity: {props?.density || 'N/A'}\u003c/div\u003e\n    \u003c/div\u003e\n  );\n\n  const config = {\n    center: [-6.2, 106.816666],\n    zoom: 8,\n    height: \"100vh\",\n    width: \"100%\",\n  };\n\n  const data = [\n    {\n      Propinsi: \"DI. ACEH\",\n      density: 92,\n    },\n    {\n      Propinsi: \"SUMATERA UTARA\",\n      density: 205,\n    },\n    // more data here\n  ];\n\n  const onClick = (map, { target }) =\u003e map.fitBounds(target._bounds);\n  const layer = {\n    source: \"window.topoData\",\n    url: \"https://akvo.github.io/akvo-charts/static/geojson/indonesia-prov.geojson\",\n    style: {\n      color: \"#92400e\",\n      weight: 1,\n      fillColor: \"#fbbf24\",\n      fillOpacity: 0.7,\n    },\n    color: [\n      \"#FFEDA0\",\n      \"#FED976\",\n      \"#FFEDA0\",\n      \"#FED976\",\n    ],\n    mapKey: \"Propinsi\",\n    choropleth: \"density\",\n    onClick: onClick,\n    tooltip: {\n        show: true,\n        showTooltipForAll: false,\n        tooltipComponent: CustomTooltip\n      },\n  };\n\n  const tile = {\n    url: \"https://tile.openstreetmap.org/{z}/{x}/{y}.png\",\n    maxZoom: 19,\n    attribution: \"© OpenStreetMap\",\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003cMapView tile={tile} layer={layer} data={data} config={config} /\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default ChoroPlethExample;\n```\n\n### MapCluster\nThe `MapCluster` component provides an initial implementation for map clustering in Akvo project use cases. It leverages [Container](#map-container), [MarkerClusterGroup](#map-marker-cluster-group), and [Marker](#map-marker) to group and display markers on a map.\n\n#### Props\n\n##### `markerIcon`\nDefines the styling and attributes for individual marker icons.\n| Prop         | Type               | Description                                 |\n|--------------|--------------------|---------------------------------------------|\n| `className`  | `string`           | CSS class for styling the marker icon.      |\n| `iconSize`   | `[number, number]` | Dimensions of the marker icon `[width, height]`. |\n| `html`       | `boolean`          | If `true`, uses a default HTML circle icon. |\n\n##### `clusterIcon`\nDefines the styling and attributes for cluster icons.\n| Prop         | Type           | Description                                 |\n|--------------|----------------|---------------------------------------------|\n| `className`  | `string`       | CSS class for styling the cluster icon.     |\n| `iconSize`   | `number`       | Size of the cluster icon in pixels.         |\n\n##### Additional Properties\n| Prop           | Type                               | Description                                                                 |\n|----------------|------------------------------------|-----------------------------------------------------------------------------|\n| `groupKey`     | `string`                           | Key used to group data when `type` is set to `\"circle\"`.                    |\n| `type`         | `enum`(default\u0026#124;circle) |Defines the clustering mode:                                               |\n|                |                                    | - `\"default\"`: Uses default styles from [Leaflet.markercluster](https://github.com/Leaflet/Leaflet.markercluster). |\n|                |                                    | - `\"circle\"`: Uses predefined styles specific to common Akvo project use cases. |\n| `renderPopup`  | `function`                         | Function to render a custom child component in the marker popup.            |\n\n---\n\n#### Example Usage\n\n```jsx\nimport React from \"react\";\nimport MapCluster from \"./MapCluster\";\nimport 'akvo-charts/dist/index.css'\n\nconst markerIcon = {\n  className: \"custom-marker\",\n  iconSize: [32, 32],\n  html: true,\n};\n\nconst clusterIcon = {\n  className: \"custom-marker-cluster\",\n  iconSize: 60,\n};\n\nconst tile = {\n  url: \"https://tile.openstreetmap.org/{z}/{x}/{y}.png\",\n  maxZoom: 19,\n  attribution: \"© OpenStreetMap\",\n};\n\nconst config = {\n  // Additional configuration options for the map can go here.\n};\n\nconst data = [\n  // Provide the array of data points for the map here.\n];\n\nconst Chart = () =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003cMapCluster\n        tile={tile}\n        config={config}\n        data={data}\n        markerIcon={markerIcon}\n        clusterIcon={clusterIcon}\n        groupKey={\"serviceLevel\"}\n        type={\"circle\"}\n      /\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default Chart;\n```\n\n#### MapCluster Notes\n- When using `\"default\"` for `type`, the component applies styles from [Leaflet.markercluster](https://github.com/Leaflet/Leaflet.markercluster).\n- When using `\"circle\"` for `type`, the component applies Akvo-specific predefined styles.\n- Ensure the `data` prop is formatted correctly to include the required latitude and longitude coordinates for each marker.\n- Customize `renderPopup` to display additional information for markers as needed.\n\n\n---\n\n\n### Fully Customized Map\nIf the [MapView](#mapview) or [MapCluster](#mapcluster) components do not meet your specific requirements, you can use this fully customizable map component to create a tailored solution.\n\n\n### Components\n\n#### \u003ca id=\"map-container\"\u003e\u003c/a\u003eContainer\nThe `Container` component serves as the base for rendering a map.\n\n| Prop         | Type           | Description                                   |\n|--------------|----------------|-----------------------------------------------|\n| `children`   | `node`         | Valid map or React components to be rendered inside the container. |\n| `tile`       | `object`       | Accepts all valid [Tile Layer options](#map-tile-layer). |\n| `config`     | `object`       | Accepts all valid [config options](#map-config). |\n\n---\n\n#### \u003ca id=\"map-geojson\"\u003e\u003c/a\u003eGeoJson\nThe `GeoJson` component allows you to render GeoJSON data as layers on the map.\n\n| Prop         | Type           | Description                                   |\n|--------------|----------------|-----------------------------------------------|\n| `onClick`    | `function`     | Event handler for click events on the layer. |\n| `onMouseOver`| `function`     | Event handler for mouseover events on the layer. |\n| `data`       | `object`       | Accepts valid [GeoJSON](https://en.wikipedia.org/wiki/GeoJSON) objects. |\n| `style`      | `object`       | Styles the layer, e.g., for choropleth maps, using React inline CSS format. |\n\n---\n\n#### \u003ca id=\"map-legend-control\"\u003e\u003c/a\u003eLegendControl\nThe `LegendControl` component creates a legend control based on color ranges.\n\n| Prop         | Type           | Description                                   |\n|--------------|----------------|-----------------------------------------------|\n| `data`       | `array`        | Single-dimension array defining legend data. |\n| `color`      | `array`        | Array of colors corresponding to the data ranges. |\n\n---\n\n#### \u003ca id=\"map-marker\"\u003e\u003c/a\u003eMarker\nThe `Marker` component is used to display individual points on the map.\n\n| Prop         | Type           | Description                                   |\n|--------------|----------------|-----------------------------------------------|\n| `children`   | `node`         | Valid React components to display in the marker popup. |\n| `latlng`     | `[number, number]` | Latitude and longitude of the marker `[latitude, longitude]`. |\n| `label`      | `string`       | Label or title for the marker.               |\n\nIt also supports all [Marker options](https://leafletjs.com/reference.html#marker-option).\n\n---\n\n#### \u003ca id=\"map-marker-cluster-group\"\u003e\u003c/a\u003eMarkerClusterGroup\nThe `MarkerClusterGroup` component groups multiple markers into clusters.\n\n| Prop            | Type           | Description                                   |\n|-----------------|----------------|-----------------------------------------------|\n| `children`      | `node`         | Valid React components to be clustered.      |\n| `iconCreateFn`  | `function`     | Function to customize the cluster icon.      |\n| `onClick`       | `function`     | Event handler for click events on the cluster. |\n| `onMarkerClick` | `function`     | Event handler for click events on individual markers. |\n\nIt supports all [Leaflet.markercluster options](https://github.com/Leaflet/Leaflet.markercluster#all-options).\n\n---\n\n#### \u003ca id=\"map-tile-layer\"\u003e\u003c/a\u003eTileLayer\nThe `TileLayer` component is used to display map tiles.\n\n| Prop         | Type           | Description                                   |\n|--------------|----------------|-----------------------------------------------|\n| `url`        | `string`       | The URL template for the tile layer.         |\n| `maxZoom`    | `number`       | The maximum zoom level for the layer.        |\n| `attribution`| `string`       | Attribution text to display on the map.      |\n\nIt supports all [TileLayer options](https://leafletjs.com/reference.html#tilelayer-option).\n\n---\n\n#### \u003ca id=\"map-utils\"\u003e\u003c/a\u003eUtils\n\n* `getGeoJSONList`: This utility function converts TopoJSON data to GeoJSON using the [topojson-client library](https://www.npmjs.com/package/topojson-client).\n\n---\n\n#### Example Usage\n\n```jsx\nimport { Map } from 'akvo-charts';\nimport 'akvo-charts/dist/index.css'\n****\nconst { getGeoJSONList } = Map;\n\nconst DisplayMap = () =\u003e {\n  const mapConfig = {\n    config: {\n      center: [-6.2, 106.816666],\n      zoom: 8,\n      height: \"100vh\",\n      width: \"100%\",\n    },\n  };\n\n  const iconCreateFn = (cluster) =\u003e (\n    \u003cdiv className=\"custom-cluster-icon\"\u003e\n      {cluster.getChildCount()}\n    \u003c/div\u003e\n  );\n\n  const geoProps = {\n    style: {\n      fillColor: \"#f28c28\",\n      weight: 2,\n      opacity: 1,\n      color: \"white\",\n      fillOpacity: 0.7,\n    },\n    onClick: (e) =\u003e console.log(\"Layer clicked!\", e),\n  };\n  const data = [\n    // Provide the array of data points for the map here.\n  ];\n  const geoData = {\n  // Provide the object of geojson data for the map here.\n  }\n\n  return (\n    \u003cMap.Container {...mapConfig}\u003e\n      {getGeoJSONList(geoData).map((gd, gx) =\u003e (\n        \u003cMap.GeoJson key={gx} data={gd} {...geoProps} /\u003e\n      ))}\n      \u003cMap.MarkerClusterGroup iconCreateFn={iconCreateFn}\u003e\n        {data\n          ?.filter((d) =\u003e d?.point)\n          ?.map((d, dx) =\u003e (\n            \u003cMap.Marker\n              key={dx}\n              latlng={d.point}\n              icon={{\n                className: 'custom-marker',\n                iconSize: [32, 32],\n                html: `\u003cspan style=\"background-color:${d.color}; border:2px solid #fff;\" /\u003e`,\n              }}\n            \u003e\n              \u003cul className=\"w-full text-base space-y-1\"\u003e\n                \u003cli\u003e\n                  \u003cstrong\u003eSchool: \u003c/strong\u003e\n                  \u003cspan\u003e{d.label}\u003c/span\u003e\n                \u003c/li\u003e\n                \u003cli\u003e\n                  \u003cstrong\u003eService Level: \u003c/strong\u003e\n                  \u003cspan\u003e{d.serviceLevel}\u003c/span\u003e\n                \u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/Map.Marker\u003e\n          ))}\n      \u003c/Map.MarkerClusterGroup\u003e\n    \u003c/Map.Container\u003e\n  );\n};\n\nexport default DisplayMap;\n```\n\n#### Map components Notes\n- Customize `iconCreateFn` to define your cluster icons dynamically.\n- Use `getGeoJSONList` to handle TopoJSON conversions and simplify rendering GeoJSON layers.\n- Always define `style` properties for `GeoJson` to ensure proper rendering of layers.\n\n---\n\n[Back to top](#akvo-charts)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakvo%2Fakvo-charts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fakvo%2Fakvo-charts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakvo%2Fakvo-charts/lists"}