Beacon

Easily put beautiful charts and graphics to your Vue application
· Report Bug · Request Feature

Table of Contents

• Table of Contents
• About The Project
• Getting Started
  • Prerequisites
  • Installation
• Usage
• Contributing
• License
• Contact

About The Project

Beacon let you use the power of ChartJs within you Vue application by providing a wrapper component for fast and easy experience

Getting Started

Prerequisites

• npm

npm install npm@latest -g

Installation

1. Install NPM packages

npm install @pharos-labo/beacon

Usage

Simple import

Just import the Chart component and use it in your template

<script setup>
  import { Chart } from '@pharos-lab/beacon'
</script>

<template>
    <Chart :data="charData"></Chart>
</template>

Props

data

Beacon is a wrapper for the ChartJs library so you must check out the ChartJs data structure you need to provide

Basically, it's an object with labels and datasets property

<template>
    <Chart :data="dataStructure"></Chart>
</template>

<script setup>
  const dataStructure = {
    labels: ['January', 'February', 'March'],
    datasets: [
      {
        label: 'number of sales',
        data: [58, 27, 87]
      },
    ]
  }

This should display a chart like this one:

You can display multiple sets of data in the datasets property

<template>
    <Chart :data="dataStructure"></Chart>
</template>

<script setup>
  const dataStructure = {
    labels: ['January', 'February', 'March'],
    datasets: [
      {
        label: 'number of sales',
        data: [58, 27, 87]
      },
      {
        label: 'number of buys',
        data: [85, 36, 24]
      },
    ]
  }

This should display a chart like this one:

Type prop

The type prop sets the type of chart you will display ('line', 'bar', ...)

Here's the following choice:

• line
• bar
• bubble
• doughnut
• pie
• line
• polar
• radar
• scatter

<template>
    <Chart type="bubble" :data="charData"></Chart>
</template>

the line chart type is the one selected by default

options prop

The options prop is the options configuration for the ChartJs library, so you can configure how the chart will display (animations, colors, font, ...)

<template>
    <Chart :options="options" :data="charData"></Chart>
</template>

<script setup>
    const options = {
        plugins: {
            legend: {
                display: false
            }
        }
    }
</script>

This example will hide the legend for the chart

noLegend, noGrid, noTicks, noTooltip and blank props

In the options prop you can customize you chart as you want following the ChartJs configuration docs.

Beacon offers you some props to quicly change some display of your charts.

Legend

The no-legend prop remove the legend for your datasets

<template>
    <Chart :data="data" no-legend></Chart>
</template>

This should display a chart like this one:

Grids

The no-grid prop remove all the grids, vertically and horizontally

<template>
    <Chart :data="data" no-grid></Chart>
</template>

This should display a chart like this one:

The no-grid-x prop remove all the grids, vertically and horizontally

<template>
    <Chart :data="data" no-grid-x></Chart>
</template>

This should display a chart like this one:

The no-grid-y prop remove all the grids, vertically and horizontally

<template>
    <Chart :data="data" no-grid-y></Chart>
</template>

This should display a chart like this one:

Ticks

The no-ticks prop remove the labels for X-axis and Y-Axis

<template>
    <Chart :data="data" no-ticks></Chart>
</template>

This should display a chart like this one:

The no-ticks-x prop remove the labels for X-axis

<template>
    <Chart :data="data" no-ticks-x></Chart>
</template>

This should display a chart like this one:

The no-ticks-y prop remove the labels for Y-Axis

<template>
    <Chart :data="data" no-ticks-y></Chart>
</template>

This should display a chart like this one:

blank

The blank prop remove the legend, the grids and the ticks.

It can be usefull for displaying a Chart in a card for example

<template>
    <Chart :data="data" blank></Chart>
</template>

This should display a chart like this one:

Tooltip

The no-tooltip prop remove the tooltip when hovering data chart

<template>
    <Chart :data="data" no-tooltip></Chart>
</template>

This should display a chart like this one:

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature)
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License.

Contact

pharos-lab - @pharos-lab - pharos-lab@gmail.com

Project Link: https://github.com/pharos-lab/beacon