@echarts-extension/sunrise-sunset

Language: English | 中文

ECharts extension chart for sunrise, sunset, moonrise, and moonset paths. Import this package for side effects to register series.type = 'sunriseSunset'.

Install

npm install echarts @echarts-extension/sunrise-sunset

Basic Usage

import * as echarts from 'echarts';
import '@echarts-extension/sunrise-sunset';

const chart = echarts.init(document.getElementById('main'));

chart.setOption({
  series: [
    {
      type: 'sunriseSunset',
      sunrise: '05:12',
      sunset: '18:39',
      moonrise: '22:08',
      moonset: '07:59',
      currentTime: '2026-05-05 10:47:33',
      title: 'Time until sunset',
      remainingText: '07:51:27',
      updatedText: 'Updated 10:46'
    }
  ]
});

Data

You can pass values directly on the series or in data:

• sunrise, sunset, moonrise, moonset, currentTime, and updatedAt accept HH:mm, local date-time strings, timestamps, or Date objects.
• title, remainingText, and updatedText can be supplied for static screenshots.
• If countdown text is omitted, the layout computes remaining time from currentTime.

Options

This table is generated by scripts/sync-options-from-readmes.mjs --write-readmes. Update the English README option table, then run npm run docs:sync-options to refresh the docs page.

| Option | Description | Values | | --- | --- | --- | | type | Registers this package series with ECharts. | 'sunriseSunset' | | silent | Disables mouse events for the series when true. | boolean | | width | Series box width. | number \| string (pixel or percent) | | height | Series box height. | number \| string (pixel or percent) | | top | Distance from the top of the chart container. | number \| string (pixel or percent) | | right | Distance from the right of the chart container. | number \| string (pixel or percent) | | bottom | Distance from the bottom of the chart container. | number \| string (pixel or percent) | | left | Distance from the left of the chart container. | number \| string (pixel or percent) | | data | Single record or records containing sun, moon, title, and status text values. | Object \| Array<object> | | data.sunrise | sunrise field. | string \| number \| Date | | data.sunset | sunset field. | string \| number \| Date | | data.moonrise | moonrise field. | string \| number \| Date | | data.moonset | moonset field. | string \| number \| Date | | data.currentTime | current time field. | string \| number \| Date | | data.updatedAt | updated at field. | string \| number \| Date | | data.title | title field. | string | | data.remainingText | remaining text field. | string | | data.updatedText | updated text field. | string | | sunrise | Sunrise time. | string \| number \| Date | | sunset | Sunset time. | string \| number \| Date | | moonrise | Moonrise time. | string \| number \| Date | | moonset | Moonset time. | string \| number \| Date | | currentTime | Time used to compute current progress and remaining text. | string \| number \| Date | | updatedAt | Timestamp shown by the updated label. | string \| number \| Date | | title | Title text shown above the arc. | string | | remainingText | Text shown for remaining daylight or night time. | string | | updatedText | Text shown for update status. | string | | enterAnimation | Animates sun and moon elements into place. | boolean \| object | | enterAnimation.show | Shows the animation when true. | boolean | | enterAnimation.enabled | Enables the animation when true. | boolean | | enterAnimation.duration | Animation duration. | number \| function | | enterAnimation.delay | Delay before the animation starts. | number \| function | | enterAnimation.stagger | Delay added between items. | number \| function | | enterAnimation.easing | Animation easing name. | string | | sunIcon | Custom sun icon. | string \| false \| object | | sunIcon.path | Vector path for the icon. | string | | sunIcon.image | Image URL for the icon. | string | | sunIcon.size | Icon size. | number \| [number, number] | | sunIcon.width | Icon width. | number | | sunIcon.height | Icon height. | number | | sunIcon.offset | Icon offset. | [number, number] | | sunIcon.offsetX | Horizontal icon offset. | number | | sunIcon.offsetY | Vertical icon offset. | number | | sunIcon.style | Styles the icon graphic. | Object | | sunIcon.style.fill | Icon fill color. | string | | sunIcon.style.stroke | Icon stroke color. | string | | sunIcon.style.lineWidth | Icon stroke width. | number | | sunIcon.style.opacity | Icon opacity. | number | | moonIcon | Custom moon icon. | string \| false \| object | | moonIcon.path | Vector path for the icon. | string | | moonIcon.image | Image URL for the icon. | string | | moonIcon.size | Icon size. | number \| [number, number] | | moonIcon.width | Icon width. | number | | moonIcon.height | Icon height. | number | | moonIcon.offset | Icon offset. | [number, number] | | moonIcon.offsetX | Horizontal icon offset. | number | | moonIcon.offsetY | Vertical icon offset. | number | | moonIcon.style | Styles the icon graphic. | Object | | moonIcon.style.fill | Icon fill color. | string | | moonIcon.style.stroke | Icon stroke color. | string | | moonIcon.style.lineWidth | Icon stroke width. | number | | moonIcon.style.opacity | Icon opacity. | number | | padding | Inset around the chart. | number | | baselineY | Vertical position of the horizon baseline. | number | | dayArcHeight | Height of the day arc. | number | | moonArcHeight | Height of the moon arc. | number | | moonStartRatio | Relative start position of the moon arc. | number | | moonEndRatio | Relative end position of the moon arc. | number | | backgroundStyle | Styles the chart background area. | Object | | backgroundStyle.color | Primary color. | string | | backgroundStyle.opacity | Opacity. | number | | baselineStyle | Styles the horizon baseline. | Object | | baselineStyle.color | Primary color. | string | | baselineStyle.stroke | Stroke color. | string | | baselineStyle.width | Width value. | number | | baselineStyle.lineWidth | Line width. | number | | baselineStyle.opacity | Opacity. | number | | baselineStyle.type | Line or item type. | 'solid' \| 'dashed' \| 'dotted' \| number[] | | dayLineStyle | Styles the sun path line. | Object | | dayLineStyle.color | Primary color. | string | | dayLineStyle.stroke | Stroke color. | string | | dayLineStyle.width | Width value. | number | | dayLineStyle.lineWidth | Line width. | number | | dayLineStyle.opacity | Opacity. | number | | dayLineStyle.type | Line or item type. | 'solid' \| 'dashed' \| 'dotted' \| number[] | | moonLineStyle | Styles the moon path line. | Object | | moonLineStyle.color | Primary color. | string | | moonLineStyle.stroke | Stroke color. | string | | moonLineStyle.width | Width value. | number | | moonLineStyle.lineWidth | Line width. | number | | moonLineStyle.opacity | Opacity. | number | | moonLineStyle.type | Line or item type. | 'solid' \| 'dashed' \| 'dotted' \| number[] | | dayAreaStyle | Styles the daylight area fill. | Object | | dayAreaStyle.color | Primary color. | string | | dayAreaStyle.opacity | Opacity. | number | | moonAreaStyle | Styles the moon area fill. | Object | | moonAreaStyle.color | Primary color. | string | | moonAreaStyle.opacity | Opacity. | number | | titleLabel | Styles title text. | Object | | titleLabel.show | Shows labels when true. | boolean | | titleLabel.color | Label text color. | string | | titleLabel.fontSize | Label text size. | number | | titleLabel.fontWeight | Label font weight. | string \| number | | titleLabel.formatter | Formats label text. | string \| function | | remainingLabel | Styles remaining-time text. | Object | | remainingLabel.show | Shows labels when true. | boolean | | remainingLabel.color | Label text color. | string | | remainingLabel.fontSize | Label text size. | number | | remainingLabel.fontWeight | Label font weight. | string \| number | | remainingLabel.formatter | Formats label text. | string \| function | | updatedLabel | Styles updated-time text. | Object | | updatedLabel.show | Shows labels when true. | boolean | | updatedLabel.color | Label text color. | string | | updatedLabel.fontSize | Label text size. | number | | updatedLabel.fontWeight | Label font weight. | string \| number | | updatedLabel.formatter | Formats label text. | string \| function | | eventLabel | Styles sunrise, sunset, moonrise, and moonset labels. | Object | | eventLabel.show | Shows labels when true. | boolean | | eventLabel.color | Label text color. | string | | eventLabel.fontSize | Label text size. | number | | eventLabel.fontWeight | Label font weight. | string \| number | | eventLabel.formatter | Formats label text. | string \| function |