Have ideas to improve npm?Join in the discussion! »

    vue-in-chart

    0.0.1 • Public • Published

    Build Status Coverage Status

    vue-in-charts

    Small Vue component to build simple small 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'" />

    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

    Install

    npm i vue-in-chart

    DownloadsWeekly Downloads

    2

    Version

    0.0.1

    License

    MIT

    Unpacked Size

    25.4 kB

    Total Files

    3

    Last publish

    Collaborators

    • avatar