echarts - Set MarkLine to be on the righthand index boundary instead of in the middle of the cell - Stack Overflow

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?

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}

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?

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}

• echarts
• apache-echarts

Share Improve this question Follow edited Jan 7 at 0:14 Ken White 126k1515 gold badges236236 silver badges466466 bronze badges asked Jan 6 at 23:44 Steven Magana-ZookSteven Magana-Zook 2,7592828 silver badges4141 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

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'
        }
      }
    }
  ]
};