@echarts-extension/lollipop

Language: English | 中文

ECharts extension chart for lollipop plots. Import this package for side effects to register series.type = 'lollipop'.

Install

npm install echarts @echarts-extension/lollipop

Basic Usage

import * as echarts from 'echarts';
import '@echarts-extension/lollipop';

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

chart.setOption({
  series: [
    {
      type: 'lollipop',
      data: [
        { country: 'India', population: 1441 },
        { country: 'China', population: 1425 },
        { country: 'United States', population: 342 },
        { country: 'Indonesia', population: 278 }
      ],
      categoryField: 'country',
      valueField: 'population',
      baseline: 0,
      min: 0,
      max: 1600,
      symbolSize: 12,
      label: { show: true }
    }
  ]
});

Data

Use objects or array rows:

• Object rows read categoryField, valueField, and optional nameField.
• Array rows can be paired with dimensions, for example dimensions: ['country', 'population'].
• Numeric values are drawn from the baseline to the symbol.

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. | 'lollipop' | | 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 | Category-value records drawn as stems and symbols. | Array<object \| unknown[]> | | data.category | Category name or id. | string \| number | | data.value | Numeric value. | number | | data.name | Display name. | string \| number | | dimensions | Names tuple columns when data rows are arrays. | string[] | | categoryField | Field used for categories. | string \| number | | valueField | Field used for numeric values. | string \| number | | nameField | Field used for item names. | string \| number | | categories | Explicit category order. | Array<string \| number> | | padding | Inset around the chart. | number \| object | | padding.top | Top inset. | number | | padding.right | Right inset. | number | | padding.bottom | Bottom inset. | number | | padding.left | Left inset. | number | | min | Manual value-axis minimum. | number | | max | Manual value-axis maximum. | number | | baseline | Value where stems begin. | number | | tickCount | Preferred value-axis tick count. | number | | nice | Rounds value extent to nicer tick values. | boolean | | large | Enables large-data rendering path. | boolean | | symbolSize | Size of lollipop symbols. | number | | grid | Shows or hides the chart grid. | Object | | grid.show | Shows the grid when true. | boolean | | valueAxis | Controls value-axis labels and lines. | Object | | valueAxis.show | Shows the axis when true. | boolean | | valueAxis.name | Axis title text. | string | | valueAxis.label | Styles axis labels. | Object | | valueAxis.label.show | Shows labels when true. | boolean | | valueAxis.label.color | Label text color. | string | | valueAxis.label.fontSize | Label text size. | number | | valueAxis.label.fontWeight | Label font weight. | string \| number | | valueAxis.label.formatter | Formats label text. | string \| function | | valueAxis.splitLine | Controls split lines. | Object | | valueAxis.axisLine | Controls the axis baseline. | Object | | valueAxis.nameTextStyle | Styles the axis title. | Object | | valueAxis.nameTextStyle.color | Text color. | string | | valueAxis.nameTextStyle.fontSize | Text size. | number | | valueAxis.nameTextStyle.fontWeight | Text font weight. | string \| number | | valueAxis.label.rotate | Axis label rotation. | number \| boolean \| 'tangential' | | valueAxis.splitLine.show | Shows split lines when true. | boolean | | valueAxis.splitLine.lineStyle | Styles split lines. | Object | | valueAxis.splitLine.lineStyle.show | Shows this line group when true. | boolean | | valueAxis.splitLine.lineStyle.color | Line color. | string | | valueAxis.splitLine.lineStyle.stroke | Alias for line color. | string | | valueAxis.splitLine.lineStyle.width | Line width. | number | | valueAxis.splitLine.lineStyle.lineWidth | Alias for line width. | number | | valueAxis.splitLine.lineStyle.opacity | Line opacity. | number | | valueAxis.splitLine.lineStyle.type | Line dash style. | 'solid' \| 'dashed' \| 'dotted' \| number[] \| string | | valueAxis.splitLine.lineStyle.dashOffset | Dash pattern offset. | number | | valueAxis.splitLine.lineStyle.lineDashOffset | Alias for dash pattern offset. | number | | valueAxis.splitLine.lineStyle.cornerRadius | Corner radius for routed lines. | number | | valueAxis.splitLine.lineStyle.cap | Line cap style. | 'round' \| 'butt' \| 'square' | | valueAxis.splitLine.lineStyle.join | Line join style. | 'round' \| 'bevel' \| 'miter' | | valueAxis.splitLine.lineStyle.dashArray | Dash pattern. | number[] \| string | | valueAxis.splitLine.lineStyle.lineDash | Dash pattern alias. | number[] | | valueAxis.axisLine.show | Shows the axis baseline when true. | boolean | | valueAxis.axisLine.lineStyle | Styles the axis baseline. | Object | | valueAxis.axisLine.lineStyle.show | Shows this line group when true. | boolean | | valueAxis.axisLine.lineStyle.color | Line color. | string | | valueAxis.axisLine.lineStyle.stroke | Alias for line color. | string | | valueAxis.axisLine.lineStyle.width | Line width. | number | | valueAxis.axisLine.lineStyle.lineWidth | Alias for line width. | number | | valueAxis.axisLine.lineStyle.opacity | Line opacity. | number | | valueAxis.axisLine.lineStyle.type | Line dash style. | 'solid' \| 'dashed' \| 'dotted' \| number[] \| string | | valueAxis.axisLine.lineStyle.dashOffset | Dash pattern offset. | number | | valueAxis.axisLine.lineStyle.lineDashOffset | Alias for dash pattern offset. | number | | valueAxis.axisLine.lineStyle.cornerRadius | Corner radius for routed lines. | number | | valueAxis.axisLine.lineStyle.cap | Line cap style. | 'round' \| 'butt' \| 'square' | | valueAxis.axisLine.lineStyle.join | Line join style. | 'round' \| 'bevel' \| 'miter' | | valueAxis.axisLine.lineStyle.dashArray | Dash pattern. | number[] \| string | | valueAxis.axisLine.lineStyle.lineDash | Dash pattern alias. | number[] | | categoryAxis | Controls category-axis labels and lines. | Object | | categoryAxis.show | Shows the axis when true. | boolean | | categoryAxis.name | Axis title text. | string | | categoryAxis.label | Styles axis labels. | Object | | categoryAxis.label.show | Shows labels when true. | boolean | | categoryAxis.label.color | Label text color. | string | | categoryAxis.label.fontSize | Label text size. | number | | categoryAxis.label.fontWeight | Label font weight. | string \| number | | categoryAxis.label.formatter | Formats label text. | string \| function | | categoryAxis.splitLine | Controls split lines. | Object | | categoryAxis.axisLine | Controls the axis baseline. | Object | | categoryAxis.nameTextStyle | Styles the axis title. | Object | | categoryAxis.nameTextStyle.color | Text color. | string | | categoryAxis.nameTextStyle.fontSize | Text size. | number | | categoryAxis.nameTextStyle.fontWeight | Text font weight. | string \| number | | categoryAxis.label.rotate | Axis label rotation. | number \| boolean \| 'tangential' | | categoryAxis.splitLine.show | Shows split lines when true. | boolean | | categoryAxis.splitLine.lineStyle | Styles split lines. | Object | | categoryAxis.splitLine.lineStyle.show | Shows this line group when true. | boolean | | categoryAxis.splitLine.lineStyle.color | Line color. | string | | categoryAxis.splitLine.lineStyle.stroke | Alias for line color. | string | | categoryAxis.splitLine.lineStyle.width | Line width. | number | | categoryAxis.splitLine.lineStyle.lineWidth | Alias for line width. | number | | categoryAxis.splitLine.lineStyle.opacity | Line opacity. | number | | categoryAxis.splitLine.lineStyle.type | Line dash style. | 'solid' \| 'dashed' \| 'dotted' \| number[] \| string | | categoryAxis.splitLine.lineStyle.dashOffset | Dash pattern offset. | number | | categoryAxis.splitLine.lineStyle.lineDashOffset | Alias for dash pattern offset. | number | | categoryAxis.splitLine.lineStyle.cornerRadius | Corner radius for routed lines. | number | | categoryAxis.splitLine.lineStyle.cap | Line cap style. | 'round' \| 'butt' \| 'square' | | categoryAxis.splitLine.lineStyle.join | Line join style. | 'round' \| 'bevel' \| 'miter' | | categoryAxis.splitLine.lineStyle.dashArray | Dash pattern. | number[] \| string | | categoryAxis.splitLine.lineStyle.lineDash | Dash pattern alias. | number[] | | categoryAxis.axisLine.show | Shows the axis baseline when true. | boolean | | categoryAxis.axisLine.lineStyle | Styles the axis baseline. | Object | | categoryAxis.axisLine.lineStyle.show | Shows this line group when true. | boolean | | categoryAxis.axisLine.lineStyle.color | Line color. | string | | categoryAxis.axisLine.lineStyle.stroke | Alias for line color. | string | | categoryAxis.axisLine.lineStyle.width | Line width. | number | | categoryAxis.axisLine.lineStyle.lineWidth | Alias for line width. | number | | categoryAxis.axisLine.lineStyle.opacity | Line opacity. | number | | categoryAxis.axisLine.lineStyle.type | Line dash style. | 'solid' \| 'dashed' \| 'dotted' \| number[] \| string | | categoryAxis.axisLine.lineStyle.dashOffset | Dash pattern offset. | number | | categoryAxis.axisLine.lineStyle.lineDashOffset | Alias for dash pattern offset. | number | | categoryAxis.axisLine.lineStyle.cornerRadius | Corner radius for routed lines. | number | | categoryAxis.axisLine.lineStyle.cap | Line cap style. | 'round' \| 'butt' \| 'square' | | categoryAxis.axisLine.lineStyle.join | Line join style. | 'round' \| 'bevel' \| 'miter' | | categoryAxis.axisLine.lineStyle.dashArray | Dash pattern. | number[] \| string | | categoryAxis.axisLine.lineStyle.lineDash | Dash pattern alias. | number[] | | stemStyle | Styles lollipop stems. | Object | | stemStyle.color | Primary color. | string | | stemStyle.stroke | Stroke color. | string | | stemStyle.width | Width value. | number | | stemStyle.lineWidth | Line width. | number | | stemStyle.opacity | Opacity. | number | | stemStyle.type | Line or item type. | 'solid' \| 'dashed' \| 'dotted' \| number[] | | itemStyle | Styles lollipop symbols. | Object | | itemStyle.color | Primary color. | string | | itemStyle.opacity | Opacity. | number | | itemStyle.borderColor | Border color. | string | | itemStyle.borderWidth | Border width. | number | | itemStyle.shadowBlur | Shadow blur radius. | number | | itemStyle.shadowColor | Shadow color. | string | | label | Styles data labels. | Object | | label.show | Shows labels when true. | boolean | | label.color | Label text color. | string | | label.fontSize | Label text size. | number | | label.fontWeight | Label font weight. | string \| number | | label.formatter | Formats label text. | string \| function | | emphasis | Styles symbols while hovered. | Object | | emphasis.itemStyle | Nested item style option. | object | | emphasis.itemStyle.color | Fill color. | string | | emphasis.itemStyle.fill | Alias for fill color. | string | | emphasis.itemStyle.opacity | Fill opacity. | number | | emphasis.itemStyle.borderColor | Border color. | string | | emphasis.itemStyle.borderWidth | Border width. | number | | emphasis.itemStyle.borderRadius | Corner radius. | number | | emphasis.itemStyle.shadowBlur | Shadow blur radius. | number | | emphasis.itemStyle.shadowColor | Shadow color. | string | | emphasis.itemStyle.lineWidth | Stroke width used by icon or shape styles. | number | | emphasis.edgeStyle | Nested edgeStyle option. | object | | emphasis.edgeStyle.color | Fill color. | string | | emphasis.edgeStyle.fill | Alias for fill color. | string | | emphasis.edgeStyle.opacity | Fill opacity. | number | | emphasis.edgeStyle.borderColor | Border color. | string | | emphasis.edgeStyle.borderWidth | Border width. | number | | emphasis.edgeStyle.borderRadius | Corner radius. | number | | emphasis.edgeStyle.shadowBlur | Shadow blur radius. | number | | emphasis.edgeStyle.shadowColor | Shadow color. | string | | emphasis.edgeStyle.lineWidth | Stroke width used by icon or shape styles. | number | | emphasis.focus | Nested focus option. | string | | emphasis.blurScope | Nested blurScope option. | string |