diff --git a/webapp/app/assets/less/variable.less b/webapp/app/assets/less/variable.less
index 58b456dff..216965456 100644
--- a/webapp/app/assets/less/variable.less
+++ b/webapp/app/assets/less/variable.less
@@ -78,6 +78,10 @@
         }
       }
     }
+    .ant-calendar-picker {
+      width: 100% !important;
+      min-width: auto !important;
+    }
   }
   &.small {
     :global {
diff --git a/webapp/app/components/Control/Control.less b/webapp/app/components/Control/Control.less
index 5c7f574ec..6aa2cccbf 100644
--- a/webapp/app/components/Control/Control.less
+++ b/webapp/app/components/Control/Control.less
@@ -82,6 +82,7 @@
   flex: 1;
   display: flex;
   flex-direction: column;
+  min-width: 0;
 
   .itemList {
     flex: 2;
@@ -180,9 +181,7 @@
 
 .controlForm {
   flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
+  overflow-y: auto;
   .controlFormAntdOverride;
 
   .optionList {
diff --git a/webapp/app/components/Control/Control/Date.tsx b/webapp/app/components/Control/Control/Date.tsx
index c677560ed..ec495e86b 100644
--- a/webapp/app/components/Control/Control/Date.tsx
+++ b/webapp/app/components/Control/Control/Date.tsx
@@ -25,7 +25,6 @@ import { DatePicker } from 'antd'
 const { WeekPicker, MonthPicker } = DatePicker
 const MultiDatePicker = React.lazy(() => import('components/MultiDatePicker'))
 import { DatePickerFormats } from '../constants'
-import styles from '../Panel/Layouts/Layouts.less'
 
 interface IDateProps {
   control: IControlBase
@@ -38,15 +37,6 @@ const Date: FC<IDateProps> = ({ control, value, size, onChange }, ref) => {
   const { Week, Month, Year, Datetime, DatetimeMinute } = DatePickerFormats
   const { multiple, dateFormat } = control
 
-  const datetimePickerChange = useCallback(
-    (val) => {
-      if (!val || (Array.isArray(val) && !val.length)) {
-        onChange(val)
-      }
-    },
-    [onChange]
-  )
-
   const controlled = !!onChange
   if (multiple) {
     value = value || ''
@@ -66,7 +56,6 @@ const Date: FC<IDateProps> = ({ control, value, size, onChange }, ref) => {
         return (
           <WeekPicker
             ref={ref}
-            className={styles.controlComponent}
             placeholder="请选择"
             size={size}
             {...(controlled && { value, onChange })}
@@ -77,7 +66,6 @@ const Date: FC<IDateProps> = ({ control, value, size, onChange }, ref) => {
         return (
           <MonthPicker
             ref={ref}
-            className={styles.controlComponent}
             placeholder="请选择"
             format={dateFormat}
             size={size}
@@ -89,15 +77,12 @@ const Date: FC<IDateProps> = ({ control, value, size, onChange }, ref) => {
         return (
           <DatePicker
             ref={ref}
-            className={styles.controlComponent}
             placeholder="请选择"
             showTime={isDatetimePicker}
             format={dateFormat}
             size={size}
             {...(controlled && { value })}
-            {...(controlled && {
-              onChange: isDatetimePicker ? datetimePickerChange : onChange
-            })}
+            {...(controlled && { onChange })}
             {...(controlled && { onOk: onChange })}
           />
         )
diff --git a/webapp/app/components/Control/Control/DateRange.tsx b/webapp/app/components/Control/Control/DateRange.tsx
index 2aebf1590..5b102238a 100644
--- a/webapp/app/components/Control/Control/DateRange.tsx
+++ b/webapp/app/components/Control/Control/DateRange.tsx
@@ -23,7 +23,6 @@ import { IControlBase } from '../types'
 import { DatePicker } from 'antd'
 const { RangePicker } = DatePicker
 import { DatePickerFormats } from '../constants'
-import styles from '../Panel/Layouts/Layouts.less'
 
 interface IDateRangeProps {
   control: IControlBase
@@ -38,24 +37,14 @@ const DateRange: FC<IDateRangeProps> = ({ control, value, size, onChange }) => {
   const { Datetime, DatetimeMinute } = DatePickerFormats
   const isDatetimePicker = [Datetime, DatetimeMinute].includes(dateFormat)
 
-  const datetimePickerChange = useCallback(
-    (val) => {
-      if (!val || (Array.isArray(val) && !val.length)) {
-        onChange(val)
-      }
-    },
-    [onChange]
-  )
-
   return (
     <RangePicker
-      className={styles.controlComponent}
       placeholder={placeholder}
       value={value}
       size={size}
       showTime={isDatetimePicker}
       format={dateFormat}
-      onChange={isDatetimePicker ? datetimePickerChange : onChange}
+      onChange={onChange}
       onOk={onChange}
     />
   )
diff --git a/webapp/app/components/Control/Panel/Layouts/Layouts.less b/webapp/app/components/Control/Panel/Layouts/Layouts.less
index ba637af28..2e1275dbf 100644
--- a/webapp/app/components/Control/Panel/Layouts/Layouts.less
+++ b/webapp/app/components/Control/Panel/Layouts/Layouts.less
@@ -83,7 +83,3 @@
   .antFormItemLabelSmall;
   .antFormItemStyleWithoutForm;
 }
-
-.controlComponent {
-  width: 100% !important;
-}
diff --git a/webapp/app/components/SplitPane/SplitPane.less b/webapp/app/components/SplitPane/SplitPane.less
index afa1d1657..924793646 100644
--- a/webapp/app/components/SplitPane/SplitPane.less
+++ b/webapp/app/components/SplitPane/SplitPane.less
@@ -44,15 +44,18 @@
 
     &-1 {
       display: flex;
+      min-height: 0;
 
       & > .react-resizable {
         display: flex;
+        min-height: 0;
       }
     }
 
     &-2 {
       flex: 1;
       display: flex;
+      min-height: 0;
       overflow: hidden;
 
       & > .react-resizable {
diff --git a/webapp/app/containers/Dashboard/Grid.tsx b/webapp/app/containers/Dashboard/Grid.tsx
index 0bfaf0311..dc6ef7cf9 100644
--- a/webapp/app/containers/Dashboard/Grid.tsx
+++ b/webapp/app/containers/Dashboard/Grid.tsx
@@ -78,6 +78,7 @@ const {
   renderDashboardItem,
   resizeDashboardItem,
   resizeAllDashboardItem,
+  renderChartError,
   openSharePanel,
   drillDashboardItem,
   deleteDrillHistory,
@@ -393,9 +394,9 @@ export class Grid extends React.Component<IGridProps & RouteComponentWithParams,
         const waitingItems = currentItems.filter((item) => !currentItemsInfo[item.id].rendered)
 
         if (waitingItems.length) {
+          const { offsetHeight, scrollTop } = this.containerBody
           waitingItems.forEach((item) => {
             const itemTop = this.calcItemTop(item.y)
-            const { offsetHeight, scrollTop } = this.containerBody
 
             if (itemTop - scrollTop < offsetHeight) {
               onRenderDashboardItem(item.id)
@@ -865,6 +866,7 @@ export class Grid extends React.Component<IGridProps & RouteComponentWithParams,
       onLoadDashboardItemData,
       onLoadBatchDataWithControlValues,
       onResizeDashboardItem,
+      onRenderChartError,
       onSetFullScreenPanelItemId,
       onMonitoredSyncDataAction,
       onMonitoredSearchDataAction
@@ -975,6 +977,7 @@ export class Grid extends React.Component<IGridProps & RouteComponentWithParams,
               onShowDrillEdit={this.showDrillDashboardItemForm}
               onDeleteDashboardItem={this.deleteItem}
               onResizeDashboardItem={onResizeDashboardItem}
+              onRenderChartError={onRenderChartError}
               onOpenSharePanel={onOpenSharePanel}
               onDownloadCsv={this.initiateWidgetDownloadTask}
               onTurnOffInteract={this.turnOffInteract}
@@ -1250,6 +1253,8 @@ export function mapDispatchToProps (dispatch) {
     onRenderDashboardItem: (itemId: number) => dispatch(renderDashboardItem(itemId)),
     onResizeDashboardItem: (itemId: number) => dispatch(resizeDashboardItem(itemId)),
     onResizeAllDashboardItem: () => dispatch(resizeAllDashboardItem()),
+    onRenderChartError: (itemId: number, error: Error) =>
+      dispatch(renderChartError(itemId, error)),
     onOpenSharePanel: (
       id: number,
       type: SharePanelType,
diff --git a/webapp/app/containers/Dashboard/actions.ts b/webapp/app/containers/Dashboard/actions.ts
index 8972da0bf..37d91459c 100644
--- a/webapp/app/containers/Dashboard/actions.ts
+++ b/webapp/app/containers/Dashboard/actions.ts
@@ -36,7 +36,7 @@ import { DownloadTypes } from '../App/constants'
 const CancelToken = axios.CancelToken
 
 export const DashboardActions = {
-  addDashboardItems (portalId, items, resolve) {
+  addDashboardItems(portalId, items, resolve) {
     return {
       type: ActionTypes.ADD_DASHBOARD_ITEMS,
       payload: {
@@ -47,7 +47,7 @@ export const DashboardActions = {
     }
   },
 
-  deleteDashboardItem (id, resolve) {
+  deleteDashboardItem(id, resolve) {
     return {
       type: ActionTypes.DELETE_DASHBOARD_ITEM,
       payload: {
@@ -57,13 +57,13 @@ export const DashboardActions = {
     }
   },
 
-  clearCurrentDashboard () {
+  clearCurrentDashboard() {
     return {
       type: ActionTypes.CLEAR_CURRENT_DASHBOARD
     }
   },
 
-  loadDashboardItemData (
+  loadDashboardItemData(
     renderType: RenderType,
     itemId: number,
     queryConditions?: Partial<IQueryConditions>
@@ -79,7 +79,7 @@ export const DashboardActions = {
     }
   },
 
-  dashboardItemDataLoaded (
+  dashboardItemDataLoaded(
     renderType: RenderType,
     itemId: number,
     requestParams: IDataRequestParams,
@@ -98,7 +98,7 @@ export const DashboardActions = {
     }
   },
 
-  loadDashboardItemDataFail (itemId: number, errorMessage: string) {
+  loadDashboardItemDataFail(itemId: number, errorMessage: string) {
     return {
       type: ActionTypes.LOAD_DASHBOARD_ITEM_DATA_FAILURE,
       payload: {
@@ -108,7 +108,7 @@ export const DashboardActions = {
     }
   },
 
-  loadBatchDataWithControlValues (
+  loadBatchDataWithControlValues(
     type: ControlPanelTypes,
     relatedItems: number[],
     formValues?: object,
@@ -126,11 +126,7 @@ export const DashboardActions = {
     }
   },
 
-  initiateDownloadTask (
-    type: DownloadTypes,
-    id?: number,
-    itemId?: number
-  ) {
+  initiateDownloadTask(type: DownloadTypes, id?: number, itemId?: number) {
     return {
       type: ActionTypes.INITIATE_DOWNLOAD_TASK,
       payload: {
@@ -141,7 +137,7 @@ export const DashboardActions = {
     }
   },
 
-  DownloadTaskInitiated (
+  DownloadTaskInitiated(
     type: DownloadTypes,
     statistic: IDataDownloadStatistic[],
     itemId?: number
@@ -156,11 +152,7 @@ export const DashboardActions = {
     }
   },
 
-  initiateDownloadTaskFail (
-    error,
-    type: DownloadTypes,
-    itemId?: number
-  ) {
+  initiateDownloadTaskFail(error, type: DownloadTypes, itemId?: number) {
     return {
       type: ActionTypes.INITIATE_DOWNLOAD_TASK_FAILURE,
       payload: {
@@ -171,7 +163,7 @@ export const DashboardActions = {
     }
   },
 
-  loadDashboardDetail (projectId, portalId, dashboardId) {
+  loadDashboardDetail(projectId, portalId, dashboardId) {
     return {
       type: ActionTypes.LOAD_DASHBOARD_DETAIL,
       payload: {
@@ -182,7 +174,7 @@ export const DashboardActions = {
     }
   },
 
-  dashboardDetailLoaded (
+  dashboardDetailLoaded(
     dashboard: IDashboard,
     items: IDashboardItem[],
     widgets: IWidgetFormed[],
@@ -199,13 +191,13 @@ export const DashboardActions = {
     }
   },
 
-  loadDashboardDetailFail () {
+  loadDashboardDetailFail() {
     return {
       type: ActionTypes.LOAD_DASHBOARD_DETAIL_FAILURE
     }
   },
 
-  dashboardItemsAdded (items: IDashboardItem[], widgets: IWidgetFormed[]) {
+  dashboardItemsAdded(items: IDashboardItem[], widgets: IWidgetFormed[]) {
     return {
       type: ActionTypes.ADD_DASHBOARD_ITEMS_SUCCESS,
       payload: {
@@ -215,13 +207,13 @@ export const DashboardActions = {
     }
   },
 
-  addDashboardItemsFail () {
+  addDashboardItemsFail() {
     return {
       type: ActionTypes.ADD_DASHBOARD_ITEMS_FAILURE
     }
   },
 
-  editDashboardItem (portalId, item, resolve) {
+  editDashboardItem(portalId, item, resolve) {
     return {
       type: ActionTypes.EDIT_DASHBOARD_ITEM,
       payload: {
@@ -232,7 +224,7 @@ export const DashboardActions = {
     }
   },
 
-  dashboardItemEdited (result) {
+  dashboardItemEdited(result) {
     return {
       type: ActionTypes.EDIT_DASHBOARD_ITEM_SUCCESS,
       payload: {
@@ -241,13 +233,13 @@ export const DashboardActions = {
     }
   },
 
-  editDashboardItemFail () {
+  editDashboardItemFail() {
     return {
       type: ActionTypes.EDIT_DASHBOARD_ITEM_FAILURE
     }
   },
 
-  editDashboardItems (portalId, items) {
+  editDashboardItems(portalId, items) {
     return {
       type: ActionTypes.EDIT_DASHBOARD_ITEMS,
       payload: {
@@ -257,7 +249,7 @@ export const DashboardActions = {
     }
   },
 
-  dashboardItemsEdited (items) {
+  dashboardItemsEdited(items) {
     return {
       type: ActionTypes.EDIT_DASHBOARD_ITEMS_SUCCESS,
       payload: {
@@ -266,13 +258,13 @@ export const DashboardActions = {
     }
   },
 
-  editDashboardItemsFail () {
+  editDashboardItemsFail() {
     return {
       type: ActionTypes.EDIT_DASHBOARD_ITEMS_FAILURE
     }
   },
 
-  dashboardItemDeleted (id) {
+  dashboardItemDeleted(id) {
     return {
       type: ActionTypes.DELETE_DASHBOARD_ITEM_SUCCESS,
       payload: {
@@ -281,13 +273,13 @@ export const DashboardActions = {
     }
   },
 
-  deleteDashboardItemFail () {
+  deleteDashboardItemFail() {
     return {
       type: ActionTypes.DELETE_DASHBOARD_ITEM_FAILURE
     }
   },
 
-  loadDashboardShareLink (id, authUser?) {
+  loadDashboardShareLink(id, authUser?) {
     return {
       type: ActionTypes.LOAD_DASHBOARD_SHARE_LINK,
       payload: {
@@ -297,7 +289,7 @@ export const DashboardActions = {
     }
   },
 
-  dashboardShareLinkLoaded (shareToken) {
+  dashboardShareLinkLoaded(shareToken) {
     return {
       type: ActionTypes.LOAD_DASHBOARD_SHARE_LINK_SUCCESS,
       payload: {
@@ -306,7 +298,7 @@ export const DashboardActions = {
     }
   },
 
-  dashboardAuthorizedShareLinkLoaded (authorizedShareToken) {
+  dashboardAuthorizedShareLinkLoaded(authorizedShareToken) {
     return {
       type: ActionTypes.LOAD_DASHBOARD_AUTHORIZED_SHARE_LINK_SUCCESS,
       payload: {
@@ -315,13 +307,13 @@ export const DashboardActions = {
     }
   },
 
-  loadDashboardShareLinkFail () {
+  loadDashboardShareLinkFail() {
     return {
       type: ActionTypes.LOAD_DASHBOARD_SHARE_LINK_FAILURE
     }
   },
 
-  loadWidgetShareLink (id, itemId, authUser?) {
+  loadWidgetShareLink(id, itemId, authUser?) {
     return {
       type: ActionTypes.LOAD_WIDGET_SHARE_LINK,
       payload: {
@@ -332,7 +324,7 @@ export const DashboardActions = {
     }
   },
 
-  widgetShareLinkLoaded (shareToken, itemId) {
+  widgetShareLinkLoaded(shareToken, itemId) {
     return {
       type: ActionTypes.LOAD_WIDGET_SHARE_LINK_SUCCESS,
       payload: {
@@ -342,7 +334,7 @@ export const DashboardActions = {
     }
   },
 
-  widgetAuthorizedShareLinkLoaded (shareToken, itemId) {
+  widgetAuthorizedShareLinkLoaded(shareToken, itemId) {
     return {
       type: ActionTypes.LOAD_WIDGET_AUTHORIZED_SHARE_LINK_SUCCESS,
       payload: {
@@ -352,7 +344,7 @@ export const DashboardActions = {
     }
   },
 
-  loadWidgetShareLinkFail (itemId) {
+  loadWidgetShareLinkFail(itemId) {
     return {
       type: ActionTypes.LOAD_WIDGET_SHARE_LINK_FAILURE,
       payload: {
@@ -361,7 +353,7 @@ export const DashboardActions = {
     }
   },
 
-  openSharePanel (id, type, title, itemId?) {
+  openSharePanel(id, type, title, itemId?) {
     return {
       type: ActionTypes.OPEN_SHARE_PANEL,
       payload: {
@@ -373,13 +365,13 @@ export const DashboardActions = {
     }
   },
 
-  closeSharePanel () {
+  closeSharePanel() {
     return {
       type: ActionTypes.CLOSE_SHARE_PANEL
     }
   },
 
-  loadWidgetCsv (itemId, widgetId, requestParams) {
+  loadWidgetCsv(itemId, widgetId, requestParams) {
     return {
       type: ActionTypes.LOAD_WIDGET_CSV,
       payload: {
@@ -390,7 +382,7 @@ export const DashboardActions = {
     }
   },
 
-  widgetCsvLoaded (itemId) {
+  widgetCsvLoaded(itemId) {
     return {
       type: ActionTypes.LOAD_WIDGET_CSV_SUCCESS,
       payload: {
@@ -399,7 +391,7 @@ export const DashboardActions = {
     }
   },
 
-  loadWidgetCsvFail (itemId) {
+  loadWidgetCsvFail(itemId) {
     return {
       type: ActionTypes.LOAD_WIDGET_CSV_FAILURE,
       payload: {
@@ -408,7 +400,7 @@ export const DashboardActions = {
     }
   },
 
-  renderDashboardItem (itemId) {
+  renderDashboardItem(itemId) {
     return {
       type: ActionTypes.RENDER_DASHBOARDITEM,
       payload: {
@@ -417,7 +409,7 @@ export const DashboardActions = {
     }
   },
 
-  resizeDashboardItem (itemId) {
+  resizeDashboardItem(itemId) {
     return {
       type: ActionTypes.RESIZE_DASHBOARDITEM,
       payload: {
@@ -426,13 +418,23 @@ export const DashboardActions = {
     }
   },
 
-  resizeAllDashboardItem () {
+  resizeAllDashboardItem() {
     return {
       type: ActionTypes.RESIZE_ALL_DASHBOARDITEM
     }
   },
 
-  drillDashboardItem (itemId, drillHistory) {
+  renderChartError(itemId: number, error: Error) {
+    return {
+      type: ActionTypes.RENDER_CHART_ERROR,
+      payload: {
+        itemId,
+        error
+      }
+    }
+  },
+
+  drillDashboardItem(itemId, drillHistory) {
     return {
       type: ActionTypes.DRILL_DASHBOARDITEM,
       payload: {
@@ -442,7 +444,7 @@ export const DashboardActions = {
     }
   },
 
-  deleteDrillHistory (itemId, index) {
+  deleteDrillHistory(itemId, index) {
     return {
       type: ActionTypes.DELETE_DRILL_HISTORY,
       payload: {
@@ -452,7 +454,7 @@ export const DashboardActions = {
     }
   },
 
-  drillPathsetting (itemId, history) {
+  drillPathsetting(itemId, history) {
     return {
       type: ActionTypes.DRILL_PATH_SETTING,
       payload: {
@@ -462,7 +464,7 @@ export const DashboardActions = {
     }
   },
 
-  selectDashboardItemChart (itemId, renderType, selectedItems) {
+  selectDashboardItemChart(itemId, renderType, selectedItems) {
     return {
       type: ActionTypes.SELECT_DASHBOARD_ITEM_CHART,
       payload: {
@@ -473,25 +475,25 @@ export const DashboardActions = {
     }
   },
 
-  monitoredSyncDataAction () {
+  monitoredSyncDataAction() {
     return {
       type: ActionTypes.MONITORED_SYNC_DATA_ACTION
     }
   },
 
-  monitoredSearchDataAction () {
+  monitoredSearchDataAction() {
     return {
       type: ActionTypes.MONITORED_SEARCH_DATA_ACTION
     }
   },
 
-  monitoredLinkageDataAction () {
+  monitoredLinkageDataAction() {
     return {
       type: ActionTypes.MONITORED_LINKAGE_DATA_ACTION
     }
   },
 
-  setFullScreenPanelItemId (itemId) {
+  setFullScreenPanelItemId(itemId) {
     return {
       type: ActionTypes.SET_FULL_SCREEN_PANEL_ITEM_ID,
       payload: {
diff --git a/webapp/app/containers/Dashboard/components/DashboardItem.tsx b/webapp/app/containers/Dashboard/components/DashboardItem.tsx
index f3b0c6618..51fb405a0 100644
--- a/webapp/app/containers/Dashboard/components/DashboardItem.tsx
+++ b/webapp/app/containers/Dashboard/components/DashboardItem.tsx
@@ -81,6 +81,7 @@ interface IDashboardItemProps {
   onShowDrillEdit?: (itemId: number) => (e: React.MouseEvent<HTMLSpanElement>) => void
   onDeleteDashboardItem?: (itemId: number) => () => void
   onResizeDashboardItem: (itemId: number) => void
+  onRenderChartError: (itemId: number, error: Error) => void
   onOpenSharePanel?: (id: number, type: SharePanelType, title: string, itemId?: number) => void
   onDownloadCsv: (itemId: number) => void
   onTurnOffInteract: (itemId: number) => void
@@ -461,6 +462,11 @@ export class DashboardItem extends React.PureComponent<IDashboardItemProps, IDas
     }
   }
 
+  private renderChartError = (error: Error) => {
+    const { itemId, onRenderChartError } = this.props
+    onRenderChartError(itemId, error)
+  }
+
   public render () {
     const {
       alias,
@@ -728,7 +734,8 @@ export class DashboardItem extends React.PureComponent<IDashboardItemProps, IDas
               whichDataDrillBrushed={this.state.whichDataDrillBrushed}
               onSelectChartsItems={this.selectChartsItems}
               selectedItems={this.props.selectedItems}
-            //  onHideDrillPanel={this.onHideDrillPanel}
+              // onHideDrillPanel={this.onHideDrillPanel}
+              onError={this.renderChartError}
             />
             {dataDrillHistory}
           </div>
diff --git a/webapp/app/containers/Dashboard/constants.ts b/webapp/app/containers/Dashboard/constants.ts
index 686bc1dc3..7c7592533 100644
--- a/webapp/app/containers/Dashboard/constants.ts
+++ b/webapp/app/containers/Dashboard/constants.ts
@@ -74,6 +74,7 @@ enum Types {
   RENDER_DASHBOARDITEM = 'davinci/Dashboard/RENDER_DASHBOARDITEM',
   RESIZE_DASHBOARDITEM = 'davinci/Dashboard/RESIZE_DASHBOARDITEM',
   RESIZE_ALL_DASHBOARDITEM = 'davinci/Dashboard/RESIZE_ALL_DASHBOARDITEM',
+  RENDER_CHART_ERROR = 'davinci/Dashboard/RENDER_CHART_ERROR',
   DRILL_DASHBOARDITEM = 'davinci/Dashboard/DRILL_DASHBOARDITEM',
   DELETE_DRILL_HISTORY = 'davinci/Dashboard/DELETE_DRILL_HISTORY',
   DRILL_PATH_SETTING = 'davinci/Dashboard/DRILL_PATH_SETTING',
diff --git a/webapp/app/containers/Dashboard/reducer.ts b/webapp/app/containers/Dashboard/reducer.ts
index 42a5b3b1f..61ef49da3 100644
--- a/webapp/app/containers/Dashboard/reducer.ts
+++ b/webapp/app/containers/Dashboard/reducer.ts
@@ -119,7 +119,9 @@ const dashboardReducer = (
           action.payload.items
         )
         action.payload.items.forEach((item) => {
-          const relatedWidget = action.payload.widgets.find((w) => w.id === item.widgetId)
+          const relatedWidget = action.payload.widgets.find(
+            (w) => w.id === item.widgetId
+          )
           draft.currentItemsInfo[item.id] = getInitialItemInfo(relatedWidget)
         })
         break
@@ -211,7 +213,7 @@ const dashboardReducer = (
           draft.currentItemsInfo[action.payload.itemId].loading = false
           draft.currentItemsInfo[action.payload.itemId].errorMessage =
             action.payload.errorMessage
-          }
+        }
         break
 
       case ActionTypes.LOAD_BATCH_DATA_WITH_CONTROL_VALUES:
@@ -370,6 +372,12 @@ const dashboardReducer = (
         })
         break
 
+      case ActionTypes.RENDER_CHART_ERROR:
+        draft.currentItemsInfo[
+          action.payload.itemId
+        ].errorMessage = action.payload.error.toString()
+        break
+
       case ActionTypes.SET_FULL_SCREEN_PANEL_ITEM_ID:
         draft.fullScreenPanelItemId = action.payload.itemId
         if (action.payload.itemId) {
diff --git a/webapp/app/containers/Widget/components/Chart/Chart.tsx b/webapp/app/containers/Widget/components/Chart/Chart.tsx
index 0912e7918..dc18e173b 100644
--- a/webapp/app/containers/Widget/components/Chart/Chart.tsx
+++ b/webapp/app/containers/Widget/components/Chart/Chart.tsx
@@ -1,29 +1,33 @@
-import * as React from 'react'
+import React from 'react'
 import { IChartProps } from './index'
 import chartlibs from '../../config/chart'
-import * as echarts from 'echarts/lib/echarts'
+import echarts from 'echarts/lib/echarts'
 import { ECharts } from 'echarts'
 import chartOptionGenerator from '../../render/chart'
-import { getTriggeringRecord } from '../util'
 const styles = require('./Chart.less')
 
-
 export class Chart extends React.PureComponent<IChartProps> {
   private container: HTMLDivElement = null
   private instance: ECharts
-  constructor (props) {
+  constructor(props) {
     super(props)
   }
-  public componentDidMount () {
+  public componentDidMount() {
     this.renderChart(this.props)
   }
 
-  public componentDidUpdate () {
+  public componentDidUpdate() {
     this.renderChart(this.props)
   }
 
   private renderChart = (props: IChartProps) => {
-    const { selectedChart, renderType, getDataDrillDetail, isDrilling, onSelectChartsItems, onDoInteract, onCheckTableInteract } = props
+    const {
+      selectedChart,
+      renderType,
+      getDataDrillDetail,
+      isDrilling,
+      onError
+    } = props
 
     if (renderType === 'loading') {
       return
@@ -40,40 +44,51 @@ export class Chart extends React.PureComponent<IChartProps> {
       }
     }
 
-    this.instance.setOption(
-      chartOptionGenerator(
-        chartlibs.find((cl) => cl.id === selectedChart).name,
-        props,
-        {
-          instance: this.instance,
-          isDrilling,
-          getDataDrillDetail,
-          selectedItems: this.props.selectedItems
-        }
+    try {
+      this.instance.setOption(
+        chartOptionGenerator(
+          chartlibs.find((cl) => cl.id === selectedChart).name,
+          props,
+          {
+            instance: this.instance,
+            isDrilling,
+            getDataDrillDetail,
+            selectedItems: this.props.selectedItems
+          }
+        )
       )
-    )
 
+      // if (onDoInteract) {
+      //   this.instance.off('click')
+      //   this.instance.on('click', (params) => {
+      //     const isInteractiveChart = onCheckTableInteract()
+      //     if (isInteractiveChart) {
+      //       const triggerData = getTriggeringRecord(params, seriesData)
+      //       onDoInteract(triggerData)
+      //     }
+      //   })
+      // }
 
-    // if (onDoInteract) {
-    //   this.instance.off('click')
-    //   this.instance.on('click', (params) => {
-    //     const isInteractiveChart = onCheckTableInteract()
-    //     if (isInteractiveChart) {
-    //       const triggerData = getTriggeringRecord(params, seriesData)
-    //       onDoInteract(triggerData)
-    //     }
-    //   })
-    // }
-
-    this.instance.off('click')
-    this.instance.on('click', (params) => {
-      this.collectSelectedItems(params)
-    })
-    this.instance.resize()
+      this.instance.off('click')
+      this.instance.on('click', (params) => {
+        this.collectSelectedItems(params)
+      })
+      this.instance.resize()
+    } catch (error) {
+      if (onError) {
+        onError(error)
+      }
+    }
   }
 
   public collectSelectedItems = (params) => {
-    const { data, onSelectChartsItems, selectedChart, onDoInteract, onCheckTableInteract } = this.props
+    const {
+      data,
+      onSelectChartsItems,
+      selectedChart,
+      onDoInteract,
+      onCheckTableInteract
+    } = this.props
     let selectedItems = []
     if (this.props.selectedItems && this.props.selectedItems.length) {
       selectedItems = [...this.props.selectedItems]
@@ -102,7 +117,7 @@ export class Chart extends React.PureComponent<IChartProps> {
     const resultData = selectedItems.map((item) => {
       return data[item]
     })
-    const brushed = [{0: Object.values(resultData)}]
+    const brushed = [{ 0: Object.values(resultData) }]
     const sourceData = Object.values(resultData)
     const isInteractiveChart = onCheckTableInteract && onCheckTableInteract()
     if (isInteractiveChart && onDoInteract) {
@@ -111,7 +126,7 @@ export class Chart extends React.PureComponent<IChartProps> {
     }
     setTimeout(() => {
       if (getDataDrillDetail) {
-        getDataDrillDetail(JSON.stringify({range: null, brushed, sourceData}))
+        getDataDrillDetail(JSON.stringify({ range: null, brushed, sourceData }))
       }
     }, 500)
     if (onSelectChartsItems) {
@@ -119,11 +134,11 @@ export class Chart extends React.PureComponent<IChartProps> {
     }
   }
 
-  public render () {
+  public render() {
     return (
       <div
         className={styles.chartContainer}
-        ref={(f) => this.container = f}
+        ref={(f) => (this.container = f)}
       />
     )
   }
diff --git a/webapp/app/containers/Widget/components/Widget/index.tsx b/webapp/app/containers/Widget/components/Widget/index.tsx
index 035160ced..815e4e73c 100644
--- a/webapp/app/containers/Widget/components/Widget/index.tsx
+++ b/webapp/app/containers/Widget/components/Widget/index.tsx
@@ -164,6 +164,7 @@ export interface IWidgetProps extends IWidgetConfigBase {
   selectedItems?: number[]
   onSelectChartsItems?: (selectedItems: number[]) => void
   // onHideDrillPanel?: (swtich: boolean) => void
+  onError?: (error: Error) => void
 }
 
 export interface IWidgetConfig extends IWidgetConfigBase {
diff --git a/webapp/app/utils/migrationRecorders/barChartStyles.ts b/webapp/app/utils/migrationRecorders/barChartStyles.ts
index f89c87df5..9da573e1d 100644
--- a/webapp/app/utils/migrationRecorders/barChartStyles.ts
+++ b/webapp/app/utils/migrationRecorders/barChartStyles.ts
@@ -7,19 +7,19 @@ import { EmptyStack } from 'app/containers/Widget/components/Config/Stack/consta
 const barChartStyles: IMigrationRecorder<IChartStyles> = {
   versions: ['beta6'],
   recorder: {
-    beta6 (chartStyle) {
+    beta6(chartStyle) {
       const { bar: barConfig, spec: barSpec } = chartStyle
-      const {
-        bar: defaultBarConfig
-      } = barDefaultConfig.style as IChartStyles
+      const { bar: defaultBarConfig } = barDefaultConfig.style as IChartStyles
       if (!barConfig) {
         const newBarConfig = produce(defaultBarConfig, (draft) => {
           draft.barChart = !!barSpec.barChart
           draft.stack.on = !!barSpec.stack
           draft.stack.percentage = barSpec.percentage
         })
-        chartStyle.bar = newBarConfig
-        return chartStyle
+        return {
+          ...chartStyle,
+          bar: newBarConfig
+        }
       }
       const { stack } = barConfig
       if (!stack) {
diff --git a/webapp/share/containers/Dashboard/actions.ts b/webapp/share/containers/Dashboard/actions.ts
index d56a56241..dafc6bf9b 100644
--- a/webapp/share/containers/Dashboard/actions.ts
+++ b/webapp/share/containers/Dashboard/actions.ts
@@ -239,6 +239,16 @@ export const DashboardActions = {
     }
   },
 
+  renderChartError(itemId: number, error: Error) {
+    return {
+      type: ActionTypes.RENDER_CHART_ERROR,
+      payload: {
+        itemId,
+        error
+      }
+    }
+  },
+
   drillDashboardItem(itemId, drillHistory) {
     return {
       type: ActionTypes.DRILL_DASHBOARDITEM,
diff --git a/webapp/share/containers/Dashboard/constants.ts b/webapp/share/containers/Dashboard/constants.ts
index 1564cdc91..e647acfbb 100644
--- a/webapp/share/containers/Dashboard/constants.ts
+++ b/webapp/share/containers/Dashboard/constants.ts
@@ -39,6 +39,7 @@ enum Types {
   LOAD_SELECT_OPTIONS_FAILURE = 'davinci/Share/Dashboard/LOAD_SELECT_OPTIONS_FAILURE',
   RESIZE_DASHBOARDITEM = 'davinci/Share/Dashboard/RESIZE_DASHBOARDITEM',
   RESIZE_ALL_DASHBOARDITEM = 'davinci/Share/Dashboard/RESIZE_ALL_DASHBOARDITEM',
+  RENDER_CHART_ERROR = 'davinci/Share/Dashboard/RENDER_CHART_ERROR',
   DRILL_DASHBOARDITEM = 'davinci/Share/Dashboard/DRILL_DASHBOARDITEM',
   DELETE_DRILL_HISTORY = 'davinci/Share/Dashboard/DELETE_DRILL_HISTORY',
   SELECT_DASHBOARD_ITEM_CHART = 'davinci/Share/Dashboard/SELECT_DASHBOARD_ITEM_CHART',
diff --git a/webapp/share/containers/Dashboard/index.tsx b/webapp/share/containers/Dashboard/index.tsx
index 3504861fa..5b5a82ebd 100644
--- a/webapp/share/containers/Dashboard/index.tsx
+++ b/webapp/share/containers/Dashboard/index.tsx
@@ -41,7 +41,10 @@ import DashboardItem from 'containers/Dashboard/components/DashboardItem'
 import FullScreenPanel from './FullScreenPanel'
 import { Responsive, WidthProvider } from 'react-grid-layout'
 import { ChartTypes } from 'containers/Widget/config/chart/ChartTypes'
-import { IFilters, IDistinctValueReqeustParams } from 'app/components/Control/types'
+import {
+  IFilters,
+  IDistinctValueReqeustParams
+} from 'app/components/Control/types'
 import GlobalControlPanel from 'app/containers/ControlPanel/Global'
 import DownloadList from 'components/DownloadList'
 import { getValidColumnValue } from 'app/components/Control/util'
@@ -60,6 +63,7 @@ const {
   loadSelectOptions,
   resizeDashboardItem,
   resizeAllDashboardItem,
+  renderChartError,
   drillDashboardItem,
   deleteDrillHistory,
   selectDashboardItemChart,
@@ -189,9 +193,7 @@ export class Share extends React.Component<IDashboardProps, IDashboardStates> {
 
   public componentDidMount() {
     // urlparse
-    const qs = this.querystring(
-      window.location.search.substr(1)
-    )
+    const qs = this.querystring(window.location.search.substr(1))
 
     // @FIXME 0.3 maintain `shareInfo` in links for legacy integration
     this.setState({
@@ -400,12 +402,27 @@ export class Share extends React.Component<IDashboardProps, IDashboardStates> {
 
   private dataDrill = (drillDetail) => {
     const { onDrillDashboardItem, onLoadResultset } = this.props
-    const { itemId, cols, rows, type, groups, filters, currentGroup } = drillDetail
-    const currentDrillStatus: IDrillDetail = { cols, rows, type, groups, filters, currentGroup }
+    const {
+      itemId,
+      cols,
+      rows,
+      type,
+      groups,
+      filters,
+      currentGroup
+    } = drillDetail
+    const currentDrillStatus: IDrillDetail = {
+      cols,
+      rows,
+      type,
+      groups,
+      filters,
+      currentGroup
+    }
 
     onDrillDashboardItem(itemId, currentDrillStatus)
     onLoadResultset('rerender', itemId, {
-        drillStatus: currentDrillStatus
+      drillStatus: currentDrillStatus
     })
   }
 
@@ -449,6 +466,7 @@ export class Share extends React.Component<IDashboardProps, IDashboardStates> {
       onLoadResultset,
       onLoadBatchDataWithControlValues,
       onResizeDashboardItem,
+      onRenderChartError,
       onSetFullScreenPanelItemId
     } = this.props
 
@@ -522,6 +540,7 @@ export class Share extends React.Component<IDashboardProps, IDashboardStates> {
               container="share"
               onLoadData={onLoadResultset}
               onResizeDashboardItem={onResizeDashboardItem}
+              onRenderChartError={onRenderChartError}
               onDownloadCsv={this.initiateWidgetDownloadTask}
               onTurnOffInteract={this.turnOffInteract}
               onCheckTableInteract={this.checkInteract}
@@ -680,6 +699,8 @@ export function mapDispatchToProps(dispatch) {
     onResizeDashboardItem: (itemId: number) =>
       dispatch(resizeDashboardItem(itemId)),
     onResizeAllDashboardItem: () => dispatch(resizeAllDashboardItem()),
+    onRenderChartError: (itemId: number, error: Error) =>
+      dispatch(renderChartError(itemId, error)),
     onDrillDashboardItem: (itemId: number, drillHistory) =>
       dispatch(drillDashboardItem(itemId, drillHistory)),
     onDeleteDrillHistory: (itemId: number, index: number) =>
@@ -704,6 +725,14 @@ export function mapDispatchToProps(dispatch) {
 const withConnect = connect(mapStateToProps, mapDispatchToProps)
 const withReducer = injectReducer({ key: 'shareDashboard', reducer })
 const withSaga = injectSaga({ key: 'shareDashboard', saga })
-const withControlReducer = injectReducer({ key: 'control', reducer: controlReducer })
+const withControlReducer = injectReducer({
+  key: 'control',
+  reducer: controlReducer
+})
 
-export default compose(withReducer, withControlReducer, withSaga, withConnect)(Share)
+export default compose(
+  withReducer,
+  withControlReducer,
+  withSaga,
+  withConnect
+)(Share)
diff --git a/webapp/share/containers/Dashboard/reducer.ts b/webapp/share/containers/Dashboard/reducer.ts
index 6b2867561..200004e04 100644
--- a/webapp/share/containers/Dashboard/reducer.ts
+++ b/webapp/share/containers/Dashboard/reducer.ts
@@ -130,7 +130,8 @@ const shareReducer = (state = initialState, action: DashboardActionType) =>
         break
 
       case ActionTypes.LOAD_SHARE_RESULTSET:
-        draft.itemsInfo[action.payload.itemId].status = DashboardItemStatus.Pending
+        draft.itemsInfo[action.payload.itemId].status =
+          DashboardItemStatus.Pending
         draft.itemsInfo[action.payload.itemId].loading = true
         draft.itemsInfo[action.payload.itemId].errorMessage = ''
         break
@@ -240,6 +241,12 @@ const shareReducer = (state = initialState, action: DashboardActionType) =>
         })
         break
 
+      case ActionTypes.RENDER_CHART_ERROR:
+        draft.itemsInfo[
+          action.payload.itemId
+        ].errorMessage = action.payload.error.toString()
+        break
+
       case ActionTypes.LOAD_DOWNLOAD_LIST:
         draft.downloadListLoading = true
         break