Tunable, animated svg charts.
Object Chart has different methods to build different kinds of charts.
There are 3 different types of charts to build on cartesian coordinate system
Chart.linear(settings, dataOptions),
Chart.area(settings, dataOptions),
Chart.bar(settings, dataOptions),
Settings object for each of them can be slightly different, for example, point description is needed only for linear charts
Chart.linear({
selector: '#pie',
height: 160,
width: 500,
period: 30,
scale: 10,
axis: false,
hover: function() {},
grid: {
rows: true,
columns: true,
color: '#6D6C6C',
text: {
color: '#fff',
fontFamily: 'PT Sans',
fontWeight: 'bold',
fontSize: '.8em'
}
}
, [
{
data: data,
line: {
color: '#fff',
width: 3
},
point: {
radius: 5,
innerColor: '#fff',
outerColor: '#3d3d3d',
strokeWidth: 1
},
},
]
);
Pie chart constructor offers you two different ways to describe circle sectors:
Static description
Chart.pie({
selector: '#pie',
r: 100,
r2: 40,
animationDuration: 500,
hintColor: '#fff',
hover: function() {},
sectors: [
{persent: 30, fill: '#EE543A' },
{persent: 20, fill: '#7BB0A6' },
{persent: 25, fill: '#97CE68' },
{persent: 25, fill: '#ffffff' },
]
});Dynamic description
Chart.pie({
selector: '#pie',
r: 100,
r2: 40,
animationDuration: 500,
hintColor: '#fff',
hover: function() {},
sectors: {
data: todos,
key: 'priority',
colors: {
1: '#EE543A',
2: '#7BB0A6',
3: '#97CE68'
},
}
});Object 'colors' contains all possible values of 'priority' field of each todo object Inner instruments of the constructor will parse the data and generate a sectors description automatically
Radial charts constructor
Chart.radial({
selector: '#pie',
persent: 70,
r: 100,
width: 15,
duration: 700,
strokeFilled: '#00c8ff',
strokeEmpty: 'transparent',
fontFamily: 'Ubuntu Light',
fontWeight: '0'
});
Snap.svg
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent