[v5] encode color by topN #4674

Yes, make sure your data is sorted descending and then encode color as follows:

import { Chart } from '@antv/g2';

const data = [
  { genre: 'Shooter', sold: 350 },
  { genre: 'Sports', sold: 275 },
  { genre: 'Other', sold: 150 },
  { genre: 'Action', sold: 120 },
  { genre: 'Strategy', sold: 115 },
];

const chart = new Chart({
  container: 'container',
});

const TOPN = 2;

chart
  .interval()
  .data(data)
  .encode('x', 'genre')
  .encode('y', 'sold')
  .encode('color', (_, index) => (index > TOPN - 1 ? 'low' : 'high'))
  .scale('color', {
    domain:['high', 'low'],
    range: ['red', 'blue'],
  });

chart.render();

Here is the output:

Do you use WeChat APP? Maybe we can use it to communicate more efficiently？

already send mail to u

already send mail to u

OK, I've sent an invitation to you.