From 294665fbe881f5dcc78f17ac0ebf99b364ce351d Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Mon, 24 Aug 2020 16:45:30 +0200
Subject: [PATCH] Fix time format in charts (#6671)

---
 src/components/entity/ha-chart-base.js         | 6 +++---
 src/components/state-history-chart-line.js     | 4 ++++
 src/components/state-history-chart-timeline.js | 1 +
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/entity/ha-chart-base.js b/src/components/entity/ha-chart-base.js
index 350ea82c68..7df570747c 100644
--- a/src/components/entity/ha-chart-base.js
+++ b/src/components/entity/ha-chart-base.js
@@ -1,12 +1,12 @@
 /* eslint-plugin-disable lit */
 import { IronResizableBehavior } from "@polymer/iron-resizable-behavior/iron-resizable-behavior";
-import "../ha-icon-button";
 import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class";
 import { timeOut } from "@polymer/polymer/lib/utils/async";
 import { Debouncer } from "@polymer/polymer/lib/utils/debounce";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { formatTime } from "../../common/datetime/format_time";
+import "../ha-icon-button";
 
 // eslint-disable-next-line no-unused-vars
 /* global Chart moment Color */
@@ -355,7 +355,7 @@ class HaChartBase extends mixinBehaviors(
       return value;
     }
     const date = new Date(values[index].value);
-    return formatTime(date);
+    return formatTime(date, this.hass.language);
   }
 
   drawChart() {
@@ -420,7 +420,7 @@ class HaChartBase extends mixinBehaviors(
         },
       };
       options = Chart.helpers.merge(options, this.data.options);
-      options.scales.xAxes[0].ticks.callback = this._formatTickValue;
+      options.scales.xAxes[0].ticks.callback = this._formatTickValue.bind(this);
       if (this.data.type === "timeline") {
         this.set("isTimeline", true);
         if (this.data.colors !== undefined) {
diff --git a/src/components/state-history-chart-line.js b/src/components/state-history-chart-line.js
index 3a857b8663..1b627e4206 100644
--- a/src/components/state-history-chart-line.js
+++ b/src/components/state-history-chart-line.js
@@ -19,6 +19,7 @@ class StateHistoryChartLine extends LocalizeMixin(PolymerElement) {
       </style>
       <ha-chart-base
         id="chart"
+        hass="[[hass]]"
         data="[[chartData]]"
         identifier="[[identifier]]"
         rendered="{{rendered}}"
@@ -28,6 +29,9 @@ class StateHistoryChartLine extends LocalizeMixin(PolymerElement) {
 
   static get properties() {
     return {
+      hass: {
+        type: Object,
+      },
       chartData: Object,
       data: Object,
       names: Object,
diff --git a/src/components/state-history-chart-timeline.js b/src/components/state-history-chart-timeline.js
index ada4aba6b4..fe0653f030 100644
--- a/src/components/state-history-chart-timeline.js
+++ b/src/components/state-history-chart-timeline.js
@@ -25,6 +25,7 @@ class StateHistoryChartTimeline extends LocalizeMixin(PolymerElement) {
         }
       </style>
       <ha-chart-base
+        hass="[[hass]]"
         data="[[chartData]]"
         rendered="{{rendered}}"
         rtl="{{rtl}}"