ssart
v1.0.13
Published
Simply crate and use various charts
Downloads
30
Maintainers
ssart_npmReadme
Open Source Project SSART
SSART is the best library to apply chart in your Product ! You can freely use ssart in various frameworks such as Vue and React. Using the vector image-based svg as a basic, it has clearer resolution and can be easily modified. It also provides reactive charts, svg image storage, and data color change functions. Use SSart and apply various charts in your project 📊
Installing
If you use npm, npm install SSart You can also download the latest release on GitHub
$ npm install ssart or
$ npm i ssart If you want to import the whole chart bundle, just add this in your code:
import "ssart" ; Environment
All contents of the library were created using JavaScript.
Examples
if you want to see more Examples , plz visit our sites and see more chart SSART.
How to Use
const data = {
labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
datasets: [
{
label: '라인 데이터1',
data: [
{ name: 1, value: 10 },
{ name: 2, value: 29 },
{ name: 3, value: 32 },
{ name: 4, value: 25 },
{ name: 5, value: 23 },
{ name: 10, value: 15 }
],
backgroundColor: "red",
},
{
label: '라인 데이터2',
data: [1, 3, 3, 4, 5, 6, 7, 8, 9, 10]
,
backgroundColor: "blue",
},
{
label: '라인 데이터3',
data: [
{ x: 1, y: 15 },
{ x: 2, y: 23 },
{ x: 3, y: 25 },
{ x: 4, y: 32 },
{ x: 5, y: NaN },
{ x: 6, y: 8 },
{ x: 7, y: 13 },
{ x: 8, y: 15 },
],
}
]
}; const config = {
type: 'area',
width: 500,
height: 500,
margin: { top: 40, left: 40, bottom: 40, right: 40 },
padding: 0.1,
data: data,
options: {
responsive: true,
plugins: {
legend: {
position: 'bottom',// top bottom left right
},
title: {
display: true,
text: 'Area Chart'
},
xTitle: {
display: true,
text: 'y'
},
yTitle: {
display: true,
text: 'x'
},
xGrid : {
display: true,
color: "#323233",// "rgb(255, 0, 0)" "rgba(255, 0, 0, 0.3)"
dash: "10,3",// 점선, 10만큼 칠하고 3만큼 빈공간
weight: 1, // 선 두께
opacity: .5 // 선 투명도
},
yGrid: {
display: true,
color: "#323233", // "rgb(255, 0, 0)" "rgba(255, 0, 0, 0.3)"
dash: "10,3",// 점선, 10만큼 칠하고 3만큼 빈공간
weight: 1, // 선 두께
opacity: .5 // 선 투명도
},
menu: {
// grid: true,
xGrid: true,
yGrid: true,
download: true,
}
},
scales: {
xAxis : {
type : "number",
ticks:{
}
},
yAxis : {
ticks:{
}
},
line :{
width : 5,
opacity : .5
},
dot :{
size : 0,
opacity : 1,
visible : true,
}
}
},
};
const data = {
labels: ['a', 'b', 'c', 'd', 'e', 'f'],
datasets: [
{
label: '데이터 1',
data: [
{ name: 'a', value: -10 },
{ name: 'b', value: -29 },
{ name: 'c', value: -32 },
{ name: 'd', value: 25 },
{ name: 'e', value: 23 },
{ name: 'f', value: 15 }
],
// backgroundColor: "red",
},
{
label: '데이터 2',
data: [1, 2, 3, 4, 5, 6, -7, -8, -9, -10]
,
// backgroundColor: "blue",
},
{
label: '데이터 3',
data:
[
{ name: 'a', value: 15 },
{ name: 'b', value: 23 },
{ name: 'c', value: 25 },
{ name: 'd', value: -32 },
{ name: 'e', value: -29 },
{ name: 'f', value: -12 },
{ name: 'g', value: -15 },
{ name: 'ㅎ', value: 1 },
{ name: 't', value: 12 }
],
},
]
}; const config = {
type: 'bar',
width: 500,
height: 500,
margin: { top: 40, left: 40, bottom: 40, right: 40 },
padding: 0.1,
data: data,
options: {
responsive: true,
plugins: {
legend: {
position: 'right',// top bottom left right
fontSize: '10px',
fontWeight: 'normal',
fontFamily: 'comic sans ms',
legendType: 'rect', // rect(default), circle,
},
title: {
display: true,
text: 'Bar Chart'
},
xTitle: {
display: true,
text: 'name'
},
yTitle: {
display: true,
text: 'value'
},
xGrid: {
// color: "rgb(255, 0, 0)", // "rgb(255, 0, 0)" "rgba(255, 0, 0, 0.3)"
// dash: "10,3",
// weight: 5,
// opacity: .5,
},
yGrid: {
// color: "#323233", // "rgb(255, 0, 0)" "rgba(255, 0, 0, 0.3)"
// dash: "10,3", // 점선, 10만큼 칠하고 3만큼 빈공간
// weight: 1, // 선 두께
// opacity: .5, // 선 투명도
},
// background: {
// },
menu: {
grid: true,
xGrid: true,
yGrid: true,
background: true,
download: true,
legend: true
},
axis: {
color: "rgb(255, 0, 0)", // "rgb(255, 0, 0)" "rgba(255, 0, 0, 0.3)",
weight: 5,
opacity: .5,
dots: {
display: false,
color: "rgb(255, 0, 255)", // "rgb(255, 0, 0)" "rgba(255, 0, 0, 0.3)",
weight: 5,
opacity: .5
},
xAxis: {
color: "rgb(0, 255, 0)", // "rgb(255, 0, 0)" "rgba(255, 0, 0, 0.3)",
weight: 5,
opacity: 1,
dots: {
display: false,
color: "rgb(255, 0, 0)", // "rgb(255, 0, 0)" "rgba(255, 0, 0, 0.3)",
weight: 5,
opacity: 1
}
},
yAxis: {
color: "rgb(255, 0, 255)", // "rgb(255, 0, 0)" "rgba(255, 0, 0, 0.3)",
weight: 1,
opacity: .5,
dots: {
display: false,
color: "rgb(0, 0, 255)", // "rgb(255, 0, 0)" "rgba(255, 0, 0, 0.3)",
weight: 5,
opacity: .5
}
}
},
},
scales: {
yAxis: {
ticks: {
// min: -20,
max: 40
}
},
fillopacity: 0.5
}
},
}; const data = {
labels: ['a', 'b', 'c', 'd', 'e'],
datasets: [
{
label: '1번 막대 label',
data: [
{ name: 'a', value: 100 },
{ name: 'b', value: 290 },
{ name: 'c', value: 750 },
{ name: 'd', value: 250 },
{ name: 'e', value: 750 },
],
backgroundColor: "red",
},
{
label: '2번 막대 label',
data: [100, 200, 320, 45],
backgroundColor: "blue",
},
{
label: '3번 막대 label',
data: [90, 170, 300, 415],
backgroundColor: "yellow",
},
]
}; const config = {
type: 'barH',
width: 500,
height: 500,
margin: { top: 40, left: 40, bottom: 40, right: 40 },
padding: 0.1,
data: data,
options: {
responsive: true,
plugins: {
legend: {
position: 'bottom',// top bottom left right
},
title: {
display: true,
text: '가로막대 그래프'
},
xTitle: {
display: true,
text: 'name'
},
yTitle: {
display: true,
text: 'value'
},
xGrid: {
color: "rgb(255, 0, 0)", //"rgb(255, 0, 0)" "rgba(255, 0, 0, 0.3)"
dash: "10,3",
weight: 1,
opacity: .5,
},
yGrid: {
color: "#323233", // "rgb(255, 0, 0)" "rgba(255, 0, 0, 0.3)"
dash: "10,3", // 점선, 10만큼 칠하고 3만큼 빈공간
weight: 1, // 선 두께
opacity: .5, // 선 투명도
},
},
scales:{
yAxis : {
ticks:{
// min : -10,
max : 900
}
},
}
}
}; const data = {
labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
datasets: [
{
label: 'Small Radius',
data:
[
[1, -10, 1], [20, 20, 2], [3, 20, 3], [4, 20, 4], [5, 20, 5], [6, 20, 6]
],
},
{
label: 'Small Radius',
data: [
{ x: 1, y: 15, r: 10 },
{ x: 2, y: 23, r: 20 },
{ x: 3, y: 25, r: 30 },
{ x: 4, y: 32, r: 30 },
{ x: 5, y: 29, r: 100 },
{ x: 6, y: 13, r: 20 },
{ x: 7, y: 15, r: 50 },
],
},
{
label: 'Small Radius',
data: [
{ x: 10, y: 150, r: 10 },
{ x: 5, y: 230, r: 20 },
{ x: 6, y: 250, r: 30 },
{ x: 7, y: 32, r: 30 },
{ x: 8, y: 29, r: 100 },
{ x: 9, y: 13, r: 20 },
{ x: 10, y: 15, r: 50 },
],
},
{
label: 'Small Radius',
data: [
{ x: 1, y: 15, r: 10 },
{ x: 2, y: 23, r: 20 },
{ x: 3, y: 25, r: 30 },
{ x: 4, y: 32, r: 30 },
{ x: 5, y: 29, r: 100 },
{ x: 6, y: 13, r: 20 },
{ x: 7, y: 15, r: 50 },
],
}
]
}; const config = {
type: 'bubble',
width: 500,
height: 500,
margin: { top: 40, left: 40, bottom: 40, right: 40 },
padding: 0.1,
data: data,
options: {
responsive: true,
plugins: {
legend: {
position: 'bottom',// top bottom left right
},
title: {
display: true,
text: 'bubble Chart',
color: '#000000',
align: 'center' //start, end, center
},
xTitle: {
display: true,
text: 'x축',
size: "15px",
// color: 'rgba(100, 150, 0, .5)',
align: 'center' //start, end, center
},
yTitle: {
display: true,
text: 'y축',
size: "15px",
rotate: true,
position: 'left',
color: '#000000',
align: 'center' //top, bottom, center
},
xGrid: {
color: "rgb(255, 0, 0)", // "rgb(255, 0, 0)" "rgba(255, 0, 0, 0.3)"
dash: "10,3",
weight: 1,
opacity: .5,
},
yGrid: {
color: "#323233", // "rgb(255, 0, 0)" "rgba(255, 0, 0, 0.3)"
dash: "10,3", // 점선, 10만큼 칠하고 3만큼 빈공간
weight: 1, // 선 두께
opacity: .5, // 선 투명도
},
menu: {
}
},
scales: {
xAxis: {
// type: "number",
ticks: {
min: 0,
max: 10
}
},
yAxis: {
ticks: {
max: 80,
tick: 20
}
},
r: {
size: {
min: 10,
max: 30
}
},
fillopacity: 0.5
}
},
}; const data = {
labels: ['dd', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
datasets: [{
data : [
{ name: 'AAAA', value: 1000, color: '#efa86b' },
{ name: 'BBB', value: 1500, color: '#c1484f' },
{ name: 'C', value: 1300 },
{ name: 'D', value: 900, color: '#f4c17c' },
{ name: 'E', value: 700, color: '#fae8a4' },
{ name: 'F', value: 1200, color: '#df7454' },
{ name: 'G', value: 1100, color: '#e88d5d' },
{ name: 'H', value: 600, color: '#f8d690' },
]
}
]
}; const config = {
type: 'donut',// if you want pie chart , change the type to pie!
width: 500,
height: 500,
margin: { top: 40, left: 40, bottom: 40, right: 40 },
padding: 0.1,
data: data,
options: {
responsive: true,
plugins: {
legend: {
position: 'left',// top bottom left right
},
title: {
display: true,
text: 'Donut Chart'
},
sort: true,
view: true,
},
}
} const data = {
labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
datasets: [
{
label: '라인 데이터1',
data: [
{ name: 1, value: 10 },
{ name: 2, value: 29 },
{ name: 3, value: 32 },
{ name: 4, value: 25 },
{ name: 5, value: 23 },
{ name: 10, value: 15 }
],
backgroundColor: "red",
},
{
label: '라인 데이터2',
data: [1, 3, 3, 4, 5, 6, 7, 8, 9, 10],
backgroundColor: "blue",
},
{
label: '라인 데이터3',
data: [
{ x: 1, y: 15 },
{ x: 2, y: 23 },
{ x: 3, y: 25 },
{ x: 4, y: 32 },
{ x: 5, y: NaN },
{ x: 6, y: 8 },
{ x: 7, y: 13 },
{ x: 8, y: 15 },
],
}
]
}; const config = {
type: 'line',
width: 500,
height: 500,
margin: { top: 40, left: 40, bottom: 40, right: 40 },
padding: 0.1,
data: data,
options: {
responsive: true,
plugins: {
legend: {
position: 'bottom',// top bottom left right
},
title: {
display: true,
text: 'Line Chart'
},
xTitle: {
display: true,
text: 'y'
},
yTitle: {
display: true,
text: 'x'
},
xGrid : {
display: true,
color: "#323233",// "rgb(255, 0, 0)" "rgba(255, 0, 0, 0.3)"
dash: "10,3", // 점선, 10만큼 칠하고 3만큼 빈공간
weight: 1, // 선 두께
opacity: .5 // 선 투명도
},
yGrid: {
display: true,
color: "#323233",// "rgb(255, 0, 0)" "rgba(255, 0, 0, 0.3)"
dash: "10,3",// 점선, 10만큼 칠하고 3만큼 빈공간
weight: 1, // 선 두께
opacity: .5 // 선 투명도
},
menu: {
// grid: true,
xGrid: true,
yGrid: true,
download: true,
}
},
scales: {
xAxis: {
type: "number",
ticks: {
}
},
yAxis: {
ticks: {
max: 20
}
},
line: {
width: 5,
opacity: 0.6
},
dot: {
size: 0,
opacity: 1,
visible: true,
}
}
},
}; const data = {
labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
datasets: [{
data : [
{ name: 'John', value: 1000, backgroundColor: '#efa86b' },
{ name: 'Abraham', value: 1500, backgroundColor: '#c1484f' },
{ name: 'Jack', value: 1300 },
{ name: 'Madison', value: 900, backgroundColor: '#f4c17c' },
{ name: 'Olivia', value: 700, backgroundColor: '#fae8a4' },
{ name: 'Quincy', value: 1200, backgroundColor: '#df7454' },
{ name: 'Talan', value: 1100, backgroundColor: '#e88d5d' },
{ name: 'Wendy', value: 600, backgroundColor: '#f8d690' },
]
}
]
}; const config = {
type: 'polar',
width: 500,
height: 500,
margin: { top: 40, left: 40, bottom: 40, right: 40 },
padding: 0.1,
data: data,
depth:7, // 구간 갯수
options: {
responsive: true,
plugins: {
legend: {
position: 'top',// top bottom left right
},
title: {
display: true,
text: 'polar Chart'
},
sort: true,
view: true,
menu: {
download: true
}
},
scales:{
depth : 7
}
}
}; const data = {
labels: ['ability1', 'ability2', 'ability3', 'ability4' ,'ability5'],
datasets: [
{
label: 'A',
data : [270,270,120,1,140]
},
{
label: 'B',
data :[140,100,280,250,120],
},
{
label: 'C',
data : [100,190,140,12,270],
},
{
label : 'D',
data : [20,200,200,52,230],
}
],
}; const config = {
type: 'radar',
width: 500,
height: 500,
margin: { top: 40, left: 40, bottom: 40, right: 40 },
padding: 0.1,
data: data,
depth:7, // 구간 갯수
poly:true,
options: {
responsive: true,
plugins: {
legend: {
position: 'top',// top bottom left right
},
title: {
display: true,
text: 'Radar Chart'
},
sort: true,
view: true,
menu: {
download: true
}
},
scales:{
depth : 7
}
}
} const data = {
labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
datasets: [
{
label: 'Fully Rounded',
data: [
{ name: 1, value: 10 },
{ name: 2, value: 29 },
{ name: 3, value: 32 },
{ name: 4, value: 25 },
{ name: 5, value: 23 },
{ name: 10, value: 15 }
],
backgroundColor: "red",
},
{
label: 'Small Radius',
data: [1, 3, 3, 4, 5, 6, 7, 8, 9, 10]
,
backgroundColor: "blue",
},
{
label: 'Small Radius',
data:
[
[1.5, 1], [2, 2], [3, 2], [4, 2], [5, 2], [6, 2]
],
},
{
label: 'Small Radius',
data: [
{ x: 1, y: 15 },
{ x: 2, y: 23 },
{ x: 3, y: 25 },
{ x: 4, y: 32 },
{ x: 5, y: 29 },
{ x: -6, y: 13 },
{ x: 7, y: 15 },
],
}
]
}; const config2 = {
type: 'scatter',
width: 500,
height: 500,
margin: { top: 40, left: 40, bottom: 40, right: 40 },
padding: 0.1,
data: data,
options: {
responsive: true,
plugins: {
// legend: {
// // position: 'right',// top bottom left right
// },
title: {
display: true,
text: 'Scatter Chart'
},
xTitle: {
display: true,
text: 'y'
},
yTitle: {
display: true,
text: 'x'
},
xGrid: {
color: "#323233", // "rgb(255, 0, 0)" "rgba(255, 0, 0, 0.3)"
dash: "10,3",
weight: 2,
opacity: .5
},
yGrid: {
display: true,
color: "#323233", // "rgb(255, 0, 0)" "rgba(255, 0, 0, 0.3)"
dash: "10,3", // 점선, 10만큼 칠하고 3만큼 빈공간
weight: 2, // 선 두께
opacity: .5 // 선 투명도
},
background: {
},
menu: {
grid: true,
xGrid: true,
yGrid: true,
background: true,
download: true
},
},
scales: {
xAxis: {
type: "number",
ticks: {
min: -10,
max: 10
}
},
dot: {
size: 10,
opacity: 1
}
}
},
}; <script type="module">// 해당 모듈을 불러오는 명령어
import * as Chart from './src/index.js';
Chart.Chart('#chart', config);
</script> <div id="chart"><div>Browser Support
| 
|
|
--- | --- | --- |
Latest ✔ | Latest ✔ | Latest ✔ |
Developers
- Lee JungHun : [email protected]
- Kim YoungJin : [email protected]
- Bae YongHan : [email protected]
- Ahn JaeYoung : [email protected]
- Jeong HaeYun : [email protected]
- Jo wonbin : [email protected]
개인 깃헙 링크 혹은 마이크로 사이트에서 정리
License
Ssart is available under the MIT license.