0

im trying to create two markLines with my averages (yearly and last 13 weeks) the first markline will be my yearly average with a small tooltip position around January. My second one will be my last 13 weeks averages with a small position at around july. The screenshot below is what I have.

enter image description here

Here is a screenshot the small tooltip. Has to be a markline too.

enter image description here

Here are my options. MarkLine doesn't appear at all.

     xAxis: [
        {
          type: "category",
          data: Object.keys(resultObject),
          show: false,
        },
        {
          position: "bottom",
          type: "category",
          data: categories.map((category) => category.charAt(0)),
          xAxisIndex: 2,
          show: true,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
      ],
      yAxis: {
        show: false,
        type: "value",
      },
      series: [
        {
          data: Object.values(resultObject),
          type: "bar",
          itemStyle: {
            color: (seriesIndex) =>
              seriesIndex.dataIndex > 39 ? "#FF5630" : "#A19D9A",
          },
          markLine: {
            data: {
              name: "Horizontal line with Y value at 100",
              yAxis: 100,
            },
          },
        },
      ],
Strike
  • 77
  • 1
  • 7

1 Answers1

0

You have a syntax error. The data property is a list of markLine objects, which are specified by either

  • A) a value at an axis (eg. yAxis: 200 or type: 'average) or
  • B) a list of two points (eg. coord: [10,20] or type: 'min)
markLine: {
    data: [
        // case A
        {yAxis: 200},        // example 1
        {type: 'average'},   // example 2

        // case B
        [
            {coord: [10, 20]},    // example 1
            {coord: [50, 300]}
        ],

        [
            {type: 'min'},        // example 2
            {type: 'max'}
        ],

        [
            {coord: [10, 20]},    // example 3
            {type: 'max'}
        ]
    ]
}

Here is a small example.

  • Hi, thanks for answering tried the examples, and still nothing. – Strike Aug 18 '23 at 06:46
  • There are no markLines in the example link I provided? – Matthias Mertens Aug 18 '23 at 08:21
  • There are. Tried to implement them in my application but still nothing. Maybe is a problem because I'm using react-native-charts for mobile applications. (which uses apache echarts) – Strike Aug 18 '23 at 08:26
  • 1
    Yes, it does not seem to be an echarts issue. If you would provide a [stackblitz](https://stackblitz.com/) implementation I could have a look at it. Just note, that I have never used react. – Matthias Mertens Aug 18 '23 at 08:39