echartsapache-echarts

Set MarkLine to be on the righthand index boundary instead of in the middle of the cell


I have a heatmap with vertical markLines for certain x values. Right now, the vertical line is appearing in the middle of the x axis index I specify. This cuts the heatmap cell in half and is confusing to users looking for the boundary between certain items. Is it possible using built in options to have that vertical line appear on the right-hand boundary of the x-axis index specified?

Heatmap with mark lines for each category x value

Here is the relevant portion of my eChart option JavaScript:

series: [
                {
                    type: 'heatmap',
                    data: mutation_map_data,
                    color: colorPalette,                    
                    markLine: {
                        silent: true,
                        data: position_boundaries,
                        lineStyle: {
                            width: 5,
                            color: "white",
                        }
                    },
                    ...
]

Where the variable position_boundaries is an array of items of the form:

{"symbol": "none", "xAxis": index, "name": current_position}

Solution

  • Whether to place your coordinate system items in the middle of two axis ticks or directly on it is handeled on axis level by the property boundaryGap. To achieve both (in the middle for heatmap items and on the tick for marklines) you can use 2 separate axes and series. The axis for markLines with boundaryGap: false needs to contain one additional item in the end to align with the main axis.

    Example:

    const xData = [1, 2, 3, 4, 5, 6];
    const yData = [1, 2, 3, 4, 5];
    const data = [[1, 0, 1], [5, 0, 1], [0, 1, 1], [3, 1, 1], [4, 2, 1], [5, 2, 1], [1, 3, 1], [2, 4, 1], [3, 4, 1]];
    
    option = {
      xAxis: [
        {
          type: 'category',
          data: xData,
          splitArea: {
            show: true
          }
        },
        {
          type: 'category',
          data: xData.concat(['last']),
          show: false,
          boundaryGap: false
        }
      ],
      yAxis: {
        type: 'category',
        data: yData,
        splitArea: {
          show: true
        }
      },
      series: [
        {
          type: 'heatmap',
          data: data,
        },
        {
          type: 'custom',
          xAxisIndex: 1,
          markLine: {
            silent: true,
            data: [{ xAxis: '2' }],
            lineStyle: {
              width: 5,
              color: 'red'
            }
          }
        }
      ]
    };