Graph: Fixed issue with x-axis labels showing "MM/DD" after viewing dashboard with pie chart .

packages/grafana-ui/src/components/Graph/Graph.tsx

@@ -10,7 +10,7 @@ import { TooltipProps, TooltipContentProps, ActiveDimensions, Tooltip } from '..
 import { GraphTooltip } from './GraphTooltip/GraphTooltip';
 import { GraphTooltip } from './GraphTooltip/GraphTooltip';
 import { GraphContextMenu, GraphContextMenuProps, ContextDimensions } from './GraphContextMenu';
 import { GraphContextMenu, GraphContextMenuProps, ContextDimensions } from './GraphContextMenu';
 import { GraphDimensions } from './GraphTooltip/types';
 import { GraphDimensions } from './GraphTooltip/types';
-import { graphTimeFormat, graphTimeFormatter } from './utils';
+import { graphTimeFormat, graphTickFormatter } from './utils';
 
 
 export interface GraphProps {
 export interface GraphProps {
   children?: JSX.Element | JSX.Element[];
   children?: JSX.Element | JSX.Element[];
@@ -314,6 +314,7 @@ export class Graph extends PureComponent<GraphProps, GraphState> {
         shadowSize: 0,
         shadowSize: 0,
       },
       },
       xaxis: {
       xaxis: {
+        timezone: timeZone,
         show: true,
         show: true,
         mode: 'time',
         mode: 'time',
         min: min,
         min: min,
@@ -321,7 +322,7 @@ export class Graph extends PureComponent<GraphProps, GraphState> {
         label: 'Datetime',
         label: 'Datetime',
         ticks: ticks,
         ticks: ticks,
         timeformat: graphTimeFormat(ticks, min, max),
         timeformat: graphTimeFormat(ticks, min, max),
-        timeFormatter: graphTimeFormatter(timeZone),
+        tickFormatter: graphTickFormatter,
       },
       },
       yaxes,
       yaxes,
       grid: {
       grid: {

packages/grafana-ui/src/components/Graph/utils.ts

@@ -102,8 +102,12 @@ export const getMultiSeriesGraphHoverInfo = (
   };
   };
 };
 };
 
 
-export const graphTimeFormatter = (timeZone?: TimeZone) => (epoch: number, format: string) =>
-  dateTimeFormat(epoch, { format, timeZone });
+export const graphTickFormatter = (epoch: number, axis: any) => {
+  return dateTimeFormat(epoch, {
+    format: axis?.options?.timeformat,
+    timeZone: axis?.options?.timezone,
+  });
+};
 
 
 export const graphTimeFormat = (ticks: number | null, min: number | null, max: number | null): string => {
 export const graphTimeFormat = (ticks: number | null, min: number | null, max: number | null): string => {
   if (min && max && ticks) {
   if (min && max && ticks) {

packages/grafana-ui/src/components/index.ts

@@ -68,7 +68,7 @@ export { GraphContextMenu } from './Graph/GraphContextMenu';
 export { BarGauge, BarGaugeDisplayMode } from './BarGauge/BarGauge';
 export { BarGauge, BarGaugeDisplayMode } from './BarGauge/BarGauge';
 export { GraphTooltipOptions } from './Graph/GraphTooltip/types';
 export { GraphTooltipOptions } from './Graph/GraphTooltip/types';
 export { VizRepeater, VizRepeaterRenderValueProps } from './VizRepeater/VizRepeater';
 export { VizRepeater, VizRepeaterRenderValueProps } from './VizRepeater/VizRepeater';
-export { graphTimeFormat, graphTimeFormatter } from './Graph/utils';
+export { graphTimeFormat, graphTickFormatter } from './Graph/utils';
 
 
 export {
 export {
   LegendOptions,
   LegendOptions,

public/app/plugins/panel/graph/graph.ts

@@ -24,7 +24,7 @@ import ReactDOM from 'react-dom';
 import { GraphLegendProps, Legend } from './Legend/Legend';
 import { GraphLegendProps, Legend } from './Legend/Legend';
 
 
 import { GraphCtrl } from './module';
 import { GraphCtrl } from './module';
-import { ContextMenuGroup, ContextMenuItem, graphTimeFormat, graphTimeFormatter } from '@grafana/ui';
+import { ContextMenuGroup, ContextMenuItem, graphTimeFormat, graphTickFormatter } from '@grafana/ui';
 import { getCurrentTheme, provideTheme } from 'app/core/utils/ConfigProvider';
 import { getCurrentTheme, provideTheme } from 'app/core/utils/ConfigProvider';
 import {
 import {
   DataFrame,
   DataFrame,
@@ -655,7 +655,7 @@ class GraphElement {
       label: 'Datetime',
       label: 'Datetime',
       ticks: ticks,
       ticks: ticks,
       timeformat: graphTimeFormat(ticks, min, max),
       timeformat: graphTimeFormat(ticks, min, max),
-      timeFormatter: graphTimeFormatter(this.dashboard.getTimezone()),
+      tickFormatter: graphTickFormatter,
     };
     };
   }
   }
 
 

public/vendor/flot/jquery.flot.time.js

@@ -15,8 +15,7 @@ API.txt for details.
 			timezone: null,		// "browser" for local to the client or timezone for timezone-js
 			timezone: null,		// "browser" for local to the client or timezone for timezone-js
 			timeformat: null,	// format string to use
 			timeformat: null,	// format string to use
 			twelveHourClock: false,	// 12 or 24 time in time mode
 			twelveHourClock: false,	// 12 or 24 time in time mode
-			monthNames: null,	// list of names of months
-			timeFormatter: null // external formatter with timezone support
+			monthNames: null	// list of names of months
 		}
 		}
 	};
 	};
 
 
@@ -30,6 +29,7 @@ API.txt for details.
 	// A subset of the Open Group's strftime format is supported.
 	// A subset of the Open Group's strftime format is supported.
 
 
 	function formatDate(d, fmt, monthNames, dayNames) {
 	function formatDate(d, fmt, monthNames, dayNames) {
+
 		if (typeof d.strftime == "function") {
 		if (typeof d.strftime == "function") {
 			return d.strftime(fmt);
 			return d.strftime(fmt);
 		}
 		}
@@ -356,15 +356,12 @@ API.txt for details.
 					};
 					};
 
 
 					axis.tickFormatter = function (v, axis) {
 					axis.tickFormatter = function (v, axis) {
+
 						var d = dateGenerator(v, axis.options);
 						var d = dateGenerator(v, axis.options);
 
 
-						// first check global formatter
-						if (typeof opts.timeFormatter === "function") {
-							return opts.timeFormatter(d.getTime(), opts.timeformat);
-						}
+						// first check global format
 
 
-						// second check global format
-						if (opts.timeformat != null) {							
+						if (opts.timeformat != null) {
 							return formatDate(d, opts.timeformat, opts.monthNames, opts.dayNames);
 							return formatDate(d, opts.timeformat, opts.monthNames, opts.dayNames);
 						}
 						}
 
 
@@ -410,6 +407,7 @@ API.txt for details.
 						}
 						}
 
 
 						var rt = formatDate(d, fmt, opts.monthNames, opts.dayNames);
 						var rt = formatDate(d, fmt, opts.monthNames, opts.dayNames);
+
 						return rt;
 						return rt;
 					};
 					};
 				}
 				}