option = {
  series: [{
    animationDelay: 100 // Simple numeric value
  }]
};

option = {
  series: [{
    // Function callback for per-item control
    animationDelay: function (idx) {
      return idx * 10;
    }
  }]
};

xAxis: {
  axisLabel: {
    formatter: function(params) {
      return params.value; // params was an object
    }
  }
}

xAxis: {
  axisLabel: {
    formatter: function(value) {
      return value; // Direct value passed
    }
  }
}

xAxis: {
  type: 'value',
  axisBreak: {
    breakLine: {
      style: {
        color: '#eee',
        width: 1,
        type: 'dashed'
      }
    }
  }
}

label: {
  color: 'auto' // Works but deprecated
}

label: {
  color: 'inherit' // Preferred in v5
}

label: {
  edgeDistance: 10, // Previously 'margin'
  minMargin: 5      // New property
}

chart.on('click', 'series.line', function(params) {
  console.log(params.selfType); // 'line' or 'area'
  
  // Disable events for specific parts
  series: [{
    type: 'line',
    triggerLineEvent: false // Disable line events
  }]
});

series: [{
  type: 'candlestick',
  emphasis: {
    itemStyle: {
      color: '#c23531'
    }
  },
  select: {
    itemStyle: {
      opacity: 1
    }
  }
}]

import { EChartsOption } from 'echarts';

const option: EChartsOption = {
  // Full type checking and autocomplete
  series: [{
    type: 'bar',
    data: [10, 20, 30]
  }]
};

xAxis: {
  type: 'time',
  customValues: [new Date(2020, 0, 1), new Date(2020, 6, 1)],
  axisLabel: {
    formatter: function(value) {
      return new Date(value).toLocaleDateString();
    }
  }
}

series: [{
  type: 'parallel',
  data: [[1, 55, 9], [2, 25, 27]],
  // Proper min/max calculation now handled automatically
}]

// Dynamic tooltip updates now work correctly
chart.setOption({
  tooltip: {
    formatter: function(params) {
      return `Updated: ${params.value}`;
    }
  }
});

npm install echarts@5.x.x

// Find and replace
formatter: function(params) {
  return params.value; // Old
}

// With
formatter: function(value) {
  return value; // New
}

// Update all instances
label: {
  color: 'inherit' // Changed from 'auto'
}

label: {
  edgeDistance: 10, // Renamed from 'margin'
  minMargin: 5      // Optional new property
}

chart.on('click', function(params) {
  if (params.selfType === 'line') {
    // Handle line click
  } else if (params.selfType === 'area') {
    // Handle area click
  }
});

// ❌ Old (will break)
formatter: function(params) {
  return params.value.toFixed(2);
}

// ✅ New (correct)
formatter: function(value) {
  return value.toFixed(2);
}

// ❌ May not work consistently
label: { color: 'auto' }

// ✅ Recommended
label: { color: 'inherit' }

// This now works correctly in v5
xAxis: {
  type: 'time',
  customValues: [timestamps...],
  axisLabel: {
    formatter: '{yyyy}-{MM}-{dd}'
  }
}