# Echarts wind direction and speed

**URL:** <https://community.grafana.com/t/echarts-wind-direction-and-speed/162192>\
**Category:** Dashboards\
**Created:** [March 20, 2026, 7:10am UTC](https://community.grafana.com/t/echarts-wind-direction-and-speed/162192 "2026-03-20T07:10:17Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![province7056](https://avatars.discourse-cdn.com/v4/letter/p/b77776/32.png) [@province7056](https://community.grafana.com/u/province7056)\
**Post date:** [March 20, 2026, 7:10am UTC](https://community.grafana.com/t/echarts-wind-direction-and-speed/162192/1 "2026-03-20T07:10:17Z")

</div>

- Grafana v12.4.0 on Docker 28.5.1 on Debian `12.12`

- using Echarts (Business charts) plugin to create chart displaying wind direction and wind speed (y axis) over time (x axis)

- using code snippets found here in [\* previous threads](https://community.grafana.com/t/display-wind-direction-with-apache-echart-plugin/84628) enhanced by google AI

- II can only see what is on the attached picture

```auto
const series = context.panel.data.series.map((s) => {
  const windSpeedField = s.fields.find((f) => f.name === 'windspeedmph');
  const windDirField = s.fields.find((f) => f.name === 'winddir');
  const timeField = s.fields.find((f) => f.name === 'Time');

  // Skip this series if any required field is missing to avoid the "undefined" error
  if (!windSpeedField || !windDirField || !timeField) return { data: [] };

  const windspeedmph = windSpeedField.values;
  const winddir = windDirField.values;
  const Time = timeField.values;

  return {
    name: s.name,
    type: 'line',
    symbol: 'path://M31 24.7343L21.7917 24.7343V0L9.20826 0L9.20826 24.7343H0L15.5 45L31 24.7343Z',
    symbolSize: 15,
    lineStyle: { width: 0.5 },
    data: Time.map((d, i) => ({
      value: [d, windspeedmph[i]],
      symbolRotate: winddir[i]
    }))
  };
});

return {
  xAxis: { type: 'time' }, // Note: lower-case 'time' is standard for ECharts
  yAxis: { type: 'value' },
  visualMap: {
    orient: 'horizontal',
    left: 'center',
    min: 0,
    max: 25,
    text: ['High', 'Low'],
    dimension: 1,
    inRange: {
      color: ['#65B581', '#FFCE34', '#FD665F']
    }
  },
  series: series
};

```

---

<div class="post-metadata">

**Author:** ![yosiasz](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/yosiasz/32/45847_2.png) [@yosiasz](https://community.grafana.com/u/yosiasz)\
**Post date:** [March 21, 2026, 12:04pm UTC](https://community.grafana.com/t/echarts-wind-direction-and-speed/162192/2 "2026-03-21T12:04:42Z")

</div>

What do you see in your browser console?

---

<div class="post-metadata">

**Author:** ![province7056](https://avatars.discourse-cdn.com/v4/letter/p/b77776/32.png) [@province7056](https://community.grafana.com/u/province7056)\
**Post date:** [March 21, 2026, 9:15pm UTC](https://community.grafana.com/t/echarts-wind-direction-and-speed/162192/3 "2026-03-21T21:15:24Z")

</div>

![Clipboard_03-22-2026_02](https://us1.discourse-cdn.com/grafana/original/3X/4/7/47bf6c376544d474eb7aa347b2a68005569bf7d6.png)

---

<div class="post-metadata">

**Author:** ![yosiasz](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/yosiasz/32/45847_2.png) [@yosiasz](https://community.grafana.com/u/yosiasz)\
**Post date:** [March 22, 2026, 2:23pm UTC](https://community.grafana.com/t/echarts-wind-direction-and-speed/162192/4 "2026-03-22T14:23:04Z")

</div>

Looks clean. What if you added

Console.log(‘windy’, windSpeedField) right before // Skip this series

and do that for all 3 variables

---

<div class="post-metadata">

**Author:** ![province7056](https://avatars.discourse-cdn.com/v4/letter/p/b77776/32.png) [@province7056](https://community.grafana.com/u/province7056)\
**Post date:** [March 23, 2026, 12:22am UTC](https://community.grafana.com/t/echarts-wind-direction-and-speed/162192/5 "2026-03-23T00:22:01Z")

</div>

![Clipboard_03-23-2026_02](https://us1.discourse-cdn.com/grafana/original/3X/e/e/ee0d6378978a86b3af5433143043de02b7e1bf75.png)

---

<div class="post-metadata">

**Author:** ![yosiasz](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/yosiasz/32/45847_2.png) [@yosiasz](https://community.grafana.com/u/yosiasz)\
**Post date:** [March 23, 2026, 3:57am UTC](https://community.grafana.com/t/echarts-wind-direction-and-speed/162192/6 "2026-03-23T03:57:13Z")

</div>

There is your answer. 2 of them are undefined

---

<div class="post-metadata">

**Author:** ![province7056](https://avatars.discourse-cdn.com/v4/letter/p/b77776/32.png) [@province7056](https://community.grafana.com/u/province7056)\
**Post date:** [March 23, 2026, 12:40pm UTC](https://community.grafana.com/t/echarts-wind-direction-and-speed/162192/7 "2026-03-23T12:40:54Z")

</div>

I guess that means windspeed and win direction..? Can you push me in the right direction how to solve that?

---

<div class="post-metadata">

**Author:** ![yosiasz](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/yosiasz/32/45847_2.png) [@yosiasz](https://community.grafana.com/u/yosiasz)\
**Post date:** [March 23, 2026, 3:34pm UTC](https://community.grafana.com/t/echarts-wind-direction-and-speed/162192/8 "2026-03-23T15:34:19Z")

</div>

Are you referencing the proper field maes for those two

Please console log

The `s.fields` in

context.panel.data.series.map((s)

And see if those undefined values are being properly referenced in your .fields

This is more js issue than grafana issue