y2-axis values aren't properly positioned with the ticks

[kczx3]

Bug Report

Description

When using a y and y2-axis, some data points on the y2 data set are not properly positioned in relation to the axis' ticks.

Graphs affected

• Bar graph
• Bubble graph
• Gantt chart
• Line graph
• Paired result
• Pie chart
• Scatter plot
• Timeline

Steps to Reproduce

1. Everything is in the CodeSandbox
2. Click on the data points to see their values.

Link to CodeSandbox

Use this template to reproduce the behavior.

Additional Context / Screenshots

Expected Behavior

Data points will be properly positioned vertically such that their vertical position accurately reflects their actual value. Currently, values such as 1 and -4 on the y2-axis of my demo are not properly positioned. Values of 1 appear too high and values of -4 appear too low.

Possible Solution

Environment

• Component Name and Version: Line Graph v2.18.2
• Browser Name and Version: Edge 95 and FireFox 94
• Node/npm Version: [e.g. Node 8/npm 5]: N/A
• Webpack Version: N/A
• Operating System and version (desktop or mobile): Windows 10 20H2

@ Mentions

[sdadn]

Thanks for the issue. I would like to clarify a few things. Both the axis and and datapoint values are actually correct. What happens is by default, the displayed values of the axes are formatted to be whole numbers. So essentially the values are rounded up to the nearest multiple of 2, 5 or 10 by the underlying D3.js library. If you set the formatting to be a float, you'll get the following:

....
      "y2": {
          "show": true,
          "label": "Score",
          "lowerLimit": -4,
          "upperLimit": 1,
          // to change the display format for ticks:
          ticks: {
              format: "0.1f"
          }
      }
...

Based on the actual numerical value of the axis ticks, the datapoints seem to be positioned correctly, demonstrated below using custom tick values:

Carbon has multiple avenues to mitigate the mismatch between tick values and their rendering:

• Update the formatting to show decimal points
• Update the axis limits so that the divisions are multiples of 2, 5 or 10. The allowCalibrate property can be turned off to prevent the limits from auto updating when datapoints >= limit values.
• Use the ticksCount property for a custom number of divisions.
• Use custom tick values. However, with this, the responsibility for alignment of the ticks and grid is up to the consumer.