Bar graph with up/down markers

I have given the previous week’s data (number) as hover text.

But if there’s no bar then where can I see the previous data?
Any suggestions on how to go forward with this?


    for (let i = 0; i < Object.keys(data).length; i++) {
      if (Object.values(data)[i].sum_of_points == 0) {
        sum_of_points_zero.push(Object.values(data)[i].sum_of_points + 0)
        attribute_name_zero.push(attribute_space_gen(Object.keys(data)[i]))
        if (
          previous_data != null &&
          Object.values(previous_data)[i].sum_of_points == 0
        ) {
          prev_sum_of_points_zero.push(
            Object.values(previous_data)[i].sum_of_points + 0,
          )
        }
      }
      attribute_name.push(attribute_space_gen(Object.keys(data)[i]))
      sum_of_points.push(Object.values(data)[i].sum_of_points + 0)
      delta.push(Object.values(data)[i].delta)
      if (previous_data != null) {
        prev_sum_of_points.push(Object.values(previous_data)[i].sum_of_points)
      }
    }
    const dataforplotly = {
      marker: { color: '#58815e' },
      orientation: 'h',
      text: prev_sum_of_points,
      type: 'bar',
      x: sum_of_points,
      y: attribute_name,
      showlegend: false,
    }
    graphData.push(dataforplotly)
    const max_delta_value = Math.max(...delta)
    const max_sum_points = Math.max(...sum_of_points)
    for (let index = 0; index < delta.length; index++) {
      var yAxis = [attribute_space_gen(Object.keys(data)[index])] //attributes
      var xAxis = Object.values(data)[index].sum_of_points //sum of points
      if (delta[index] > 0) {
        const up_marker = {
          mode: 'markers',
          y: yAxis,
          x: [xAxis + max_sum_points / 15], //x axis for markers with distance from bar
          showlegend: false,
          hoverinfo: 'none',
          marker: {
            symbol: 5,
            color: `rgba(0, 128, 0,${Math.max(
              0.15,
              delta[index] / max_delta_value,
            )} )`, //intensity adjusting
            size: 20,
            padding: 5,
          },
        }
        graphData.push(up_marker)
      } else if (delta[index] < 0) {
        const down_marker = {
          mode: 'markers',
          y: yAxis,
          x: [xAxis + max_sum_points / 12],
          hoverinfo: 'none',
          //x axis for space
          showlegend: false,
          marker: {
            symbol: 6,
            color:
              max_delta_value == 0
                ? `rgba(207, 0, 15,${Math.max(0.15, -1 * delta[index])} )`
                : `rgba(207, 0, 15,${Math.max(
                    0.15,
                    -1 * (delta[index] / max_delta_value),
                  )} )`,
            size: 20,
          },
        }
        graphData.push(down_marker)
      }
    }
    setValue(graphData)
  }