npm install svgchrt-column
<script src="https://unpkg.com/svgchrt-column"></script>
const SVGChrtColumn = require('svgchrt-column');
const options = {}; // How you want the visualisation to look
const data = []; // What data you want to represent
const Chart = new SVGChrtColumn(options,data);
Chart.render();-
background (boolean), default:
trueDecides whether or not to give your chart a background to make it stand out from the page. If set to
trueit will provide a<rect>element with the class ofchart-backgroundfor styling with CSS, and itsheightandwidthattributes will match those of the parent<svg>. -
canvas (object)
Contains 4 items:
-
height (integer), default:
500Determines the height of your visualisation in pixels.
-
padding (object)
Contains 4 items:
top,right,bottomandleft, each of which defaults to10and provides an inner padding so that your visualisation is not squashed up to the edge of the SVG. -
viewBox (string), default:
'0 0 960 500'Determines the viewBox of your
<svg>and should usually match0 0 width height. -
width (integer), default:
960Determines the width of your visualisation in pixels.
-
-
chart (object)
Contains 2 items:
-
axes (object)
Contains 4 items:
bottom,left,topandright, each of which is also an object containing 2 items:-
display (boolean), default:
falseDecides whether or not to display the axis - currently you have to have one of the top and bottom and one of the left and right set to true, this will be fixed.
-
label (object)
Contains 2 items:
-
display (boolean), default:
falseDecides whether or not to display the axis's label - currently this has to be displayed if the axis is, this will be fixed.
-
text (string), default:
''Contains the text to display as the axis's label, if it is not an empty string and
options.chart.axes.<bottom|left|top|right>.label.displayis set totrue, it will provide a<text>element with the class ofaxis-labelfor styling with CSS. Other attributes will bedy="1em",text-anchor="middle"andxandywhich the library will calculate.
-
-
-
margin (object)
Contains 4 items:
top,right,bottomandleft, each of which defaults to10and provides a margin around your visualisation so that it can be visually separate from the rest of the elements.
-
-
description (string), default:
''Provides a description of your visualisation to assistive technologies such as screen readers.
-
id (string), defaut:
''Adds an ID to the parent SVG. Please include an ID
-
legend (object)
If the legend is set to display, then it will build and display the legend on your chart as dtermined by the below options. It add a
<g>element with the id and the classlegend, containing a list of<g>elements with the classlegend-item. Each of theseg.legenditems contains a shape (<rect>is the default) with the classlegend-item-icon, dependent on the options, and a<text>element with the classlegend-item-text.Contains 12 items:
-
background (object)
Contains 1 item:
-
display (boolean), default:
falseDecides whether or not to add a background to the legend. If it is set to true it will add a
<rect>element with the classlegend-backgroundfor styling with CSS.
-
-
displaceTitle (boolean), default:
falseDecides whether the placement of the legend should have an effect on the positioning of the title and subtitle. If it set to true then if
options.legend.positionis set totop-left,left,bottom-left,top-right,rightorbottom-rightand theoptions.legend.orientationis set toverticalthen the title and subtitle will shift (and possibly wrap) into their new smaller container.If
options.legend.positionis set totoporbottomoroptions.legend.orientationis set tohorizontalthen this option is ignored. -
display (boolean), default:
falseDecides whether or not to display the legend.
-
icons (object)
Provides a default for the icons contained in each legend item.
Contains 4 items:
-
display (boolean), default:
falseDetermines whether to display an icon.
-
height (integer), default:
14Determines the height of the icons in pixels.
N.B. The
heightproperty is only applicable to certain SVG elements, in this case theshapebeneath this defaults torectwhich takes a height property. -
shape (string), default:
'rect'Determines the shape that the icons should take.
-
width (integer), default:
14Determines the width of the icons in pixels.
N.B. The
widthproperty is only applicable to certain SVG elements, in this case theshapeabove this defaults torectwhich takes a width property.
-
-
itemMargin (object)
Contains 4 items:
top,right,bottomandleft, each of which defaults to10and provides a margin between each legend item to allow them to be visually separate from each other. -
items (array), default:
[]An array of objects to be displayed on the legend. Each object must contain a
displayNameproperty which contains the text that will be displayed, this can either be a string or a function that returns a string. You may also want to include aclassproperty to style the icons differently (different fill colours for example) with CSS.You can also include an
iconproperty as an object, if you want to overwrite your default icon options set above.As you may be pulling in your legend items from a dataset containing many more properties, the library will simply ignore any additional properties.
If this array is empty then the legend will not display.
-
layOverChart (boolean), default:
falseDecides whether the legend should be displayed on top of the visualisation or resize the visualisation to fit.
-
margin (object)
Contains 4 items:
top,right,bottomandleft, each of which defaults to10and provides a margin around your legend so that it can be visually separate from the rest of the elements. -
orientation (string), default:
'vertical'Decides whether your legend items should stack vertically on top of one another or horizontally next to each other.
-
padding (object)
Contains 4 items:
top,right,bottomandleft, each of which defaults to0and provides an inner padding so that your items are not squashed up to the edge of the legend's background.They default to
0as a padding is only really recommended if you setoptions.legend.background.displayto true. -
position (string), default:
'right'Provides 8 options:
top-left,top,top-right,right,bottom-right,bottom,bottom-left,leftand decides where the legend should be on your SVG. -
title (string), default:
''Future update
Adds a title to the legend and provides a
<text>element with the classlegend-titlefor styling with CSS.
-
-
subtitle (object)
Contains 3 items:
-
display (boolean), default:
falseDetermines whether to display a subtitle on the chart, if it is set to
trueandoptions.subtitle.textis not an empty string, it will provide a<text>element with the class ofchart-subtitlefor styling with CSS. Other attributes will bedy="1em",text-anchor="middle"andxandywhich the library will calculate. Should the subtitle be too long to fit onto a single line, the<text>element will contain 2 or more<tspan>elements. -
margin (object)
Contains 4 items:
top,right,bottomandleft, each of which defaults to10and provides a margin around your subtitle so that it can be visually separate from the rest of the elements. -
text (string), default:
''Contains the text to display as the subtitle, if it is not an empty string and
options.subtitle.displayis set totrue, it will provide a<text 694D >element with the class ofchart-subtitlefor styling with CSS. Other attributes will bedy="1em",text-anchor="middle"andxandywhich the library will calculate. Should the subtitle be too long to fit onto a single line, the<text>element will contain 2 or more<tspan>elements.
-
-
target (string), default:
''REQUIREDTargets the container
<div>or<section>where your visualisation is to be displayed. Will throw an error is either left blank or the target element does not exist.Can target either an element's ID or its querySelector.
-
title (object)
Please include a title
Contains 3 items:
-
display (boolean), default:
falseDetermines whether to display a title on the chart, if it is set to
trueandoptions.title.textis not an empty string, it will provide a<text>element with the class ofchart-titlefor styling with CSS. Other attributes will bedy="1em",text-anchor="middle"andxandywhich the library will calculate. Should the title be too long to fit onto a single line, the<text>element will contain 2 or more<tspan>elements. -
margin (object)
Contains 4 items:
top,right,bottomandleft, each of which defaults to10and provides a margin around your subtitle so that it can be visually separate from the rest of the elements. -
text (string), default:
''Contains the text to display as the title, if it is not an empty string and
options.title.displayis set totrue, it will provide a<text>element with the class ofchart-titlefor styling with CSS. Other attributes will bedy="1em",text-anchor="middle"andxandywhich the library will calculate. Should the title be too long to fit onto a single line, the<text>element will contain 2 or more<tspan>elements.If it is not an empty string then, regardless of whether
options.title.displayis true, it will add a<title>element to your SVG to allow assistvie technologies such as screenreaders to see it.
-