{"componentChunkName":"component---src-pages-data-visualization-chart-types-index-mdx","path":"/data-visualization/chart-types/","result":{"pageContext":{"frontmatter":{"title":"Chart types","description":"Overview of all chart types available."},"relativePagePath":"/data-visualization/chart-types/index.mdx","titleType":"prepend","MdxNode":{"id":"02c55400-6d20-56fd-a49d-08948f76867d","children":[],"parent":"b61f2c93-4c2f-5233-b944-edc2dc997a15","internal":{"content":"---\ntitle: Chart types\ndescription: Overview of all chart types available.\n---\n\nimport OverviewCard from 'components/OverviewCard';\n\n<PageDescription>\n\nStart by identifying the purpose of the visualization and choose a chart type appropriately.\n\n</PageDescription>\n\n## Comparisons\n\n<Row className=\"overview-card-group\">\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Bar chart\"\n    href=\"/data-visualization/basic-charts#bar-chart\"\n    >\n\n![](images/bar.svg)\n\n</OverviewCard>\n</Column>\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Grouped bar\"\n    href=\"/data-visualization/basic-charts#grouped-bar-chart\"\n    >\n\n![](images/bargrouped.svg)\n\n</OverviewCard>\n</Column>\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Bubble chart\"\n    href=\"/data-visualization/basic-charts#bubble-chart\"\n    >\n\n![](images/bubble.svg)\n\n</OverviewCard>\n</Column>\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Radar chart\"\n    disabled\n    >\n\n![](images/radar.svg)\n\n</OverviewCard>\n</Column>\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Horizontal bar\"\n    href=\"/data-visualization/basic-charts#horizontal-bar\"\n    tag=\"Design only\"\n    >\n\n![](images/barhoriz.svg)\n\n</OverviewCard>\n</Column>\n</Row>\n\n## Trends\n\n<Row className=\"overview-card-group\">\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Line chart\"\n    href=\"/data-visualization/basic-charts#line-chart\"\n    >\n\n![](images/line.svg)\n\n</OverviewCard>\n</Column>\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Area chart\"\n    href=\"/data-visualization/basic-charts#area-chart\"\n    >\n\n![](images/area.svg)\n\n</OverviewCard>\n</Column>\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Histogram\"\n    href=\"/data-visualization/basic-charts#bar-chart\"\n    tag=\"Design only\"\n    >\n\n![](images/histogram.svg)\n\n</OverviewCard>\n</Column>\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Stream chart\"\n    disabled\n    >\n\n![](images/stream.svg)\n\n</OverviewCard>\n</Column>\n</Row>\n\n## Part-to-whole\n\n<Row className=\"overview-card-group\">\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Donut / pie\"\n    href=\"/data-visualization/basic-charts#pie-and-donut-chart\"\n    >\n\n![](images/donut.svg)\n\n</OverviewCard>\n</Column>\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Stacked bar\"\n    href=\"/data-visualization/basic-charts/#stacked-bar\"\n    >\n\n![](images/barstack.svg)\n\n</OverviewCard>\n</Column>\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Stacked area\"\n    href=\"/data-visualization/basic-charts/#stacked-area-chart\"\n    tag=\"Design only\"\n    >\n\n![](images/areastack.svg)\n\n</OverviewCard>\n</Column>\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm>\n <OverviewCard\n    title=\"Tree map\"\n    disabled\n    >\n\n![](images/treemap.svg)\n\n</OverviewCard>\n</Column>\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >\n<OverviewCard\n   title=\"Meter / gauge\"\n   href=\"/data-visualization/basic-charts/#meter-and-gauge\"\n   tag=\"Design only\"\n   >\n\n![](images/gauge.svg)\n\n</OverviewCard>\n</Column>\n</Row>\n\n## Correlations\n\n<Row className=\"overview-card-group\">\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm>\n <OverviewCard\n    title=\"Scatter plot\"\n    href=\"/data-visualization/basic-charts#scatter-plot\"\n    >\n\n![](images/scatter.svg)\n\n</OverviewCard>\n</Column>\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Heat map\"\n    disabled\n    >\n\n![](images/heatmap.svg)\n\n</OverviewCard>\n</Column>\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Parallel coordinates\"\n    disabled\n    >\n\n![](images/parallel.svg)\n\n</OverviewCard>\n</Column>\n</Row>\n\n## Connections\n\n<Row className=\"overview-card-group\">\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Alluvial diagram\"\n    href=\"/data-visualization/advanced-charts#alluvial-diagram\"\n    tag=\"Design only\"\n    >\n\n![](images/alluvial.svg)\n\n</OverviewCard>\n</Column>\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Tree diagram\"\n    href=\"/data-visualization/advanced-charts#tree-diagram\"\n    tag=\"Design only\"\n    >\n\n![](images/treediagram.svg)\n\n</OverviewCard>\n</Column>\n</Row>\n\n## Geospatial: overlays\n\n<Row className=\"overview-card-group\">\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Choropleth map\"\n    href=\"/data-visualization/advanced-charts#choropleth-map\"\n    tag=\"Design only\"\n    >\n\n![](images/geo-choropleth.svg)\n\n</OverviewCard>\n</Column>\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Proportional symbol\"\n    href=\"/data-visualization/advanced-charts#proportional-symbol\"\n    tag=\"Design only\"\n    >\n\n![](images/geo-proportion.svg)\n\n</OverviewCard>\n</Column>\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Connecting lines\"\n    href=\"/data-visualization/advanced-charts#connecting-lines\"\n    tag=\"Design only\"\n    >\n\n![](images/geo-connection.svg)\n\n</OverviewCard>\n</Column>\n</Row>\n","type":"Mdx","contentDigest":"8602aaf0b26943525fc9990a1297e3f6","counter":1605,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Chart types","description":"Overview of all chart types available."},"exports":{},"rawBody":"---\ntitle: Chart types\ndescription: Overview of all chart types available.\n---\n\nimport OverviewCard from 'components/OverviewCard';\n\n<PageDescription>\n\nStart by identifying the purpose of the visualization and choose a chart type appropriately.\n\n</PageDescription>\n\n## Comparisons\n\n<Row className=\"overview-card-group\">\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Bar chart\"\n    href=\"/data-visualization/basic-charts#bar-chart\"\n    >\n\n![](images/bar.svg)\n\n</OverviewCard>\n</Column>\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Grouped bar\"\n    href=\"/data-visualization/basic-charts#grouped-bar-chart\"\n    >\n\n![](images/bargrouped.svg)\n\n</OverviewCard>\n</Column>\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Bubble chart\"\n    href=\"/data-visualization/basic-charts#bubble-chart\"\n    >\n\n![](images/bubble.svg)\n\n</OverviewCard>\n</Column>\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Radar chart\"\n    disabled\n    >\n\n![](images/radar.svg)\n\n</OverviewCard>\n</Column>\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Horizontal bar\"\n    href=\"/data-visualization/basic-charts#horizontal-bar\"\n    tag=\"Design only\"\n    >\n\n![](images/barhoriz.svg)\n\n</OverviewCard>\n</Column>\n</Row>\n\n## Trends\n\n<Row className=\"overview-card-group\">\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Line chart\"\n    href=\"/data-visualization/basic-charts#line-chart\"\n    >\n\n![](images/line.svg)\n\n</OverviewCard>\n</Column>\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Area chart\"\n    href=\"/data-visualization/basic-charts#area-chart\"\n    >\n\n![](images/area.svg)\n\n</OverviewCard>\n</Column>\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Histogram\"\n    href=\"/data-visualization/basic-charts#bar-chart\"\n    tag=\"Design only\"\n    >\n\n![](images/histogram.svg)\n\n</OverviewCard>\n</Column>\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Stream chart\"\n    disabled\n    >\n\n![](images/stream.svg)\n\n</OverviewCard>\n</Column>\n</Row>\n\n## Part-to-whole\n\n<Row className=\"overview-card-group\">\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Donut / pie\"\n    href=\"/data-visualization/basic-charts#pie-and-donut-chart\"\n    >\n\n![](images/donut.svg)\n\n</OverviewCard>\n</Column>\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Stacked bar\"\n    href=\"/data-visualization/basic-charts/#stacked-bar\"\n    >\n\n![](images/barstack.svg)\n\n</OverviewCard>\n</Column>\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Stacked area\"\n    href=\"/data-visualization/basic-charts/#stacked-area-chart\"\n    tag=\"Design only\"\n    >\n\n![](images/areastack.svg)\n\n</OverviewCard>\n</Column>\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm>\n <OverviewCard\n    title=\"Tree map\"\n    disabled\n    >\n\n![](images/treemap.svg)\n\n</OverviewCard>\n</Column>\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >\n<OverviewCard\n   title=\"Meter / gauge\"\n   href=\"/data-visualization/basic-charts/#meter-and-gauge\"\n   tag=\"Design only\"\n   >\n\n![](images/gauge.svg)\n\n</OverviewCard>\n</Column>\n</Row>\n\n## Correlations\n\n<Row className=\"overview-card-group\">\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm>\n <OverviewCard\n    title=\"Scatter plot\"\n    href=\"/data-visualization/basic-charts#scatter-plot\"\n    >\n\n![](images/scatter.svg)\n\n</OverviewCard>\n</Column>\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Heat map\"\n    disabled\n    >\n\n![](images/heatmap.svg)\n\n</OverviewCard>\n</Column>\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Parallel coordinates\"\n    disabled\n    >\n\n![](images/parallel.svg)\n\n</OverviewCard>\n</Column>\n</Row>\n\n## Connections\n\n<Row className=\"overview-card-group\">\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Alluvial diagram\"\n    href=\"/data-visualization/advanced-charts#alluvial-diagram\"\n    tag=\"Design only\"\n    >\n\n![](images/alluvial.svg)\n\n</OverviewCard>\n</Column>\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Tree diagram\"\n    href=\"/data-visualization/advanced-charts#tree-diagram\"\n    tag=\"Design only\"\n    >\n\n![](images/treediagram.svg)\n\n</OverviewCard>\n</Column>\n</Row>\n\n## Geospatial: overlays\n\n<Row className=\"overview-card-group\">\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Choropleth map\"\n    href=\"/data-visualization/advanced-charts#choropleth-map\"\n    tag=\"Design only\"\n    >\n\n![](images/geo-choropleth.svg)\n\n</OverviewCard>\n</Column>\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Proportional symbol\"\n    href=\"/data-visualization/advanced-charts#proportional-symbol\"\n    tag=\"Design only\"\n    >\n\n![](images/geo-proportion.svg)\n\n</OverviewCard>\n</Column>\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Connecting lines\"\n    href=\"/data-visualization/advanced-charts#connecting-lines\"\n    tag=\"Design only\"\n    >\n\n![](images/geo-connection.svg)\n\n</OverviewCard>\n</Column>\n</Row>\n","fileAbsolutePath":"/zeit/1dde86ed/src/pages/data-visualization/chart-types/index.mdx"}}}}