
Research
/Security News
Toptal’s GitHub Organization Hijacked: 10 Malicious Packages Published
Threat actors hijacked Toptal’s GitHub org, publishing npm packages with malicious payloads that steal tokens and attempt to wipe victim systems.
charts-css-react
Advanced tools
React components for chartscss.
npm i charts-css-react
yarn add charts-css-react
For details on using the css utility framework please see the Charts.css website
The base component for charts. It's possible to create any of the supported charts.
Charts.css is a modern CSS framework. It uses CSS utility classes to style HTML elements as charts.
The Chart component raises those utility classes to a component and relies on naive logic to apply them. The intent is to surface the underlying framework to build higher level components for simple convenience if needed. Experimental
import { CSSProperties } from 'react';
import { Chart } from 'hollanddd/chart-css-react';
<Chart hideData showDataOnHover>
<tr>
<th scope="row">Example</th>
<td style={{"--size": "calc(90/100)"} as CSSProperties }>$90K</td>
</tr>
<tr>
<th scope="row">Example</th>
<td>$100K</td>
</tr>
</Chart>
Bar, column, area, and line chart higher order components are available for building charts from a data object.
<BarChart data={[40, 60, 75, 80, 100]} />
Providing a matrix automatically applies the multiple utility class.
<AreaChart data={[[40, 60], [75, 80]]} />
The Data
component is a wrapper around td
and performs some functions such
as converting size to the CSSProperties
type required by style.
size
is a string of css calc()
function or float "0.0" to "1.0".toolTip
optional message to display on hoverimport { Chart, Data } from 'hollanddd/chart-css-react';
<Chart>
<tr>
<th scope="row">One</th>
<Data size="calc(90/100)">$90k</Data>
</tr>
<tr>
<th scope="row">Two</th>
<Data toolTip="this is a tooltip">$100k</Data>
</tr>
</Chart>
The AreaChart
and LineChart
components abstract away the need to write table
row and data cell elements.
import { AreaChart } from 'hollanddd/chart-css-react';
<AreaChart data={[2, 4, 8, 6, 1, 3]} />
Same example but using the base Chart
component
import { Chart, Data } from 'hollanddd/chart-css-react';
<Chart type="area">
<tr>
<Data start="0.2" size="0.4" />
</tr>
<tr>
<Data start="0.4" size="0.8" />
</tr>
<tr>
<Data start="0.8" size="0.6" />
</tr>
<tr>
<Data start="0.6" size="1.0" />
</tr>
<tr>
<Data start="1.0" size="0.3" />
</tr>
</Chart>
Charts.CSS React and Charts.CSS are licensed under the MIT license.
Charts.CSS React is not affiliated with the creators of Charts.CSS.
FAQs
chartscss.org react
The npm package charts-css-react receives a total of 33 weekly downloads. As such, charts-css-react popularity was classified as not popular.
We found that charts-css-react demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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
Threat actors hijacked Toptal’s GitHub org, publishing npm packages with malicious payloads that steal tokens and attempt to wipe victim systems.
Research
/Security News
Socket researchers investigate 4 malicious npm and PyPI packages with 56,000+ downloads that install surveillance malware.
Security News
The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.