Research
Security News
Malicious npm Packages Inject SSH Backdoors via Typosquatted Libraries
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
@carbon/charts-svelte
Advanced tools
A component library of 26 charts for Svelte and SvelteKit.
These Svelte wrappers were developed by Eric Liu.
Please direct all questions regarding support, bug fixes and feature requests to @nstuyvesant and @metonym.
Run the following command using npm:
npm install -D @carbon/charts-svelte
If you prefer Yarn, use the following command instead:
yarn add -D @carbon/charts-svelte
The required styles should be imported from @carbon/charts-svelte/styles.css
.
While this component library can be used with any build environments for Svelte, SvelteKit is the official framework for building Svelte apps supporting client-side and server-side rendering (SSR). SvelteKit is powered by Vite.
The module @carbon/charts
should not be externalized for SSR when building for production.
// vite.config.mjs
import { sveltekit } from '@sveltejs/kit/vite'
/** @type {import('vite').UserConfig} */
const config = {
plugins: [sveltekit()],
ssr: {
noExternal: process.env.NODE_ENV === 'production' ? ['@carbon/charts'] : []
}
}
export default config
You may see circular dependency warnings for d3
packages. These can be safely ignored.
Styles must be imported from @carbon/charts-svelte/styles.css
or @carbon/charts-svelte/scss
.
import '@carbon/charts-svelte/styles.css'
<script>
import '@carbon/charts-svelte/styles.css'
import { BarChartSimple } from '@carbon/charts-svelte'
</script>
<BarChartSimple
data={[
{ group: 'Qty', value: 65000 },
{ group: 'More', value: 29123 },
{ group: 'Sold', value: 35213 },
{ group: 'Restocking', value: 51213 },
{ group: 'Misc', value: 16932 }
]}
options={{
theme: 'g90',
title: 'Simple bar (discrete)',
height: '400px',
axes: {
left: { mapsTo: 'value' },
bottom: { mapsTo: 'group', scaleType: 'labels' }
}
}} />
Each Svelte chart component dispatches the following events:
data
or options
are updated<BarChartSimple {data} {options} on:load on:update on:destroy />
Dynamically import a chart and instantiate it using the
svelte:component API. By importing
@carbon/charts
within onMount()
, you avoid problems with server-side rendering.
<script>
import '@carbon/charts-svelte/styles.css'
import { onMount } from 'svelte'
let chart
onMount(async () => {
const charts = await import('@carbon/charts-svelte')
chart = charts.BarChartSimple
})
</script>
<svelte:component
this={chart}
data={[
{ group: 'Qty', value: 65000 },
{ group: 'More', value: 29123 },
{ group: 'Sold', value: 35213 },
{ group: 'Restocking', value: 51213 },
{ group: 'Misc', value: 16932 }
]}
options={{
theme: 'white',
title: 'Simple bar (discrete)',
height: '400px',
axes: {
left: { mapsTo: 'value' },
bottom: { mapsTo: 'group', scaleType: 'labels' }
}
}} />
In this example, an event listener is attached to the BarChartSimple
component that fires when
hovering over a bar.
<script>
import '@carbon/charts-svelte/styles.css'
import { onMount } from 'svelte'
import { BarChartSimple } from '@carbon/charts-svelte'
let chart
function barMouseOver(e) {
console.log(e.detail)
}
onMount(() => {
chart.services.events.addEventListener('bar-mouseover', barMouseOver)
return () => {
chart?.services.events.removeEventListener('bar-mouseover', barMouseOver)
}
})
</script>
<BarChartSimple
bind:chart
data={[
{ group: 'Qty', value: 65000 },
{ group: 'More', value: 29123 },
{ group: 'Sold', value: 35213 },
{ group: 'Restocking', value: 51213 },
{ group: 'Misc', value: 16932 }
]}
options={{
title: 'Simple bar (discrete)',
height: '400px',
axes: {
left: { mapsTo: 'value' },
bottom: { mapsTo: 'group', scaleType: 'labels' }
}
}} />
Svelte version 3.31 or greater is required to use this library with TypeScript. Svelte 4.x+ is recommended.
For your convenience, enums and types from @carbon/charts
are re-exported from
@carbon/charts-svelte
.
import { ScaleTypes, type BarChartOptions } from '@carbon/charts-svelte'
const options: BarChartOptions = {
title: 'Simple bar (discrete)',
height: '400px',
axes: {
left: { mapsTo: 'value' },
bottom: {
mapsTo: 'group',
scaleType: ScaleTypes.LABELS
}
}
}
Use the ComponentType
utility type from svelte
to extract the component type for chart
components.
import { onMount, type ComponentType } from 'svelte'
import type { BarChartSimple } from '@carbon/charts-svelte'
let component: ComponentType<BarChartSimple> = null
onMount(async () => {
component = (await import('@carbon/charts-svelte')).BarChartSimple
})
Use the ComponentProps
utility type from svelte
to extract the props for chart components.
You can then use an indexed access type to extract types for individual properties.
import { type ComponentProps } from 'svelte'
import { BarChartSimple } from '@carbon/charts-svelte'
type ChartProps = ComponentProps<BarChartSimple>
// Indexed access type to access the type of the `chart` property
let chart: ChartProps['chart'] = null
This package uses IBM Telemetry to collect de-identified and anonymized metrics data. By installing this package as a dependency you are agreeing to telemetry collection. To opt out, see Opting out of IBM Telemetry data collection. For more information on the data being collected, please see the IBM Telemetry documentation.
FAQs
Carbon Charts component library for Svelte
The npm package @carbon/charts-svelte receives a total of 2,870 weekly downloads. As such, @carbon/charts-svelte popularity was classified as popular.
We found that @carbon/charts-svelte demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
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.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.