CODEWITHSUNDEEP
javascriptreactjsecharts
Alberto
Alberto

Reputation: 1408

Echarts markLine with stacked series

I'm trying to mark the top of a graph with two line series with the markLine option. These line series are stacked but when I try to do a markLine with the option type: max the markLine of the top graph shows under the graph as the value is lower than what is showing (I attach an image to show it clearer).

How can I put the markLine on top of the graph? I've seen the y parameter but I have to put it in pixels what I find impossible.

This is my configuration of both markLines:

// First markLine
const markLineAhorro = {
    data: [
      {
        type: 'max',
        label: {
          position: 'middle',
          formatter: params => {
            return `Sólo tienes que invertir: ${params.value.format()} €`
          }
        },
        lineStyle: {
          color: '#212529'
        }
      },
    ]
}

// Second markLine (the one on the top)
const markLineRentabilidad = {
    data: [
      {
        type: 'max',
        label: {
          position: 'middle',
          formatter: params => {
            return `Con tu inversión obtienes: ${params.value.format()} €`
          }
        },
        lineStyle: {
          color: '#212529'
        }
      }
    ]
}

enter image description here

Upvotes: 1

Views: 2746

Answers (1)

Alberto
Alberto

Reputation: 1408

The solution I've found is to use the coord parameter to manually set the mark for the starting and ending point exactly where I want. I use the xAxis parameter to set the starting and ending point of the markLine and the max value I want to set the yAxis.

Then I tweak the value parameter to show the value I want.

const markLineRentabilidad = {
    data: [
      [
        {
          // Use the same y coord with starting and ending point
          coord: [0, patrimonioMaximo.toString()],
          value: rentabilidad[rentabilidad.length - 1],
        },
        {
          coord: [añosGrafica.length - 1, patrimonioMaximo.toString()],
        }
      ]
    ]
  }

Upvotes: 0

Related Questions