added prop rotateAngle to avoid the overlapping x-axis tick values

packages/carbon-graphs/CHANGELOG.md

@@ -1,6 +1,8 @@
 # ChangeLog
 
 ## Unreleased
+* Fixed
+  * Added prop `rotateAngle` to allow rotation of x-axis tick labels to prevent overlap.
 
 ## 2.23.3 - (September 25, 2023)
 

packages/carbon-graphs/src/js/helpers/axis.js

@@ -893,7 +893,16 @@ const createAxes = (axis, scale, config, canvasSVG) => {
       )})`,
     )
     .call(axis.x)
-    .call(resetD3FontSize);
+    .call(resetD3FontSize)
+    .attr('id', 'x')
+    .selectAll('text')
+    .style('text-anchor', () => {
+      if (config.axis.x.ticks.rotateAngle !== undefined) {
+        return config.axis.x.ticks.rotateAngle >= 0 ? 'start' : 'end';
+      }
+      return 'middle';
+    })
+    .attr('transform', () => `rotate(${config.axis.x.ticks.rotateAngle})`);
   canvasSVG
     .append('g')
     .classed(styles.axis, true)
@@ -922,7 +931,6 @@ const createAxes = (axis, scale, config, canvasSVG) => {
       .call(resetD3FontSize);
   }
 };
-
 /**
  * X Axis's position vertically relative to the canvas
  *

packages/terra-graphs-docs/CHANGELOG.md

@@ -1,6 +1,9 @@
 # ChangeLog
 
 ## Unreleased
+* Added
+  * Added a Prop `rotateAngle` for overlapping X-axis tick values.
+  * Added examples for the Xaxis Overlapping tick values.
 
 ## 1.6.0 - (September 25, 2023)
 

packages/terra-graphs-docs/src/example-datasets/graphConfigObjects/General/generalDefaultXAxisOverlapping.js

@@ -0,0 +1,49 @@
+import Carbon from '@cerner/carbon-graphs/lib/js/carbon';
+
+const getLineTimeseriesConfig = (id) => ({
+  bindTo: id,
+  axis: {
+    x: {
+      type: Carbon.helpers.AXIS_TYPE.TIME_SERIES,
+      label: 'Datetime',
+      lowerLimit: new Date(2016, 0, 1).toISOString(),
+      upperLimit: new Date(2016, 0, 12).toISOString(),
+      ticks: {
+        values: [
+          new Date(2016, 0, 1).toISOString(),
+          new Date(2016, 0, 2).toISOString(),
+          new Date(2016, 0, 3).toISOString(),
+          new Date(2016, 0, 4).toISOString(),
+          new Date(2016, 0, 5).toISOString(),
+          new Date(2016, 0, 6).toISOString(),
+          new Date(2016, 0, 7).toISOString(),
+          new Date(2016, 0, 8).toISOString(),
+          new Date(2016, 0, 9).toISOString(),
+          new Date(2016, 0, 10).toISOString(),
+          new Date(2016, 0, 11).toISOString(),
+        ],
+        rotateAngle: -45,
+        format: '%Y, %X',
+      },
+    },
+    y: {
+      label: 'Line Set A',
+      lowerLimit: 10,
+      upperLimit: 30,
+    },
+    y2: {
+      show: false,
+      label: 'Line Set B',
+      lowerLimit: 0,
+      upperLimit: 250,
+    },
+  },
+  showLabel: true,
+  showLegend: true,
+  showShapes: true,
+  showVGrid: true,
+  showHGrid: true,
+  locale: Carbon.helpers.LOCALE.de_DE,
+});
+
+export default getLineTimeseriesConfig;

packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Documentation/Axes.3.graph.mdx

@@ -34,6 +34,7 @@ axis: {
         suppressingTrailingZeros: <bool>,
         ticks: <Ticks object>,
         type: <string>
+        rotateAngle: <integer>,
     },
     y: {
         lowerLimit: <number> or <Date>,
@@ -80,7 +81,8 @@ axis: {
 | show                  | boolean        | `true`                     | no       | Toggle for showing the axis.                                                                                                                                                                                                                                          |
 | suppressTrailingZeros | boolean        | `false`                    | no       | Toggle to suppress tick values's trailing zeros when default d3 tick formatting is used. For X axis, this property works only when X axis type is set to AXIS_TYPE.DEFAULT. Specifying `~` in the tick format takes precedence over `suppressTrailingZeros` property. |
 | ticks                 | object         | `null`                     | no       | See [Ticks](./Ticks).                                                                                                                                                                                                                                                 |
-| type                  | string         | `AXIS_TYPE.DEFAULT`        | no       | See [type](#type). Normal number value or time-based. Only for x-axis.                                                                                                                                                                                                |
+| type                  | string         | `AXIS_TYPE.DEFAULT`        | no       | See [type](#type). Normal number value or time-based. Only for x-axis.                                                                                                                                                                                                |    
+| rotateAngle           | integer        | -                          | no       | allows consumer to add a rotateAngle to x-axis to avoid the overlapping (angle will be in between `+90` to `-90` Positive values move in clock wise direction & negative values moves in anticlock wise direction).Only for x-axis.                                   |
 
 - ### `allowCalibration`
     Set calibration for the axis. 

packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/Axes/XAxisTickValuesOverlapping.test.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import utils from '@cerner/carbon-graphs/lib/js/helpers/utils';
+import LineGraph from '@cerner/terra-graphs-docs/lib/terra-graphs-src/components/Line/LineGraph';
+import '@cerner/terra-graphs-docs/lib/terra-dev-site/ExampleGraphContainer/ExampleGraphContainer.module.scss';
+import getGraphConfig from '@cerner/terra-graphs-docs/lib/example-datasets/graphConfigObjects/General/generalDefaultXAxisOverlapping';
+import exampleData1 from '@cerner/terra-graphs-docs/lib/example-datasets/dataObjects/Line/dataset1';
+import exampleData2 from '@cerner/terra-graphs-docs/lib/example-datasets/dataObjects/Line/dataset2';
+import exampleData3 from '@cerner/terra-graphs-docs/lib/example-datasets/dataObjects/Line/dataset3';
+import exampleData4 from '@cerner/terra-graphs-docs/lib/example-datasets/dataObjects/Line/dataset4';
+import exampleData5 from '@cerner/terra-graphs-docs/lib/example-datasets/dataObjects/Line/dataset5';
+import exampleData6 from '@cerner/terra-graphs-docs/lib/example-datasets/dataObjects/Line/dataset6';
+
+const graphConfig = utils.deepClone(getGraphConfig('#xAxisTicksVlauesOverlapping'));
+const dataset = [
+  utils.deepClone(exampleData1),
+  utils.deepClone(exampleData2),
+  utils.deepClone(exampleData3),
+  utils.deepClone(exampleData4),
+  utils.deepClone(exampleData5),
+  utils.deepClone(exampleData6),
+];
+
+const timeoutArray = [0, 750, 750 * 2, 750 * 3, 750 * 4, 750 * 5, 750 * 6];
+
+export default () => (
+  <>
+    <div id="tooltip" className="initial-tooltip" />
+    <LineGraph graphID="xAxisTicksVlauesOverlapping" graphConfig={graphConfig} dataset={dataset} timeout={timeoutArray} />
+    ;
+  </>
+);