svgchrtjs
v0.2.8
Published
A way to easily create SVG-based charts without having to worry about positioning of titles, subtitles or legends. Now maintained under the shorter name svgchrt
Downloads
33
Maintainers
Readme
SVGChrt
The easiest way to put together a data visualisation in SVG.
Installation
npm install svgchrt
<script src="https://unpkg.com/svgchrt"></script>
Usage
const SVGChrt = require('svgchrt');
const data = []; // Your dataset
const options = {}; // How you want the visualisation to look
const Chart = SVGChrt.SVGChrt(data,options);
Chart.plot = function() {
/* Remember, this only provides an area
* to display your visualisation without
* having it clash with titles, subtitles
* or your legend. It also easily generates
* the legend for you. The flipside of this
* is that this then allows you to do
* whatever you want with your plot and use
* whichever library you see fit.
*/
};
Chart.render();
Reference
Available options:
background (boolean), default:
true
Decides whether or not to give your chart a background to make it stand out from the page. If set to
true
it will provide a<rect>
element with the class ofchart-background
for styling with CSS, and itsheight
andwidth
attributes will match those of the parent<svg>
.canvas (object)
Contains 4 items:
height (integer), default:
500
Determines the height of your visualisation in pixels.
padding (object)
Contains 4 items:
top
,right
,bottom
andleft
, each of which defaults to10
and 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:
960
Determines the width of your visualisation in pixels.
chart (object)
Contains 1 item:
margin (object)
Contains 4 items:
top
,right
,bottom
andleft
, each of which defaults to10
and 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)
Contains 12 items:
background (object)
Contains 1 item:
display (boolean), default:
false
Decides 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-background
for styling with CSS.displaceTitle (boolean), default:
false
Decides 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.position
is set totop-left
,left
,bottom-left
,top-right
,right
orbottom-right
and theoptions.legend.orientation
is set tovertical
then the title and subtitle will shift (and possibly wrap) into their new smaller container.If
options.legend.position
is set totop
orbottom
oroptions.legend.orientation
is set tohorizontal
then this option is ignored.display (boolean), default:
false
Decides 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:
false
Determines whether to display an icon.
height (integer), default:
14
Determines the height of the icons in pixels.
N.B. The
height
property is only applicable to certain SVG elements, in this case theshape
beneath this defaults torect
which takes a height property.shape (string), default:
'rect'
Determines the shape that the icons should take.
width (integer), default:
14
Determines the width of the icons in pixels.
N.B. The
width
property is only applicable to certain SVG elements, in this case theshape
above this defaults torect
which takes a width property.
itemMargin (object)
Contains 4 items:
top
,right
,bottom
andleft
, each of which defaults to10
and 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
displayName
property 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 aclass
property to style the icons differently (different fill colours for example) with CSS.You can also include an
icon
property 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:
false
Decides whether the legend should be displayed on top of the visualisation or resize the visualisation to fit.
margin (object)
Contains 4 items:
top
,right
,bottom
andleft
, each of which defaults to10
and 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
,bottom
andleft
, each of which defaults to0
and provides an inner padding so that your items are not squashed up to the edge of the legend's background.They default to
0
as a padding is only really recommended if you setoptions.legend.background.display
to true.position (string), default:
'right'
Provides 8 options:
top-left
,top
,top-right
,right
,bottom-right
,bottom
,bottom-left
,left
and 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-title
for styling with CSS.
subtitle (object)
Contains 3 items:
display (boolean), default:
false
Determines whether to display a subtitle on the chart, if it is set to
true
andoptions.subtitle.text
is not an empty string, it will provide a<text>
element with the class ofchart-subtitle
for styling with CSS. Other attributes will bedy="1em"
,text-anchor="middle"
andx
andy
which 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
,bottom
andleft
, each of which defaults to10
and 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.display
is set totrue
, it will provide a<text>
element with the class ofchart-subtitle
for styling with CSS. Other attributes will bedy="1em"
,text-anchor="middle"
andx
andy
which 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:
false
Determines whether to display a title on the chart, if it is set to
true
andoptions.title.text
is not an empty string, it will provide a<text>
element with the class ofchart-title
for styling with CSS. Other attributes will bedy="1em"
,text-anchor="middle"
andx
andy
which 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
,bottom
andleft
, each of which defaults to10
and 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.display
is set totrue
, it will provide a<text>
element with the class ofchart-title
for styling with CSS. Other attributes will bedy="1em"
,text-anchor="middle"
andx
andy
which 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.display
is true, it will add a<title>
element to your SVG to allow assistvie technologies such as screenreaders to see it.