Skip to content

Small Vue component to build simple small charts. Intended to be inline charts. 📊 📈

Notifications You must be signed in to change notification settings

Menighin/vue-in-charts

Repository files navigation

Build Status Coverage Status

vue-in-charts

Lightweight Vue component to build simple, small, pure SVG charts. Intended to be placed inline boxes and tables. 📊 📈

Install

Install via npm:

$ npm install vue-in-chart

Install via bower:

$ bower install vue-in-chart

Usage

Import the chart you want to use

import InPieChart from 'vue-in-charts';

Use it on your template. Below you can find the options for each chart.

<in-pie-chart
    :slices="[
            { name: 'Slice 1', value: 90, color: '#F44336' },
            { name: 'Slice 2', value: 70, color: '#2196F3' },
            { name: 'Slice 3', value: 50, color: '#8BC34A' },
            { name: 'Slice 4', value: 20, color: '#FFC107' }
        ]"
    :diameter="'100'" />

Example

Check a working fiddle: https://jsfiddle.net/menighin/fvqb90uf/

Properties

Pie Chart (InPieChart)

Property Type Required Default Description
diameter String false '100%' The diameter of the pie. In other words, its width and height.
rotate Number false -90 The rotation of the pie. -90 means the first slice will start at 90º
slices Array (of slice) true An array of objects. Each one representing a slice of the pie.
slice.name String false The name of the slice. Will be displayed on hovering the chart
slice.value Number true The value of the slice. Will be displayed on hovering the chart and also will be used to calculate the percentage
slice.color String true Will be used to fill the slice with the color.

Line Chart (InLineChart)

Property Sub-Prop Type Required Default Description
width String false '250' The width of the chart.
height String false '100' The height of the chart.
show-points Boolean false true Weather or not the points should be drawn.
min-y Number false null The minimum value for the Y axis. If none is passed, the smaller value will be used.
max-y Number false null The maximum value for the Y axis. If none is passed, the greater value will be used.
show-tooltip Boolean false true Wether to show or not the tooltip on hover
lines Array (of line) true An array containing the several lines and its properties. A line is defined as below
line Object true Object that defines a line. Should be used in am array with the lines property above.
data Array (of numbers) An array of numbers representing the Y axis values for the line.
pointRadius Number false 3 The radius of the point on this line. Only applicable if show-points is true.
pointColor String false white The color for the points of this line. Only applicable if show-points is true
strokeWidth Number false 2 The stroke width for this line.
strokeColor String true A color string fpr the line color.
fillColor String false A color string representing the color of the area below the line.
fillColor Array false An array of color strings representing the gradient of the area below the line.
fill-color Object false An object that defines the gradient for the fill color. The properties are listed as follow.
.x1 String true The x1 coordinate for the SVG direction.
.x2 String true The x2 coordinate for the SVG direction.
.y1 String true The y1 coordinate for the SVG direction.
.y2 String true The y2 coordinate for the SVG direction.
.stops Array (of stop) true An array of stops.
.stop.offset String true Percentage of the gradient.
.stop.color String true Color of the stop.

Bar Chart (InBarChart)

Property Sub-Prop Type Required Default Description
width String false '250' The width of the chart.
height String false '100' The height of the chart.
min-y Number false null The minimum value for the Y axis. If none is passed, the smaller value will be used.
max-y Number false null The maximum value for the Y axis. If none is passed, the greater value will be used.
show-tooltip Boolean false true Wether to show or not the tooltip on hover.
stroke-width Number false 1 The stroke width for the bars.
stroke-color String false #333 The stroke color for the bars.
padding Number false 0 The padding among the bars.
fill-color String false tomato The general color for each bar.
fill-color Array false An array of string of colors. The colors will be drawn as a vertical gradient.
fill-color Object false An object that defines the gradient for the fill color. The properties are listed as follow.
.x1 String true The x1 coordinate for the SVG direction.
.x2 String true The x2 coordinate for the SVG direction.
.y1 String true The y1 coordinate for the SVG direction.
.y2 String true The y2 coordinate for the SVG direction.
.stops Array (of stop) true An array of stops.
.stop.offset String true Percentage of the gradient.
.stop.color String true Color of the stop.
bars Array (of numbers) true Array of numbers representing the values for the bars
bars Array (of objects) true Array of objects representing the values for the bars. A bar is defined as below
bar Object Object that defines a bar. Should be used in am array with the bars property above.
value Number true The value for the bar.
fill-color This is a specific color for the bar. It overrides the fill-color property above and accept any format as described above

About

Small Vue component to build simple small charts. Intended to be inline charts. 📊 📈

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published