diff --git a/Graphs/AbstractGraph.js b/Graphs/AbstractGraph.js
index 9cb77e3c..991fff5d 100644
--- a/Graphs/AbstractGraph.js
+++ b/Graphs/AbstractGraph.js
@@ -339,11 +339,11 @@ export default class AbstractGraph extends React.Component {
         return this.yLabelWidth;
     }
 
-    setDimensions(props, data = null, column = null, label = null, legendData = null) {
+    setDimensions(props, data = null, column = null, label = null, legendData = null, heatmapColor = {}) {
         const {
             graphWidth,
             graphHeight
-        } = this.getGraphDimension(label, legendData);
+        } = this.getGraphDimension(label, legendData, heatmapColor);
         
         this.setYlabelWidth(data ? data : props.data, column);
         this.setLeftMargin();
@@ -483,7 +483,7 @@ export default class AbstractGraph extends React.Component {
         return null;
     }
 
-    getGraphDimension = (label, filterData = null) => {
+    getGraphDimension = (label, filterData = null, heatmapColor = {}) => {
         const {
             height,
             width,
@@ -521,13 +521,13 @@ export default class AbstractGraph extends React.Component {
         } else {
             const lineHeight = this.getLegendLineHeight(legend);
             const legendData = filterData || data.filter((e, i) => data.findIndex(a => label(a) === label(e)) === i);
-            const legendCount = legendData.length;
-            const value = this.getLegendArea(filterData || data, label, { lineHeight, legendCount });
+            const legendCount = heatmapColor ? Object.keys(heatmapColor).length : legendData.length;
+            const value = this.getLegendArea(filterData || data, label, { lineHeight, legendCount, legendWidth: width });
             dimensions = {
                 ...dimensions,
                 graphHeight: height - value - margin.top,
                 legendHeight: value + margin.top,
-                legendWidth: width,
+                legendWidth: this.getAvailableWidth(),
                 labelWidth: labelTextWidth,
             }
         }
@@ -547,19 +547,29 @@ export default class AbstractGraph extends React.Component {
         return legend.circleSize * circleToPixel;
     }
 
-    renderLegend(data, legend, getColor, label, isVertical) {
+    renderLegend(data, legend, getColor, label, isVertical, heatmapColor = {}) {
         if (!legend.show)	
             return;
 
         // Getting unique labels
         data = data.filter((e, i) => data.findIndex(a => label(a) === label(e)) === i);
+        const legendData = [];
+        for (const key in heatmapColor) {
+            const filterData = data.filter(element => element.key === key);
+            if (!!filterData.length && filterData[0].key === key) {
+                legendData.push(filterData[0]);
+            } else {
+                legendData.push({ key, values: [] });
+            }
+        }
+
         const {
             legendHeight,
             legendWidth,
-        } = this.getGraphDimension(label, data);
+        } = this.getGraphDimension(label, legendData, heatmapColor);
 
         const legendContainerStyle = {
-            marginLeft: '5px',
+            marginLeft: this.props.width - legendWidth,
             marginTop: '5px',
             width: legendWidth,
             height: legendHeight,
@@ -572,31 +582,32 @@ export default class AbstractGraph extends React.Component {
             // Place the legends in the bottom left corner
             legendStyle = { ...legendStyle, alignSelf: 'flex-end', height: legendHeight }
         } else {
-            // Place legends horizontally, Maximum 3 legend 1 row
+            // Place legends horizontally, 20 is margin between legends
+            const highestLabel = this.getLongestLabel(legendData, label);
             legendStyle = {
                 ...legendStyle,
-                display: 'grid',
-                gridTemplateColumns: `repeat(auto-fit, minmax(${legendWidth / 3 - 5}px, 1fr))`,
+                display: 'grid',        
+                gridTemplateColumns: `repeat(auto-fit, ${highestLabel+20}px)`,
             }
         }
 
         return (
             <div className='legendContainer' style={legendContainerStyle}>
                 <div className='legend' style={legendStyle}>
-                    {this.getLegendContent(data, legend, getColor, label)}
+                    {this.getLegendContent(legendData, legend, getColor, label, heatmapColor)}
                 </div>
             </div>
         );
     }
 
-    getLegendContent(data, legend, getColor, label) {
+    getLegendContent(data, legend, getColor, label, heatmapColor) {
         const {
             fontColor
         } = this.getConfiguredProperties();
 
         const {
             labelWidth
-        } = this.getGraphDimension(label, data);
+        } = this.getGraphDimension(label, data, heatmapColor);
 
         const lineHeight = this.getLegendLineHeight(legend);
 
@@ -682,9 +693,11 @@ export default class AbstractGraph extends React.Component {
         const highestLabel = this.getLongestLabel(data, label);
 
         if (legend) {
-            const { legendCount, lineHeight } = legend;
-            //Maximum 3 legend 1 row
-            const legendRow = Math.ceil(legendCount / 3);
+            const { legendCount, lineHeight, legendWidth } = legend;
+            //Caluting legendContainer height, 20 is margin between margin label.
+            let legendRow = Math.ceil( legendCount * (highestLabel + 20) );
+            legendRow = Math.ceil(legendRow / legendWidth)
+            
             return legendRow * lineHeight;
         }
 
diff --git a/Graphs/AreaGraph/index.js b/Graphs/AreaGraph/index.js
index 300b74bb..494f9713 100644
--- a/Graphs/AreaGraph/index.js
+++ b/Graphs/AreaGraph/index.js
@@ -121,7 +121,9 @@ const AreaGraph = (props) => {
                 renderLegend({
                     legend,
                     height,
-                    customLegendLabel
+                    customLegendLabel,
+                    margin,
+                    containerWidth: width
                 })
             }
             {
diff --git a/Graphs/Components/utils/Legend/StandardLegend.js b/Graphs/Components/utils/Legend/StandardLegend.js
index 4cd203a1..4ae3fd79 100644
--- a/Graphs/Components/utils/Legend/StandardLegend.js
+++ b/Graphs/Components/utils/Legend/StandardLegend.js
@@ -1,5 +1,7 @@
 import React from 'react';
 import { styled } from '@material-ui/core/styles';
+import * as d3 from "d3";
+import max from 'lodash/max';
 
 const Container = styled('div')({
     display: 'flex',
@@ -12,11 +14,20 @@ const Container = styled('div')({
 
 const Item = styled('div')({
     color: ({ color } = {}) => color,
-    flexBasis: '50%',
+    flexBasis: ({ legendWidth }) => legendWidth,
     padding: '0.15rem 0',
 });
 
-export default ({ payload: legends, labelColumn, legend, customLegendLabel }) => {
+const labelSize = (label, LabelFont = '0.6rem') => {
+    const container = d3.select('body').append('svg');
+    container.append('text').text(label).style("font-size", LabelFont);
+    const dimension = container.node().getBBox();
+    container.remove();
+
+    return dimension.width + 30;
+}
+
+export default ({ payload: legends, labelColumn, legend, customLegendLabel, containerWidth }) => {
     if (legends && legends[0].value === undefined) {
         return false;
     }
@@ -35,11 +46,19 @@ export default ({ payload: legends, labelColumn, legend, customLegendLabel }) =>
         });
     }
 
+    const highestLabel = max(legends.map( ({payload, value}) => {
+        const label = labelColumn ? payload[labelColumn] : value;
+        
+        return labelSize(label);
+    }));
+
+    const legendWidth = containerWidth ? `${highestLabel/containerWidth * 100}%` : '50%';
+
     return (
         <Container legend={legend}>
             {
                 legends.map(({ color, payload, value, props: { fill, name: { xVal } = {} } = {} }, index) => (
-                    <Item key={`legend-${index}`} color={color || fill}>
+                    <Item key={`legend-${index}`} color={color || fill} legendWidth={legendWidth}>
                         <svg height='0.8rem' width='0.9rem'>
                             <circle cx="7" cy="9" r="3.5" fill={color || fill} />
                         </svg>
diff --git a/Graphs/Components/utils/Legend/index.js b/Graphs/Components/utils/Legend/index.js
index 4bac5faa..c3fb6072 100644
--- a/Graphs/Components/utils/Legend/index.js
+++ b/Graphs/Components/utils/Legend/index.js
@@ -7,13 +7,14 @@ import { LEGEND_SEPARATE } from '../../../../constants';
 import * as customLegends from './export';
 import StandardLegend from './StandardLegend';
 
-export default ({ legend, height, type, ...rest }) => {
+export default ({ legend, height, type, margin, ...rest }) => {
     let Component = type ? customLegends[type] || StandardLegend : StandardLegend;
     const legendHeight = legend.separate ? (legend.separate * height) / 100 : (LEGEND_SEPARATE * height) / 100;
+    const marginLeft = margin ? margin.left : 0;
     if (legend && legend.show) {
         return (
             <LegendComponent
-                wrapperStyle={{ overflowY: 'auto', maxHeight: legendHeight, bottom: 5 }}
+                wrapperStyle={{ overflowY: 'auto', maxHeight: legendHeight, bottom: 5, marginLeft }}
                 content={(props) => (
                     <Component {...props} legend={legend} {...rest} />
                 )}
diff --git a/Graphs/HeatmapGraph/index.js b/Graphs/HeatmapGraph/index.js
index c357e5ed..15975104 100644
--- a/Graphs/HeatmapGraph/index.js
+++ b/Graphs/HeatmapGraph/index.js
@@ -61,14 +61,15 @@ class HeatmapGraph extends XYGraph {
         } = props
 
         const {
-            yColumn
+            yColumn,
+            heatmapColor,
         } = this.getConfiguredProperties()
 
         if (!data || !data.length)
             return
 
         this.parseData(props)
-        this.setDimensions(props, this.getFilterData(), yColumn, (d) => d["key"], this.getCellColumnData())
+        this.setDimensions(props, this.getFilterData(), yColumn, (d) => d["key"], this.getCellColumnData(), heatmapColor)
         this.configureAxis({
             data: this.getFilterData()
         })
@@ -364,7 +365,8 @@ class HeatmapGraph extends XYGraph {
             colorColumn,
             colors,
             legendColumn,
-            emptyBoxColor
+            emptyBoxColor,
+            heatmapColor,
         } = this.getConfiguredProperties()
 
         const colorScale = this.getMappedScaleColor(this.getFilterData(), legendColumn)
@@ -382,6 +384,9 @@ class HeatmapGraph extends XYGraph {
             if (value === 'Empty') {
                 return emptyBoxColor
             }
+            if (heatmapColor.hasOwnProperty(value)) {
+                return heatmapColor[value]
+            }
             return colorScale ? colorScale(value) : stroke.color || colors[0]
         }
 
@@ -574,13 +579,14 @@ class HeatmapGraph extends XYGraph {
 
         const {
             margin,
-            legend
+            legend,
+            heatmapColor
         } = this.getConfiguredProperties();
 
         const {
             graphHeight,
             graphWidth,
-        } = this.getGraphDimension(this.getLegendFn());
+        } = this.getGraphDimension(this.getLegendFn(), null, heatmapColor);
 
         const graphStyle = {
             width: graphWidth,
@@ -595,7 +601,7 @@ class HeatmapGraph extends XYGraph {
             <div className='heatmap-graph'>
                 <div>{this.tooltip}</div>
                 <div style={{ height, width, display: this.checkIsVerticalLegend() ? 'flex' : 'inline-grid' }}>
-                    {this.renderLegend(this.getCellColumnData(), legend, this.getColor(), (d) => d["key"], this.checkIsVerticalLegend())}
+                    {this.renderLegend(this.getCellColumnData(), legend, this.getColor(), (d) => d["key"], this.checkIsVerticalLegend(), heatmapColor)}
                     <div className='graphContainer' style={graphStyle}>
                         <svg width={graphWidth} height={graphHeight}>
                             <g ref={node => this.node = node}>