JavaScript Box Plot Chart
Creates a JavaScript Box Plot Chart using SciChart.js, using our new FastBoxPlotRenderableSeries chart type.
Also Known As: Box-and-Whisker Plot.
drawExample.ts
index.html
vanilla.ts
theme.ts
1import {
2 BoxPlotDataSeries,
3 CategoryAxis,
4 EAutoRange,
5 EAxisAlignment,
6 EDataPointWidthMode,
7 ENumericFormat,
8 FastBoxPlotRenderableSeries,
9 ICategoryAxisOptions,
10 NumberRange,
11 NumericAxis,
12 Rect,
13 SciChartSubSurface,
14 SciChartSurface,
15 ZoomExtentsModifier,
16 ZoomPanModifier,
17} from "scichart";
18import { appTheme } from "../../../theme";
19
20const NUMERIC_AXIS_OPTIONS = {
21 axisAlignment: EAxisAlignment.Left,
22 growBy: new NumberRange(0.05, 0.05),
23 autoRange: EAutoRange.Once,
24 flippedCoordinates: false,
25 labelFormat: ENumericFormat.Decimal,
26 labelPrecision: 0,
27};
28
29export const drawExample = async (rootElement: string | HTMLDivElement) => {
30 const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement);
31
32 // 1st sub-surface
33 const sub1 = SciChartSubSurface.createSubSurface(sciChartSurface, {
34 position: new Rect(0, 0, 0.5, 1),
35 theme: appTheme.SciChartJsTheme,
36 });
37
38 sub1.xAxes.add(
39 new CategoryAxis(wasmContext, {
40 growBy: new NumberRange(0.05, 0.05),
41 labels: ["P1", "P2", "P3", "P4", "P5", "P6"],
42 axisAlignment: EAxisAlignment.Left,
43 })
44 );
45 sub1.yAxes.add(
46 new NumericAxis(wasmContext, {
47 axisAlignment: EAxisAlignment.Bottom,
48 growBy: new NumberRange(0.05, 0.05),
49 autoRange: EAutoRange.Once,
50 flippedCoordinates: true,
51 labelFormat: ENumericFormat.Decimal,
52 labelPrecision: 0,
53 })
54 );
55
56 const boxSeries1 = new FastBoxPlotRenderableSeries(wasmContext, {
57 dataSeries: new BoxPlotDataSeries(wasmContext, {
58 xValues: [1, 2, 3, 4, 5, 6],
59 minimumValues: [0, 1, 0.5, 0, 1, 0.5],
60 maximumValues: [10, 9, 9.5, 10, 9, 9.5],
61 medianValues: [4.5, 5.5, 5, 4.5, 5.5, 5],
62 lowerQuartileValues: [3, 4, 3.5, 3, 4, 3.5],
63 upperQuartileValues: [7, 6, 6.5, 7, 6, 6.5],
64 }),
65 stroke: appTheme.MutedSkyBlue,
66 fill: appTheme.MutedSkyBlue + "66",
67 strokeThickness: 2,
68 dataPointWidthMode: EDataPointWidthMode.Relative,
69 dataPointWidth: 0.5,
70 opacity: 0.8,
71 whiskers: {
72 stroke: appTheme.MutedSkyBlue,
73 strokeThickness: 2,
74 strokeDashArray: [5, 5],
75 },
76 cap: {
77 stroke: appTheme.MutedOrange,
78 strokeThickness: 2,
79 dataPointWidth: 0.5,
80 },
81 medianLine: {
82 stroke: appTheme.MutedOrange,
83 strokeThickness: 2,
84 },
85 });
86 sub1.renderableSeries.add(boxSeries1);
87
88 // 2nd sub-surface
89 const sub2 = SciChartSubSurface.createSubSurface(sciChartSurface, {
90 position: new Rect(0.5, 0, 0.5, 1),
91 theme: appTheme.SciChartJsTheme,
92 });
93
94 sub2.xAxes.add(
95 new NumericAxis(wasmContext, {
96 growBy: new NumberRange(0.1, 0.1),
97 autoRange: EAutoRange.Once,
98 labelFormat: ENumericFormat.Decimal,
99 labelPrecision: 0,
100 })
101 );
102 sub2.yAxes.add(
103 new NumericAxis(wasmContext, {
104 axisAlignment: EAxisAlignment.Left,
105 growBy: new NumberRange(0.05, 0.05),
106 autoRange: EAutoRange.Once,
107 flippedCoordinates: false,
108 labelFormat: ENumericFormat.Decimal,
109 labelPrecision: 0,
110 })
111 );
112
113 const boxSeries2 = new FastBoxPlotRenderableSeries(wasmContext, {
114 dataSeries: new BoxPlotDataSeries(wasmContext, {
115 xValues: [1, 2, 5, 7.5, 12],
116 minimumValues: [0, 1, 2, 5, 7],
117 lowerQuartileValues: [1, 2, 3.5, 6, 9],
118 medianValues: [3, 2.8, 6, 7, 10],
119 upperQuartileValues: [4, 3, 8, 9, 11],
120 maximumValues: [5, 4, 9.5, 10, 13],
121 }),
122 stroke: appTheme.MutedTeal,
123 fill: appTheme.MutedPurple + "66",
124 strokeThickness: 1,
125 dataPointWidthMode: EDataPointWidthMode.Range,
126 dataPointWidth: 0.6,
127 opacity: 0.8,
128 whiskers: {
129 stroke: appTheme.MutedTeal,
130 strokeThickness: 1,
131 },
132 cap: {
133 stroke: appTheme.MutedPurple,
134 strokeThickness: 2,
135 dataPointWidth: 0.5,
136 },
137 medianLine: {
138 stroke: appTheme.MutedPurple,
139 strokeThickness: 2,
140 },
141 });
142 sub2.chartModifiers.add(new ZoomPanModifier(), new ZoomExtentsModifier());
143 sub2.renderableSeries.add(boxSeries2);
144
145 return { sciChartSurface, wasmContext };
146};
147Box Plot Chart - JavaScript
Overview
This example demonstrates how to create a Box Plot Chart using SciChart.js in JavaScript, showcasing four distinct box plot visualizations in sub-surfaces. Each plot displays statistical data distribution through minimum, maximum, median, and quartile values.
Technical Implementation
The chart initializes asynchronously using SciChartSurface.create(), with four sub-surfaces created via SciChartSubSurface. Each surface uses a CategoryAxis for X-values and NumericAxis for Y-values. The box plots are rendered using FastBoxPlotRenderableSeries with BoxPlotDataSeries for data storage. Key configurations include dataPointWidthMode and custom styling for whiskers, caps, and median lines.
Features and Capabilities
The example highlights multiple box plots with varied datasets and orientations, including flipped coordinates. Each plot features distinct colors and styling, demonstrating customization options for whiskers, caps, and median lines.
Integration and Best Practices
The implementation follows best practices for asynchronous chart initialization and cleanup. Developers can extend this example by integrating dynamic data updates or additional interactive modifiers.
javascript Chart Examples & Demos
See Also: Charts added in v4 (16 Demos)
JavaScript Histogram Chart
Create a JavaScript Histogram Chart with custom texture fills and patterns. Try the SciChart.js library for seamless integration today.
JavaScript Gantt Chart Example
Build a JavaScript Gantt Chart with SciChart. View the demo for horizontal bars, rounded corners and data labels to show project timelines and task completion.
JavaScript Choropleth Map Example
Create a JavaScript Choropleth map, a type of thematic map where areas are shaded or patterned in proportion to the value of a variable being represented.
JavaScript Multi-Layer Map Example
Create a JavaScript Multi-Layer Map Example, using FastTriangleRenderableSeries with GeoJSON data-points using a constrained delaunay triangulation algorithm.
JavaScript Animated Bar Chart Example
Bring annual comparison data to life with the JavaScript Animated Bar Chart example from SciChart. This demo showcases top 10 tennis players from 1990 to 2024.
JavaScript Vector Field Plot
View the JavaScript Vector Field Plot example from SciChart, including dynamic vector generation, gradient-colored segments, and interactive zoom/pan. Try demo.
JavaScript Waterfall Chart | Bridge Chart
Build a JavaScript Waterfall Chart with dynamic coloring, multi-line data labels and responsive design. Try SciChart.js for seamless integration today.
JavaScript Triangle Series | Triangle Mesh Chart
Create JavaScript Triangle Meshes with the Triangle Series from SciChart. This demo supports strip mode, list mode and the drawing of polygons. View the example.
JavaScript Treemap Chart
Create a JavaScript Treemap Chart to define rectangle positions based on total value. Use SciChart FastRectangleRenderableSeries and d3-hierarchy.js layouts.
JavaScript Map Chart with Heatmap overlay
Design a highly dynamic JavaScript Map Chart with Heatmap overlay with SciChart's feature-rich JavaScript Chart Library. Get your free demo today.
Realtime Audio Analyzer Bars Demo
Demonstrating the capability of SciChart.js to create a JavaScript Audio Analyzer Bars and visualize the Fourier-Transform of an audio waveform in realtime.
JavaScript Linear Gauges Example
View the JavaScript Linear Gauge Chart example to combine rectangles & annotations. Create a linear gauge dashboard with animated indicators and custom scales.
JavaScript Order of Rendering Example
The JavaScript Order of Rendering example gives you full control of the draw order of series and annotations for charts. Try SciChart's advanced customizations.
JavaScript Responsive HTML Annotations Example
Build Responsive JavaScript HTML Annotations with SciChart. Use the advanced CSS container queries for responsive text layout and custom design. View demo now.
HTML Annotations and Custom in-chart Controls Example
JavaScript HTML Chart Control example demonstrates advanced HTML annotation integration and how to render HTML components within charts. Try the SciChart demo.
JavaScript Polar Modifiers | Polar Interactivity Modifiers Demo
Explore SciChart's Polar Interactivity Modifiers including zooming, panning, and cursor tracking. Try the demo to trial the Polar Chart Behavior Modifiers.