Socket
Socket
Sign inDemoInstall

svelte-tiny-linked-charts

Package Overview
Dependencies
1
Maintainers
1
Versions
22
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

svelte-tiny-linked-charts


Version published
Maintainers
1
Install size
18.6 kB
Created

Readme

Source

Tiny Linked Charts for Svelte

tests passing npm version npm downloads MadeWithSvelte.com shield bundle size

This is a library to display tiny bar charts. These charts are more so meant for graphic aids, rather than scientific representations. There's no axis labels, no extensive data visualisation, just bars.

Demo and Docs: https://mitcheljager.github.io/svelte-tiny-linked-charts/

Installation

Install using Yarn or NPM.

yarn add svelte-tiny-linked-charts --dev
npm install svelte-tiny-linked-charts --save-dev

Include the chart in your app.

import { LinkedChart, LinkedLabel, LinkedValue } from "svelte-tiny-linked-charts"
<LinkedChart />
<LinkedLabel />
<LinkedValue />

Supply your data in a simple key:value object:

let data = {
  "2005-01-01": 25,
  "2005-01-02": 20,
  "2005-01-03": 18,
  "2005-01-04": 17,
  "2005-01-05": 21
}
<LinkedChart { data } />

Or if you prefer supply the labels and values separately:

let labels = [
  "2005-01-01",
  "2005-01-02",
  "2005-01-03",
  "2005-01-04",
  "2005-01-05"
]
let values = [
  25,
  20,
  18,
  17,
  21
]
<LinkedChart { labels } { values } />

Usage

For detailed documentation on every property check out: https://mitcheljager.github.io/svelte-tiny-linked-charts/

Configuration

<LinkedChart /> component.

PropertyDefaultDescription
data{}Data that will be displayed in the chart supplied in key:value object.
labels[]Labels supplied separately, to be used together with "values" property.
values[]Values supplied separately, to be used together with "labels" property.
linkedKey to link this chart to other charts with the same key.
uidUnique ID to link this chart to a LinkedValue component with the same uid.
height40Height of the chart in pixels.
width150Width of the chart in pixels.
barMinWidth4Width of the bars in the chart in pixels.
barMinHeight0Minimum height of the bars in the chart in pixels.
hideBarBelow0Bars below this value will be hidden, showing as 0 height.
growfalseWhether or not the bar should grow to fill out the full width of the chart.
alignrightThe side the bars should align to when they do not completely fill out the chart.
gap1Gap between the bars in pixels.
fill#ff3e00Color of the bars, can be any valid CSS color.
fadeOpacity0.5The opacity the faded out bars should display in.
hovertrueBoolean whether or not this chart can be hovered at all.
transition0Transition the chart between different stats. Value is time in milliseconds.
showValuefalseBoolean whether or not a value will be shown.
valueDefault"&nbsp;"Default value when not hovering.
valueUndefined0For when the hovering value returns undefined.
valuePrependString to prepend the value.
valueAppendString to append to the value.
valuePositionstaticCan be set to "floating" to follow the position of the hover.
scaleMax0Use this to overwrite the automatic scale set to the highest value in your array.
scaleMax0Use this to overwrite the default value floor of 0.
typebarCan be set to "line" to display a line chart instead.
lineColorfillColor of the line if used with type="line".
tabindex-1Sets the tabindex of each bar.
preserveAspectRatiofalseSets whether or not the SVG will preserve it's aspect ratio
dispatchEventsfalseBoolean whether or not to dispatch events on certain actions.
clickHandlernullFunction that executes on click and returns the key and index for the clicked data.

<LinkedLabel /> component.

PropertyDefaultDescription
linkedKey to link this label to charts with the same key.
empty&nbsp;String that will be displayed when no bar is being hovered.
transform(label) => labelTransform the given label to format it differently from how it was supplied.

<LinkedValue /> component.

PropertyDefaultDescription
uidUnique ID to link this value to a chart with the same uid.
empty&nbsp;String that will be displayed when no bar is being hovered.
valueUndefined0For when the hovering value returns undefined.
transform(value) => valueTransform the given value to format it differently from how it was supplied.

Keywords

FAQs

Last updated on 04 Mar 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc