diff --git a/packages/web/package.json b/packages/web/package.json
index c94e1a27c..fe46dc823 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -19,6 +19,7 @@
     "eslint-plugin-react": "^7.17.0",
     "json-stable-stringify": "^1.0.1",
     "localforage": "^1.9.0",
+    "randomcolor": "^0.6.2",
     "react": "^16.12.0",
     "react-ace": "^8.0.0",
     "react-chartjs-2": "^2.11.1",
diff --git a/packages/web/src/charts/ChartEditor.js b/packages/web/src/charts/ChartEditor.js
index 38b288203..d84459b06 100644
--- a/packages/web/src/charts/ChartEditor.js
+++ b/packages/web/src/charts/ChartEditor.js
@@ -5,7 +5,7 @@ import useTheme from '../theme/useTheme';
 import useDimensions from '../utility/useDimensions';
 import { HorizontalSplitter } from '../widgets/Splitter';
 import WidgetColumnBar, { WidgetColumnBarItem } from '../widgets/WidgetColumnBar';
-import { FormCheckboxField, FormSelectField } from '../utility/forms';
+import { FormCheckboxField, FormSelectField, FormTextField } from '../utility/forms';
 import DataChart from './DataChart';
 import { FormProviderCore } from '../utility/FormProvider';
 
@@ -29,7 +29,13 @@ export default function ChartEditor({ data, config, setConfig }) {
               <FormSelectField label="Chart type" name="chartType">
                 <option value="bar">Bar</option>
                 <option value="line">Line</option>
+                {/* <option value="radar">Radar</option> */}
+                <option value="pie">Pie</option>
+                <option value="polarArea">Polar area</option>
+                {/* <option value="bubble">Bubble</option>
+                <option value="scatter">Scatter</option> */}
               </FormSelectField>
+              <FormTextField label="Color seed" name="colorSeed" />
             </WidgetColumnBarItem>
             <WidgetColumnBarItem title="Data" name="data">
               <FormSelectField label="Label column" name="labelColumn">
diff --git a/packages/web/src/charts/DataChart.js b/packages/web/src/charts/DataChart.js
index d4f633363..8a1cad05c 100644
--- a/packages/web/src/charts/DataChart.js
+++ b/packages/web/src/charts/DataChart.js
@@ -1,6 +1,7 @@
 import React from 'react';
-import _ from 'lodash'
+import _ from 'lodash';
 import Chart from 'react-chartjs-2';
+import randomcolor from 'randomcolor';
 import styled from 'styled-components';
 import useTheme from '../theme/useTheme';
 import useDimensions from '../utility/useDimensions';
@@ -8,64 +9,74 @@ import { HorizontalSplitter } from '../widgets/Splitter';
 import WidgetColumnBar, { WidgetColumnBarItem } from '../widgets/WidgetColumnBar';
 import { FormSelectField } from '../utility/forms';
 import { useForm } from '../utility/FormProvider';
+import { saturateByTenth } from '../theme/colorUtil';
 
 const ChartWrapper = styled.div`
   flex: 1;
   overflow: hidden;
 `;
 
-const chartData = {
-  labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
-  datasets: [
-    {
-      label: '# of Votes',
-      data: [12, 19, 3, 5, 2, 3],
-      backgroundColor: [
-        'rgba(255, 99, 132, 0.2)',
-        'rgba(54, 162, 235, 0.2)',
-        'rgba(255, 206, 86, 0.2)',
-        'rgba(75, 192, 192, 0.2)',
-        'rgba(153, 102, 255, 0.2)',
-        'rgba(255, 159, 64, 0.2)',
-      ],
-      borderColor: [
-        'rgba(255, 99, 132, 1)',
-        'rgba(54, 162, 235, 1)',
-        'rgba(255, 206, 86, 1)',
-        'rgba(75, 192, 192, 1)',
-        'rgba(153, 102, 255, 1)',
-        'rgba(255, 159, 64, 1)',
-      ],
-      borderWidth: 1,
-    },
-  ],
-};
+// const chartData = {
+//   labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
+//   datasets: [
+//     {
+//       label: '# of Votes',
+//       data: [12, 19, 3, 5, 2, 3],
+//       backgroundColor: [
+//         'rgba(255, 99, 132, 0.2)',
+//         'rgba(54, 162, 235, 0.2)',
+//         'rgba(255, 206, 86, 0.2)',
+//         'rgba(75, 192, 192, 0.2)',
+//         'rgba(153, 102, 255, 0.2)',
+//         'rgba(255, 159, 64, 0.2)',
+//       ],
+//       borderColor: [
+//         'rgba(255, 99, 132, 1)',
+//         'rgba(54, 162, 235, 1)',
+//         'rgba(255, 206, 86, 1)',
+//         'rgba(75, 192, 192, 1)',
+//         'rgba(153, 102, 255, 1)',
+//         'rgba(255, 159, 64, 1)',
+//       ],
+//       borderWidth: 1,
+//     },
+//   ],
+// };
 
-function createChartData(freeData, labelColumn, dataColumns) {
+function createChartData(freeData, labelColumn, dataColumns, colorSeed, chartType) {
   if (!freeData || !labelColumn || !dataColumns || dataColumns.length == 0) return {};
   const labels = _.uniq(freeData.rows.map((x) => x[labelColumn]));
+  const colors = randomcolor({
+    count: labels.length,
+    seed: colorSeed,
+  });
   const res = {
     labels: freeData.rows.map((x) => x[labelColumn]),
     datasets: dataColumns.map((dataColumn) => ({
       label: dataColumn,
       // data: [12, 19, 3, 5, 2, 3],
-      data: freeData.rows.map((x) => x[dataColumn]),
-      backgroundColor: [
-        'rgba(255, 99, 132, 0.2)',
-        'rgba(54, 162, 235, 0.2)',
-        'rgba(255, 206, 86, 0.2)',
-        'rgba(75, 192, 192, 0.2)',
-        'rgba(153, 102, 255, 0.2)',
-        'rgba(255, 159, 64, 0.2)',
-      ],
-      borderColor: [
-        'rgba(255, 99, 132, 1)',
-        'rgba(54, 162, 235, 1)',
-        'rgba(255, 206, 86, 1)',
-        'rgba(75, 192, 192, 1)',
-        'rgba(153, 102, 255, 1)',
-        'rgba(255, 159, 64, 1)',
-      ],
+      data: labels.map((label) =>
+        _.sum(freeData.rows.filter((row) => row[labelColumn] == label).map((row) => row[dataColumn]))
+      ),
+      backgroundColor: chartType != 'line' ? colors : null,
+      borderColor: chartType == 'line' ? colors : null,
+      // borderColor: colors, // .map(saturateByTenth),
+      // backgroundColor: [
+      //   'rgba(255, 99, 132, 0.2)',
+      //   'rgba(54, 162, 235, 0.2)',
+      //   'rgba(255, 206, 86, 0.2)',
+      //   'rgba(75, 192, 192, 0.2)',
+      //   'rgba(153, 102, 255, 0.2)',
+      //   'rgba(255, 159, 64, 0.2)',
+      // ],
+      // borderColor: [
+      //   'rgba(255, 99, 132, 1)',
+      //   'rgba(54, 162, 235, 1)',
+      //   'rgba(255, 206, 86, 1)',
+      //   'rgba(75, 192, 192, 1)',
+      //   'rgba(153, 102, 255, 1)',
+      //   'rgba(255, 159, 64, 1)',
+      // ],
       borderWidth: 1,
     })),
   };
@@ -91,7 +102,7 @@ export default function DataChart({ data }) {
         key={`${values.chartType}|${containerWidth}|${containerHeight}`}
         width={containerWidth}
         height={containerHeight}
-        data={createChartData(data, labelColumn, dataColumns)}
+        data={createChartData(data, labelColumn, dataColumns, values.colorSeed || 1, values.chartType)}
         type={values.chartType}
       />
     </ChartWrapper>
diff --git a/yarn.lock b/yarn.lock
index abc0be5a0..f92ebee14 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9618,6 +9618,11 @@ randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
   dependencies:
     safe-buffer "^5.1.0"
 
+randomcolor@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/randomcolor/-/randomcolor-0.6.2.tgz#7a57362ae1a1278439aeed2c15e5deb8ea33f56d"
+  integrity sha512-Mn6TbyYpFgwFuQ8KJKqf3bqqY9O1y37/0jgSK/61PUxV4QfIMv0+K2ioq8DfOjkBslcjwSzRfIDEXfzA9aCx7A==
+
 randomfill@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/randomfill/-/randomfill-1.0.4.tgz#c92196fc86ab42be983f1bf31778224931d61458"