0

Below is my Apache Echarts tooltip. How can I have different backgroundColor based on my series Index? For example from seriesIndex 0-30 having white and > 30 to be red. Also for my textStyle I want only the value to be bold (from the screenshot only the 152.2% part)

 tooltip: {
        trigger: "axis",
        formatter: function (params) {
          return params[0].dataIndex === 0
            ? `${rangeLow.format("DD")}-${rangeLow.add(firstWeek.length-1, "day").format("DD MMM")} \n ${params[0].value.toFixed(1)}%` //prettier-ignore
            : params[0].dataIndex === 52
            ? `${rangeHigh.subtract(lastWeek.length-1, "day").format("DD")}-${rangeHigh.format("DD MMM")} \n ${params[0].value.toFixed(1)}%` //prettier-ignore
            : `${newRangeLow.add(params[0].dataIndex-1, "week").format("DD")}-${newRangeLow.add(params[0].dataIndex-1,"week").add(6,'day').format("DD MMM")} \n ${params[0].value.toFixed(1)}%` //prettier-ignore
        },
        confine: true,
        axisPointer: {
          type: "none",
        },
        backgroundColor: "#BFBBB8",
        textStyle: {
          fontWeight: "bold",
        },
      },

enter image description here

Strike
  • 77
  • 1
  • 7
  • You can return HTML in the formatter function. I think it would be best for you to return a `
    ...
    `     – vcaraccio Aug 21 '23 at 08:27
  • @vcaraccio First of all thanks for the response. Forgot to mention on I'm working on mobile using react-native-echarts and unfortunately doesnt support the html. – Strike Aug 21 '23 at 08:28
  • 1
    In echarts the `backgroundStyle.color` property can be a function but has no arguments. You could use a hacky global variable to keep track of the seriesIndex. – Matthias Mertens Aug 22 '23 at 05:59
  • @MatthiasMertens thanks I created a global useState with my currentIndex. The only problem if my barChart on xAxis index 30 for example doesn't have data the currentIndex doesn't trigger, but my tooltip will trigger. – Strike Aug 22 '23 at 07:04
  • Okay moved the setter inside my tooltip formatter working. Going to check out the background now – Strike Aug 22 '23 at 07:09

0 Answers0