fix(chartcuterie): Fallback to built-in font family (#31554)

It seems like chartcuterie isn't loading the necessary
fonts properly, so temporary fix until that's sorted
is to use sans-serif as a default because it's available
builtin for echarts to use.

static/app/chartcuterie/discover.tsx

@@ -13,7 +13,12 @@ import {t} from 'sentry/locale';
 import {EventsGeoData, EventsStats} from 'sentry/types';
 import {lightTheme as theme} from 'sentry/utils/theme';
 
-import {slackChartDefaults, slackChartSize, slackGeoChartSize} from './slack';
+import {
+  DEFAULT_FONT_FAMILY,
+  slackChartDefaults,
+  slackChartSize,
+  slackGeoChartSize,
+} from './slack';
 import {ChartType, RenderDescriptor} from './types';
 
 const discoverxAxis = XAxis({
@@ -22,7 +27,7 @@ const discoverxAxis = XAxis({
   boundaryGap: true,
   splitNumber: 3,
   isGroupedByDate: true,
-  axisLabel: {fontSize: 11},
+  axisLabel: {fontSize: 11, fontFamily: DEFAULT_FONT_FAMILY},
 });
 
 export const discoverCharts: RenderDescriptor<ChartType>[] = [];

static/app/chartcuterie/slack.tsx

@@ -4,6 +4,8 @@ import XAxis from 'sentry/components/charts/components/xAxis';
 import YAxis from 'sentry/components/charts/components/yAxis';
 import {lightTheme as theme} from 'sentry/utils/theme';
 
+export const DEFAULT_FONT_FAMILY = 'sans-serif';
+
 /**
  * Size configuration for SLACK_* type charts
  */
@@ -20,10 +22,26 @@ export const slackGeoChartSize = {
 /**
  * Default echarts option config for slack charts
  */
+
 export const slackChartDefaults = {
   grid: Grid({left: 5, right: 5, bottom: 5}),
   backgroundColor: theme.background,
-  legend: Legend({theme, itemHeight: 6, top: 2, right: 10}),
-  yAxis: YAxis({theme, splitNumber: 3, axisLabel: {fontSize: 11}}),
-  xAxis: XAxis({theme, nameGap: 5, isGroupedByDate: true, axisLabel: {fontSize: 11}}),
+  legend: Legend({
+    theme,
+    itemHeight: 6,
+    top: 2,
+    right: 10,
+    textStyle: {fontFamily: DEFAULT_FONT_FAMILY},
+  }),
+  yAxis: YAxis({
+    theme,
+    splitNumber: 3,
+    axisLabel: {fontSize: 11, fontFamily: DEFAULT_FONT_FAMILY},
+  }),
+  xAxis: XAxis({
+    theme,
+    nameGap: 5,
+    isGroupedByDate: true,
+    axisLabel: {fontSize: 11, fontFamily: DEFAULT_FONT_FAMILY},
+  }),
 };