[charts] Fix timezone regression in charts (#123663)

x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageViewsChart.tsx

@@ -117,6 +117,7 @@ export function PageViewsChart({ data, loading }: Props) {
             labelFormat={(d) => numeral(d).format('0a')}
           />
           <BarSeries
+            timeZone="local"
             id={I18LABELS.pageViews}
             xScaleType={ScaleType.Time}
             yScaleType={ScaleType.Linear}

x-pack/plugins/apm/public/components/app/service_profiling/service_profiling_timeline.tsx

@@ -94,6 +94,7 @@ export function ServiceProfilingTimeline({
           {specs.map((spec) => (
             <BarSeries
               {...spec}
+              timeZone="local"
               key={spec.id}
               xScaleType={ScaleType.Time}
               yScaleType={ScaleType.Linear}

x-pack/plugins/apm/public/components/shared/charts/spark_plot/index.tsx

@@ -106,6 +106,7 @@ export function SparkPlot({
               xAccessor={'x'}
               yAccessors={['y']}
               data={series}
+              timeZone="local"
               color={colorValue}
               curve={CurveType.CURVE_MONOTONE_X}
             />
@@ -117,6 +118,7 @@ export function SparkPlot({
                 xAccessor={'x'}
                 yAccessors={['y']}
                 data={comparisonSeries}
+                timeZone="local"
                 color={theme.eui.euiColorLightestShade}
                 curve={CurveType.CURVE_MONOTONE_X}
               />

x-pack/plugins/data_visualizer/public/application/common/components/document_count_content/document_count_chart/document_count_chart.tsx

@@ -138,6 +138,7 @@ export const DocumentCountChart: FC<Props> = ({
           xAccessor="time"
           yAccessors={['value']}
           data={adjustedChartPoints}
+          timeZone="local"
         />
       </Chart>
     </div>

x-pack/plugins/ml/public/application/jobs/jobs_list/components/datafeed_chart_flyout/datafeed_chart_flyout.tsx

@@ -442,6 +442,7 @@ export const DatafeedChartFlyout: FC<DatafeedChartFlyoutProps> = ({ jobId, end,
                           yAccessors={[1]}
                           data={sourceData}
                           curve={CurveType.LINEAR}
+                          timeZone="local"
                         />
                         <LineSeries
                           key={'job-results'}
@@ -455,6 +456,7 @@ export const DatafeedChartFlyout: FC<DatafeedChartFlyoutProps> = ({ jobId, end,
                           yAccessors={[1]}
                           data={bucketData}
                           curve={CurveType.LINEAR}
+                          timeZone="local"
                         />
                       </Chart>
                     </div>

x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/model_bounds.tsx

@@ -44,6 +44,7 @@ export const ModelBounds: FC<Props> = ({ modelData }) => {
       curve={CurveType.CURVE_MONOTONE_X}
       areaSeriesStyle={areaSeriesStyle}
       color={MODEL_COLOR}
+      timeZone="local"
     />
   );
 };

x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/event_rate_chart/event_rate_chart.tsx

@@ -90,6 +90,7 @@ export const EventRateChart: FC<Props> = ({
             yAccessors={['value']}
             data={eventRateChartData}
             color={barColor}
+            timeZone="local"
           />
         </Chart>
       </LoadingWrapper>

x-pack/plugins/observability/public/components/app/section/apm/index.tsx

@@ -142,6 +142,7 @@ export function APMSection({ bucketSize }: Props) {
               xAccessor={'x'}
               yAccessors={['y']}
               color={transactionsColor}
+              timeZone="local"
             />
             <Axis
               id="y-axis"

x-pack/plugins/observability/public/components/app/section/metrics/metric_with_sparkline.tsx

@@ -53,6 +53,7 @@ export function MetricWithSparkline({ id, formatter, value, timeseries, color }:
             xAccessor={'timestamp'}
             yAccessors={[id]}
             color={colors[color] || '#006BB4'}
+            timeZone="local"
           />
         </Chart>
       </EuiFlexItem>

x-pack/plugins/security_solution/public/detections/components/alerts_kpis/alerts_histogram_panel/alerts_histogram.tsx

@@ -99,6 +99,7 @@ export const AlertsHistogram = React.memo<AlertsHistogramProps>(
                 yAccessors={yAccessors}
                 splitSeriesAccessors={splitSeriesAccessors}
                 data={data}
+                timeZone={'local'}
               />
             </Chart>
           </EuiFlexItem>

x-pack/plugins/uptime/public/components/common/charts/duration_line_series_list.tsx

@@ -23,6 +23,7 @@ export const DurationLineSeriesList = ({ monitorType, lines }: Props) => (
         curve={CurveType.CURVE_MONOTONE_X}
         // this id is used for the line chart representing the average duration length
         data={line.map(({ x, y }) => [x, y || null])}
+        timeZone="local"
         id={`loc-avg-${name}`}
         key={`loc-line-${name}`}
         name={name}
@@ -31,7 +32,6 @@ export const DurationLineSeriesList = ({ monitorType, lines }: Props) => (
         yAccessors={[1]}
         yScaleType={ScaleType.Linear}
         fit={Fit.Linear}
-        timeZone="local"
         tickFormat={(d) =>
           monitorType === 'browser'
             ? `${microToSec(d)} ${SEC_LABEL}`