CODEWITHSUNDEEP
echartsapache-echarts
Strike
Strike

Reputation: 151

Echarts markLine doesn't appear. (Bar Chart)

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,
            },
          },
        },
      ],

Upvotes: 0

Views: 2924

Answers (2)

Randy Hiebert
Randy Hiebert

Reputation: 21

An easy thing to overlook, but if you are using minimal bundle ensure you import and use MarkLineComponent.

Upvotes: 2

Matthias Mertens
Matthias Mertens

Reputation: 2551

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.

Upvotes: 2

Related Questions