Skip to content

bc-chart-boxplot.md

Latest commit

 

History

History
69 lines (56 loc) · 2.21 KB

bc-chart-boxplot.md

File metadata and controls

69 lines (56 loc) · 2.21 KB

bc-chart-boxplot

Box plot / box-and-whisker chart (ECharts)

Quick Start

<bc-chart-boxplot data='{"categories":["A","B","C"],"data":[[850,940,960,980,1070],[960,1000,1050,1090,1100],[880,920,950,1000,1080]]}' />

Props

Prop Type Default Description
data string (JSON) '[]' Chart data — {categories, data}
chart-title string '' Chart title
colors string (JSON) '' Color palette ["#4f46e5","#06b6d4"]
legend boolean true Show legend
tooltip-enabled boolean true Show tooltip
animate boolean true Enable animation
height string '300px' Chart height
width string '100%' Chart width
loading boolean false Show loading overlay
data-source string '' Remote data URL
fetch-headers string '' Custom fetch headers (JSON)
refresh-interval number 0 Auto-refresh interval (ms)
theme string '' ECharts theme ('dark' or custom JSON)
renderer string 'canvas' Renderer ('canvas' or 'svg')
toolbox boolean false Show toolbox (save, zoom, restore)
data-zoom boolean false Show data zoom slider
locale string '' ECharts locale

Data Format

{
  "categories": ["Group A","Group B","Group C"],
  "data": [
    [850, 940, 960, 980, 1070],
    [960, 1000, 1050, 1090, 1100],
    [880, 920, 950, 1000, 1080]
  ]
}

Each data item is [min, Q1, median, Q3, max].

Events

Event Payload
lcChartClick {name, value, dataIndex}
lcChartHover {name, value, dataIndex}
lcChartLegendSelect {name, selected}
lcChartDataZoom {start, end}
lcChartReady void

Methods

Method Returns Description
updateData(data) Promise Update chart data
setData(data) Promise Alias for updateData
refresh() Promise Re-fetch or re-render
resize() Promise Resize chart
exportImage(format?) Promise Export as image (png/jpeg/svg)
getChartInstance() Promise Get raw ECharts instance

See theming, data-fetching.