This is a simple web component for a bar chart. See the file example.html for
an example of how to use it, or take a look at this
codepen.
| Property | Default | Description |
|---|---|---|
--background-fill |
#EEEEEE |
The SVG fill of the background. |
--bar-fill |
#BDBDBD |
The SVG fill of the bars. |
--bar-rx |
2 |
The SVG rx (x-axis radius) of the bars. |
--bar-ry |
2 |
The SVG ry (y-axis radius) of the bars. |
--bar-stroke |
#9E9E9E |
The SVG stroke of the bars. |
--bar-stroke-width |
2 |
The SVG width for the stroke of the bars. |
--border |
none |
The CSS border property of the component. |
--border-radius |
0 |
The CSS border-radius property of the component. |
--box-shadow |
none |
The CSS box-shadow property of the component. |
--height |
auto |
The CSS height of the component. |
--horizontal-line-stroke |
#BDBDBD |
The SVG stroke for the horizontal lines of the y-axis labels. |
--horizontal-line-stroke-width |
2 |
The SVG stroke-width for the horizontal lines of the y-axis labels. |
--margin |
0 |
The CSS margin of the component. |
--text-fill |
#616161 |
The SVG fill for all the text in the component. |
--text-font |
16px Arial, Helvetica, sans-serif |
The SVG font for all the text in the component. |
--title-fill |
var(--text-fill) |
The SVG fill for the title. |
--title-font |
var(--text-font) |
The SVG font for the title. |
--width |
auto |
The CSS width of the component. |
--x-label-fill |
var(--text-fill) |
The SVG fill for the x-label. |
--x-label-font |
var(--text-font) |
The SVG font for the x-label. |
--x-legend-fill |
var(--text-fill) |
The SVG fill for the x-legend. |
--x-legend-font |
var(--text-font) |
The SVG font for the x-legend. |
--y-label-fill |
var(--text-fill) |
The SVG fill for the y-label. |
--y-label-font |
var(--text-font) |
The SVG font for the y-label. |
--y-legend-fill |
var(--text-fill) |
The SVG fill for the y-legend. |
--y-legend-font |
var(--text-font) |
The SVG font for the y-legend. |
- new BarChart()
Creates a new BarChart instance.
- plot([options])
Configures and shows the chart.
- update(values)
Updates the bars of the chart with an array of values.
Configures and shows the chart.
| Param | Type | Default | Description |
|---|---|---|---|
| [options] | Object |
The options for the chart. | |
| [options.size] | number |
10 |
The number of values to plot. |
| [options.width] | number |
600 |
The width of the SVG viewport. |
| [options.height] | number |
400 |
The height of the SVG viewport. |
| [options.padding] | number |
10 |
The padding around the chart. |
| [options.gapFraction] | number |
0.2 |
The fraction of the content to use for the gaps between the bars. |
| [options.values] | number |
[] |
The values to plot. |
| [options.minValue] | number |
0 |
The minimum value to plot, i.e. the value for which the height of the bars is 0. |
| [options.maxValue] | number |
The maximum value to plot, i.e. the value for which the height of the bar is at the top. By default it is the value of the maximum label provided for the Y axis, if those are present. If there are no labels for the Y axis, then the hight of the bars will be relative to the height of the bar with the maximum value. | |
| [options.xLabels] | Array.<string> | Array.<number> |
[] |
The labels of the X axis. |
| [options.xLabelsGap] | number |
0 |
The gap between the labels of the X axis and the bars of the chart. |
| [options.xLabelsRotation] | number |
0 |
The rotation in degrees of the labels in the X axis. |
| [options.yLabels] | Array.<number> |
[] |
The labels of the Y axis. |
| [options.yLabelsGap] | number |
0 |
The gap between the Y axis labels and the bars. |
| [options.yLabelsMapping] | Array.<string> |
|
If given, should be an array of the same size than options.yLabels. Each label in options.yLabels will be replaced in the chart by the corresponding value in this array. |
| [options.xLegend] | string |
null |
The legend of the X axis. |
| [options.xLegendGap] | number |
0 |
The gap between the legend of the X axis and the labels of the same axis. |
| [options.yLegend] | string |
null |
The legend of the Y axis. |
| [options.yLegendGap] | number |
0 |
The gap between the Y axis legend and the Y axis labels. |
| [options.title] | string |
null |
The title of the chart. |
| [options.titleGap] | number |
0 |
The gap between the title of the chart and the bars. |
| [options.showHorizontalLines] | boolean |
true |
true if the chart should show horizontal bars for each of the labels in options.yLabels, false otherwise. |
Updates the bars of the chart with an array of values.
| Param | Type | Description |
|---|---|---|
| values | Array.<number> |
The array of values with which to update the chart. |