vue-chartmaker

A Vue.JS Component for making chart in HTML and CSS

Installation

In your terminal / powershell, within your project folder, run the following command :

npm install vue-chartmaker --save

In order to use the library, you must import it in your <script></script>, in your .vue files:

<script>
    import ChartMaker from 'vue-chartmaker'

    export default {
        name: 'YourComponentName',
        components: {
            ChartMaker
        },
        data: function() {
            return {
                params: {
                    /* Your params ... */
                }
            }
        }
    }
</script>

To use it in your template, you can include it like any components :

<template>
    <div>
        <chart-maker v-bind:params="params">
            <!-- Your code ... -->
        </chart-maker>
    </div>
</template>

Common Params

The component 'ChartMaker' accepts an object as 'params' attribute.
The following properties are common for every charts :

1. 'id' (mandatory) : The id of the graph. It will be prefixed by 'vue-chartmaker-chart-'.
2. 'title' (optional) : The title of the graph. It will be display in a Bootstrap Jumbotron at the top of the chart.
3. 'description' (optional): A little description of the graph. It will be display like a descriptive text at the bottom of the chart.
4. 'type' (mandatory) : The type of the graph. At the moment, it could be : 'pie' or 'bar'.

Bar Chart

For 'Bar' charts, a property 'xMax' must also be specified in order to fix a size to the graph.
Here is an example of an object to be pass to 'ChartMaker' component :

const params = {
    id: "loading-time",
    title: "Loading time",
    description: "Loading time of all css files in milliseconds",
    type: 'bar',
    xMax: 100
}

In order to add data, we must use <tr>, <th> and <td> within the <chart-maker></chart-maker> tags.
You can find a example below :

<!-- Your code ... -->
<chart-maker v-bind:params="params">
    <tr>
        <th scope="row">style.css</th> <!-- Here is the label of the row -->
        <td style="--value: 12;"> <!-- Here is the value of the row, which will be use to create the chart -->
            <span>12&nbsp;ms</span> <!-- Here is the value label of the row, which will be diplay to the user -->
        </td>
    </tr>
    <tr>
        <th scope="row">chart.css</th>
        <td style="--value: 42;">
            <span>42&nbsp;ms</span>
        </td>
    </tr>
</chart-maker>
<!-- Your code ... -->

Pie Chart

For 'Pie' charts, there is no more property to define than the common ones.
Here is the 'params' object :

const params = {
    id: "loading-time-pie",
    title: "Loading time",
    description: "Loading time of all css files in milliseconds",
    type: 'pie'
}

Like bar's charts, we must use tags like <tr>, <th> and <td>. Here is an example :

<!-- Your code ... -->
<chart-maker v-bind:params="params">
    <tr style="--color: #734BF9"> <!-- YOU must specify the color for the pie -->
        <th scope="row">style.css</th> <!-- The data's label -->
        <td :style="'--value: 27;'"> <!-- The value IN PERCENT -->
            12&nbsp;ms <!-- The value label to be displayed in the legend -->
        </td>
    </tr>
    <tr style="--color: #E11A81">
        <th scope="row">charts.css</th>
        <td :style="'--value: 73;'">
            42&nbsp;ms
        </td>
    </tr>
</chart-maker>
<!-- Your code ... -->