syncfusion-react-sparkline — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited syncfusion-react-sparkline (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
A comprehensive guide for implementing Syncfusion React Sparkline components - lightweight, compact charts designed to visualize data trends in minimal space without axes or coordinates.
Use this skill when you need to:
The Syncfusion React Sparkline is a highly condensed chart component that presents data in a simple, compact format. Key features include:
📄 Read: references/getting-started.md
@syncfusion/ej2-react-charts)📄 Read: references/sparkline-types.md
📄 Read: references/appearance-customization.md
📄 Read: references/data-labels.md
📄 Read: references/markers.md
📄 Read: references/user-interaction.md
📄 Read: references/advanced-features.md
📄 Read: references/accessibility.md
📄 Read: references/api-reference.md
SparklineComponent: props, events, methods, child directives, and a usage example (based on the official Syncfusion React Sparkline API).npm install @syncfusion/ej2-react-charts --saveimport { SparklineComponent } from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
const data = [0, 6, 4, 1, 3, 2, 5];
return (
<SparklineComponent
dataSource={data}
type="Line"
height="150px"
width="300px"
/>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));import { SparklineComponent, Inject, SparklineTooltip } from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
const data = [0, 6, 4, 1, 3, 2, 5];
return (
<SparklineComponent
dataSource={data}
type="Area"
height="150px"
width="300px"
tooltipSettings={{ visible: true, format: '${x} : ${y}' }}
>
<Inject services={[SparklineTooltip]} />
</SparklineComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));import { SparklineComponent } from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function ColumnSparkline() {
const data = [3, 6, 4, 1, 3, 2, 5];
return (
<SparklineComponent
dataSource={data}
type="Column"
height="150px"
width="300px"
markerSettings={{ visible: ['High', 'Low'] }}
highPointColor="green"
lowPointColor="red"
/>
);
}
export default ColumnSparkline;
ReactDOM.render(<ColumnSparkline />, document.getElementById('charts'));import { SparklineComponent } from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function WinLossSparkline() {
const data = [12, 15, -10, 13, 15, 6, -12, 17, 13, 0, 8, -10];
return (
<SparklineComponent
dataSource={data}
type="WinLoss"
height="150px"
width="300px"
tiePointColor="blue"
/>
);
}
export default WinLossSparkline;
ReactDOM.render(<WinLossSparkline />, document.getElementById('charts'));import { SparklineComponent } from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function SparklineWithLabels() {
const data = [0, 6, 4, 1, 3, 2, 5];
return (
<SparklineComponent
dataSource={data}
type="Line"
height="150px"
width="300px"
dataLabelSettings={{
visible: ['Start', 'End'],
border: { color: 'blue', width: 1 },
fill: 'blue',
opacity: 0.4,
textStyle: { color: 'white' }
}}
/>
);
}
export default SparklineWithLabels;
ReactDOM.render(<SparklineWithLabels />, document.getElementById('charts'));import { SparklineComponent } from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function SparklineWithRangeBand() {
const data = [0, 6, 4, 1, 3, 2, 5];
return (
<SparklineComponent
dataSource={data}
type="Area"
height="150px"
width="300px"
rangeBandSettings={[
{ startRange: 1, endRange: 3, color: '#bfd4fc', opacity: 0.4 }
]}
/>
);
}
export default SparklineWithRangeBand;
ReactDOM.render(<SparklineWithRangeBand />, document.getElementById('charts'));| Property | Type | Description |
|---|---|---|
dataSource | object[] | Data for the sparkline |
type | string | Sparkline type: 'Line', 'Column', 'Area', 'WinLoss', 'Pie' |
xName | string | Property name for x-axis from dataSource |
yName | string | Property name for y-axis from dataSource |
height | string | Height of the sparkline |
width | string | Width of the sparkline |
fill | string | Color of the sparkline |
valueType | string | Axis value type: 'Numeric', 'Category', 'DateTime' |
markerSettings | object | Configuration for markers |
dataLabelSettings | object | Configuration for data labels |
tooltipSettings | object | Configuration for tooltips |
axisSettings | object | Axis min/max and line customization |
rangeBandSettings | object[] | Range band configurations |
theme | string | Theme: 'Material', 'Fabric', 'Bootstrap', 'Highcontrast' |
padding | object | Padding around sparkline (left, right, top, bottom) |
containerArea | object | Border and background for sparkline area |
references/getting-started.md for installation and basic setupreferences/sparkline-types.md to select the right sparkline typereferences/appearance-customization.md for stylingreferences/user-interaction.md for tooltips and track linesreferences/advanced-features.md for axis, range bands, and more~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.