Need help resolving issues with bar chart

[softwareDev-git]

I have to display a bar chart for timestamp (x-axis) and count (y-axis) data where x-axis has a scale of time.

I want to clarify if the following behaviours can be resolved -

1. Show axis lines and grid lines for overflowing bar data. For example, the below bar chart has bar data for June 16, June 17 and June 18. However, axis lines and grid lines are not drawn to accommodate the June 18 bar data. Is there a way to resolve axis line and grid lines here?

2. Adjust tooltip position when x-axis has a scale of time but a type of category. When using the time scale and number type for the x-axis, the tooltip behaves correctly when hovering over the bars. However, when using the time scale and category type for the x-axis, the tooltip doesn't behave correctly.

For example, the below bar chart is the same as the above except it has category type for its x-axis. The use of category type is needed to display the bars starting from one tick and ending at another. However, the tooltip for June 17 bar is displayed when the cursor hovers over the June 16 bar where the white circle is drawn. Is there a way to resolve tooltip position here?

Please see codesandbox which displays these examples - Codesandbox for Recharts

I am relatively new to Recharts so any guidance or suggestion is appreciated. Thanks.

[ckifer]

Hi! Thanks for making the codesandbox!

scale="time" and type="category" are incompatible. d3 scale expects numerical data when using a timescale, or else data cannot be interpreted as a date. If you remove scale="time" the categorical chart works fine and is just that, a list of categories. As long as your data is in order and you don't need to interpolate this should work for your case. This is generally preferred with bar charts.

[ckifer]

Generally I wouldn't recommend bar charts with a numeric XAxis, but one solution is to add padding to your XAxis

padding={{ left: 50, right: 50 }} - you can probably calculate how much you need based on your bar size

[softwareDev-git]

Great, thanks for the quick response.

[softwareDev-git]

@ckifer Apologies for continuing this discussion. Let me know if it is better to start a new discussion and I will create one.

I am attempting a solution where Customized component is used to render a Rectangle component instead of the Bar component. However, I am unsure on how to handle tooltip behaviour. Is it possible to use https://recharts.org/en-US/api/Rectangle#onMouseOver to show a tooltip? Any guidance on whether this is possible or not would be helpful.

See updated code sandbox that includes this solution - Code sandbox for Recharts

Below is the code snippet that replaces the Bar component.

{data.map((rectProps, index) => (
          <Customized
            key={index}
            component={(customisedChartProps) => {
              const { xAxisMap, yAxisMap } = customisedChartProps;
              const xScale = xAxisMap[0].scale;
              const yScale = yAxisMap[0].scale;
              const { timestamp, count, timestamp_end } = rectProps;
              return (
                <Rectangle
                  fill="lightgreen"
                  width={
                    xScale(timestamp_end - 0.25 * 3600000) - xScale(timestamp)
                  }
                  height={yScale(count) - yScale(0)}
                  x={xScale(timestamp)}
                  y={yScale(0)}
                />
              );
            }}
          />
        ))}

[ckifer]

Customized does not support Tooltip unfortunately - its usually used in conjunction with another component to render custom shapes. What I would do it continue to use Bar and instead provide a shape prop so you can customize the rectangle.

          shape={(props) => {
            return (
              <Rectangle
                fill="lightgreen"
                ...props
              />
            );
          }}

[softwareDev-git]

Understood. Thanks.