JavaScript Box Plot Chart 

VIEW MORE CHARTS
SAVE
VIEW HTML
EDIT ON CODEPEN
A box plot chart is used to represent the distribution of data. Box plots are commonly used to highlight outlying data. To create a box plot chart using KoolChart's JavaScript charting library, the <BoxPlotChart> and <BoxPlotSeries> elements must be set in Layout. The colors for the box border and the line at the median value can be configured using the <boxStroke> and <medianStroke> elements.
<BoxPlotChart showDataTips="true" dataTipFormatter="{nft}" columnWidthRatio="0.42">
...
<series>
<BoxPlotSeries yField="Drug1" displayName="Drug - 1">
<medianStroke>
<Stroke color="#c7111e" weight="value"/>
</medianStroke>
<boxStroke>
<Stroke color="#e14159" weight="1"/>
</boxStroke>
<fill>
<SolidColor color="#d1af94" />
</fill>
...
</BoxPlotSeries>
<BoxPlotSeries yField="Drug2" displayName="Drug - 2">
<medianStroke>
<Stroke color="#c7111e" weight="value"/>
</medianStroke>
<boxStroke>
<Stroke color="#e14159" weight="1"/>
</boxStroke>
<fill>
<SolidColor color="#d1af94" />
</fill>
...
</BoxPlotSeries>
</series>
...
</BoxPlotChart>