I'm using echarts to graph float values and I want to round the decimal numbers to 2 decimal places in the tooltip from the series (keeping the current tooltip style).

My option var is:

var truckTurnAroundTimeOption = {
  color: ['dodgerblue', '#e67e22'],
  title: {
    text: 'Truck Turnaround Time',
    show: false,
    textStyle: {
      fontFamily: 'Roboto',
      fontSize: 14
    }
  },
  tooltip: {
    trigger: 'axis'
  },
  calculable: true,
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      axisLabel: {
        formatter: function (value, index) {
          return value.slice(0,5);
        }
      },
      data: truckTurnaroundTimes.map(item => item.hour)
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: 'mins',
      nameLocation: 'middle',
      nameGap: 30,
      
      splitLine: {
        //remove grid lines
        show: false
      }
    }
  ],
  grid: {
    left: 68,
    top: 8,
    right: 28,
    bottom: 38
  },
  legend: {
    show: true,
    icon: 'circle',
    orient: 'vertical',
    top: -4,
    right: 26,
    itemHeight: 12,
    textStyle: {
      fontSize: 11,
    }
  },
  series: [
    {
      name: 'current',
      type: 'line',
      smooth: false,
      data: data.map(item => parseFloat(item.current_truck_turnaround_time)) /* Values like 12.2343443, 5.123452 */
    },
    {
      name: 'improved',
      type: 'line',
      smooth: false,
      data: data.map(item => parseFloat(item.improved_truck_turnaround_time)) /* Values like 12.2343443, 5.123452 */
    }
  ]
};

The data in the array datasets contain values like: 12.2343443, 5.123452, etc.

PD: I don't want to round the series data before graphing

I'm using echarts to graph float values and I want to round the decimal numbers to 2 decimal places in the tooltip from the series (keeping the current tooltip style).

My option var is:

var truckTurnAroundTimeOption = {
  color: ['dodgerblue', '#e67e22'],
  title: {
    text: 'Truck Turnaround Time',
    show: false,
    textStyle: {
      fontFamily: 'Roboto',
      fontSize: 14
    }
  },
  tooltip: {
    trigger: 'axis'
  },
  calculable: true,
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      axisLabel: {
        formatter: function (value, index) {
          return value.slice(0,5);
        }
      },
      data: truckTurnaroundTimes.map(item => item.hour)
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: 'mins',
      nameLocation: 'middle',
      nameGap: 30,
      
      splitLine: {
        //remove grid lines
        show: false
      }
    }
  ],
  grid: {
    left: 68,
    top: 8,
    right: 28,
    bottom: 38
  },
  legend: {
    show: true,
    icon: 'circle',
    orient: 'vertical',
    top: -4,
    right: 26,
    itemHeight: 12,
    textStyle: {
      fontSize: 11,
    }
  },
  series: [
    {
      name: 'current',
      type: 'line',
      smooth: false,
      data: data.map(item => parseFloat(item.current_truck_turnaround_time)) /* Values like 12.2343443, 5.123452 */
    },
    {
      name: 'improved',
      type: 'line',
      smooth: false,
      data: data.map(item => parseFloat(item.improved_truck_turnaround_time)) /* Values like 12.2343443, 5.123452 */
    }
  ]
};

The data in the array datasets contain values like: 12.2343443, 5.123452, etc.

PD: I don't want to round the series data before graphing

• javascript
• tooltip
• echarts

3 Answers 3

You just need to add the valueFormatter to your tooltip object like so:

{     
  tooltip: {
    trigger: 'axis',
    valueFormatter: (value) => value,
   }
}

Use the toFixed()-method of parseFloat() here:

data.map(item => parseFloat(item.current_truck_turnaround_time).toFixed(2))

You can provide a formatter function to format the display to the required precision.

{
  tooltip: {
    formatter([{value: v1}, {value: v2}]) => `${v1.toFixed(2)}<br/>${v2.toFixed(2)}`,
    trigger: 'axis'
  }
}