- MARIO CHARTS
- 12 COMPONENTS
- MIT
- REACT + TS
Every chart
here is yours.
React charts you paste into your repo and reshape line by line. No runtime dependency on us.
Install
npx mario-charts@latest init.............:::::::::::::::::::::::::::::::::::::::::::............. ............:::::::::::::::::::::::::::::::::::::::::::::::::............ ...........:::::::::::::::::---------------------:::::::::::::::::........... ..........:::::::::::::::-------------------------------:::::::::::::::.......... ..........:::::::::::::---------------------------------------:::::::::::::.......... ..........:::::::::::-----------------------------------------------:::::::::::.......... .........:::::::::::---------------------------------------------------:::::::::::......... ........::::::::::---------------------------------------------------------::::::::::........ ........:::::::::-------------------------------------------------------------:::::::::......... .......:::::::::-----------------------------------------------------------------:::::::::........ .......:::::::::-------------------------------------------------------------------:::::::::........ .......::::::::-----------------------------------------------------------------------::::::::........ .......::::::::-------------------------------------------------------------------------::::::::........ ........:::::::---------------------------------------------------------------------------::::::::........ .......:::::::------------------------------------------------------------------------------:::::::........ .......::::::::-------------------------------------------------------------------------------:::::::....... .......:::::::---------------------------------------------------------------------------------:::::::....... .......:::::::-----------------------------------------------------------------------------------:::::::....... ......::::::::---------------::::::::::::::::::::::::---------------------------------------------::::::....... .......:::::::::::::::::::::::::::----------------===========================================----:::::::::....... ........::::::::::::::--------=====================+++++++++============+++++++++++++++++++++++===-::::::::...... .......::::--------===============================-:..:::::=+++++++++++++++++++++++++++++++++++==+===--:::........ ....::::-------=================================-. .... .:=++++++++++++++++++++++++++======+++++++===-::....... .....::::-----================================+=. .-+####*+: :=++++++++++++++*********=. .--:.:=+++++====--:.... .......::::-----===========++++++++++++==========- =#######*- -*******************+=:. :=*##+ :=+++++====-:.. .....:::::-----=========+++++++++++++++++++++=: .:-+*#####*: .-+****************=. =####+ :++++++===--. ......:::::-----========++++++++++++++++++++++=. :++=--==++===-::. -****************- =####= . -**+++++===-. ......:::::-----========++++++++++++++++++++=-. .-=++***+-. .-=*##*=.-*****##*********- . ..-+*+++++=--+**++++==-. ......::::-----========++++++++++++++++++++=-. .=*******+- :*#####- =****######*****=..=+++=-. =####-.+***+++==-. .....::::-----========++++++++++++++++++++++- :+*******+: .-*##*:.=***#########**+--=+****- +###*::****+++==-. .....:::::-----======+++++++++++++++++++++++- :+*******+: :-:. .+**############*********- =*+-. -****+++==-. .....:::::-----=====++++++++++++++++++++++*+=-=+*******+: .=+**##############**+****+: :+****+++==-: ....:::::----=====+++++++++++++**************+-=+++==-: :*#*###############*-:=+**+: :##****+++==--: ....::::----====++++++++++++****************++=-.. :-+**################*=:.:==-. :+##****+++==--:.. ....::::---=====+++++++************************+=. .:=+*##*###########***#####*=-. :*###****+++==--: ....:::----====++++++****************************+=----=**########***************####+:...:::=*#####****+++==--. ....:::---====+++++++*********************************##******+++++++++++********##################****+++===--: ....:::----===++++++++++*******************************+++=======+++++************##################****+++===---: ....:::---===+++++++++****************************+==--======+++++++**************#################*****+++===---::. .....:::---===+++++++++=::=++++++++++++++++++++++*+---====+++++++++++***************################****+++===---:::. ....::::--=====+++==:. -=============++++=+++++---====++++++++++++++*************###############*****+++===---::: .....:::---=======: .-====================----====+++++++++++++++**************############*****+++===---:::. ....:::----====-. .::--==----------------======+++++++++++++++**************##########*****+++===---:::. ....::::------:. ..::-----------:---========++++++++++++++****************#####******+++===----:::. .....:::::---- .....:::----=========+++++++++++++++***********************++++====---::::. .....:::::--- :----===========+++++++++++++++********************++++====---::::.. ......::::::-. .-----============++++++++++++++*****************+++++====---::::... ......::::::: ::----=============++++++++++++++*************+++++====----::::... .......:::::::.... .:::----============++++++++++++++**********++++++====----::::.... .......::::::-:. .::::------===========+++++++++++++++*****++++++====----::::..... ......:::::::. ::::--------===========++++++++++++++++++++++=====----::::..... .......::::::. .-:::---------============+++++++++++++++++=====----::::...... ......::::::::........ ::::::---------=============+++++++++++=====-----::::...... ....:::::::::------::.. .:::::-------------=======================----:::::...... ....:::::::::::::----::::::::::::--::--------------------=============-----::::::..... .. .....::::::::::::::::::::::::::---------------------------------------::::::...... .. ......:::::::::::::::::::::::::-----:-----------------::-:----::::::::......... . ..........::::::::::::::::::::::::::::::::--::::::::....::::::.............. ..............:::::::::::::::::::::::::::::::........................... ............::::::::::::::::::::::::::::::::............... ........ ..........::::::::::::::::::::::::::::::::........... ... .......:::::::::::::::::::::::::::::::::....... ...:.::::::::::::::::::::::::::::::... ........:::::::::::::::::::.......... ..................................... ..................................... .................................. ..................
Components
These are the components you install.
These previews render the same code the CLI writes into your project. Open one to read its props and copy it.
Bar ChartCompare values across categories.Line ChartFollow a value over time.Area ChartShow volume beneath a trend.Pie ChartRead parts against a whole.Radar ChartWeigh several dimensions at once.TreemapRank nested shares by area.
Browse all componentsBuilt for agents
Your AI already knows how to edit this.
The component lives in your repo — Cursor, Claude, Copilot, and friends just open the file.
Copy-paste, not a black box
The chart ships as source in @/components, not behind an opaque npm package.
Plain React + Tailwind
No DSL, no magic config file — agents edit familiar code.
Typed props
Orientation, variant, showGrid, and the rest autocomplete without inventing an API.
Try this prompt
Add a Mario Charts BarChart for monthly revenue. Vertical, filled, showGrid. Put it in components/charts.
Install it and own the source.
One command writes the components into your project. No runtime dependency on us, nothing to eject from later.
Install
npx mario-charts@latest init