[Lens] Formats correctly the falsy values on the x axis (#107134)

* [Lens] Formats correctly the falsy values on the x axis

* Address PR comments

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/lens/public/xy_visualization/expression.test.tsx

@@ -2489,6 +2489,81 @@ describe('xy_expression', () => {
         visible: true,
       });
     });
+
+    test('it should format the boolean values correctly', () => {
+      const data: LensMultiTable = {
+        type: 'lens_multitable',
+        tables: {
+          first: {
+            type: 'datatable',
+            columns: [
+              {
+                id: 'a',
+                name: 'a',
+                meta: { type: 'number', params: { id: 'number', params: { pattern: '0,0.000' } } },
+              },
+              {
+                id: 'b',
+                name: 'b',
+                meta: { type: 'number', params: { id: 'number', params: { pattern: '000,0' } } },
+              },
+              {
+                id: 'c',
+                name: 'c',
+                meta: {
+                  type: 'boolean',
+                  params: { id: 'boolean' },
+                },
+              },
+            ],
+            rows: [
+              { a: 5, b: 2, c: 0 },
+              { a: 19, b: 5, c: 1 },
+            ],
+          },
+        },
+        dateRange: {
+          fromDate: new Date('2019-01-02T05:00:00.000Z'),
+          toDate: new Date('2019-01-03T05:00:00.000Z'),
+        },
+      };
+      const timeSampleLayer: LayerArgs = {
+        layerId: 'first',
+        seriesType: 'line',
+        xAccessor: 'c',
+        accessors: ['a', 'b'],
+        xScaleType: 'ordinal',
+        yScaleType: 'linear',
+        isHistogram: false,
+        palette: mockPaletteOutput,
+      };
+      const args = createArgsWithLayers([timeSampleLayer]);
+
+      const getCustomFormatSpy = jest.fn();
+      getCustomFormatSpy.mockReturnValue({ convert: jest.fn((x) => Boolean(x)) });
+
+      const component = shallow(
+        <XYChart
+          {...defaultProps}
+          formatFactory={getCustomFormatSpy}
+          data={{ ...data }}
+          args={{ ...args }}
+        />
+      );
+
+      expect(component.find(LineSeries).at(1).prop('data')).toEqual([
+        {
+          a: 5,
+          b: 2,
+          c: false,
+        },
+        {
+          a: 19,
+          b: 5,
+          c: true,
+        },
+      ]);
+    });
   });
 
   describe('calculateMinInterval', () => {

x-pack/plugins/lens/public/xy_visualization/expression.tsx

@@ -616,7 +616,7 @@ export function XYChart({
               for (const column of table.columns) {
                 const record = newRow[column.id];
                 if (
-                  record &&
+                  record != null &&
                   // pre-format values for ordinal x axes because there can only be a single x axis formatter on chart level
                   (!isPrimitive(record) || (column.id === xAccessor && xScaleType === 'ordinal'))
                 ) {