0.0.1 • Published 6 years ago
vue-in-chart v0.0.1
vue-in-charts
Small Vue component to build simple small charts. Intended to be placed inline boxes and tables. :bar_chart: :chart_with_upwards_trend:
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'" />
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 |
0.0.1
6 years ago