cell

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

const chart = new Chart({
  container: 'container',
});
chart.options({
  type: 'cell',
  data: {
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/seattle-weather.json',
  },
  transform: [{ type: 'group', color: 'max' }], // Apply group transformation to data, grouping by maximum color values
  encode: {
    x: (d) => new Date(d.date).getUTCDate(), // Encode x-axis using the UTC date part of the date field
    y: (d) => new Date(d.date).getUTCMonth(), // Encode y-axis using the UTC month part of the date field
    color: 'temp_max', // Encode color using the temp_max field from data
    shape: 'cell',
  },
  style: { inset: 0.5 }, // Set cell inset to 0.5
  scale: {
    color: {
      type: 'sequential', // Set color scale as sequential scale
      palette: 'gnBu', // Use 'gnBu' color palette
    },
  },
});

chart.render(); // Render the chart

import * as G2 from '@antv/g2';

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

chart.options({
  type: 'cell',
  data: [
    { x: 'x-a', y: 'y-a', data1: 1, data2: 5 },
    { x: 'x-a', y: 'y-b', data1: 3, data2: 8 },
    { x: 'x-a', y: 'y-c', data1: 2, data2: 6 },
    { x: 'x-b', y: 'y-a', data1: 8, data2: 2 },
    { x: 'x-b', y: 'y-b', data1: 5, data2: 4 },
    { x: 'x-b', y: 'y-c', data1: 6, data2: 9 },
    { x: 'x-c', y: 'y-a', data1: 7, data2: 1 },
    { x: 'x-c', y: 'y-b', data1: 4, data2: 2 },
    { x: 'x-c', y: 'y-c', data1: 9, data2: 3 },
  ],
  encode: {
    x: 'x', // Encode x-axis
    y: 'y', // Encode y-axis
    color: 'data1', // Use data1 field from data
  },
  style: {
    inset: 5,
    lineWidth: 10,
  },
});

// Insert Encode-Color selector
const selectorContainer = document.createElement('div');
selectorContainer.textContent = 'Select field to map to color ';
const selector = document.createElement('select');
selector.innerHTML = `
    <option value="data1" selected>data1</option>
    <option value="data2">data2</option>
  `;

selector.onchange = (e) => {
  chart.options({
    encode: {
      color: e.target.value, // Map color using the selected field
    },
  });
  chart.render(); // Re-render the chart
};
selectorContainer.appendChild(selector);
container.insertBefore(selectorContainer, container.childNodes[0]);

chart.render();