@asoftwareworld/charts
Advanced tools
`ASW Charts` helps you with the Highcharts library comes with all the tools you need to create reliable and secure data visualizations and Built on Angular.
ASW Chart helps you to implement charts with less time
using Angular and Bootstrap.
https://asoftwareworld.github.io/charts
Contributing Guidelines
·
Submit an Issue
·
Blog
ASW Charts helps you with the Highcharts library comes with all the tools you need to create reliable and secure data visualizations and Built on Angular.
Below are some prerequisites before install Charts.
Install Bootstrap source Sass files by running the following command:
npm install bootstrap
Install Form Builder to set up in the project by running the following command:
npm install @asoftwareworld/charts
Import the NgModule for each component you want to use:
import { AswPieDonutModule } from '@asoftwareworld/charts/pie-donut';
import { AswGenericChartModule } from '@asoftwareworld/charts/generic-chart';
// ...
@NgModule({
imports: [
// shown passing global defaults (optional)
AswPieDonutModule,
AswGenericChartModule
...
]
// ...
})
export class AppModule {}
In your template, use the component selector:
<div class="row">
<div class="col-md-6">
<asw-pie-donut
[config]="config"
[label]="label"
[amount]="amount"
[currencyCode]="currencyCode"
[isLegendSort]="isLegendSort"
[legendType]="legendType"
[legendLayout]="legendLayout"
(donutSliceClick)="donutSliceClick($event)">
</asw-pie-donut>
</div>
<div class="col-md-6">
<asw-generic-chart
[config]="lineConfig"
[currencyCode]="currencyCode"
[isLegendSort]="isLegendSort"
[legendType]="lineChartLegendType"
[legendLayout]="legendLayout"
[legendPosition]="legendPosition"
[isLegendDisplay]="isLegendDisplay"
(linePointClick)="linePointClick($event)">
</asw-generic-chart>
</div>
</div>
<div class="row">
<div class="col-md-6">
<asw-generic-chart
[config]="barChartConfig"
[isLegendSort]="isLegendSort"
[legendLayout]="legendLayout"
[legendPosition]="legendPosition"
(barClick)="barClick($event)">
</asw-generic-chart>
</div>
</div>
Define in your component to get published event :
export class AppComponent implements OnInit {
isLegendSort = true;
title = 'Donut chart';
label: string | undefined;
currencyCode = CurrencyCodeEnum.INR;
legendLayout = LegendLayoutEnum.Vertical;
amount: number | null | undefined = -345345;
legendType = PieLegendTypeEnum.Both;
lineChartLegendType = ChartLegendTypeEnum.Both;
legendPosition = LegendPositionEnum.Right;
isLegendDisplay = true;
config: Options = {
chart: {
type: 'pie'
},
colors: ['#FAD331', '#96D5DF', '#1BA8BB', '#C5D930', '#C1A0C5'],
plotOptions: {
series: {
marker: {
enabled: false
},
dataLabels: {
enabled: false
}
}
},
series: [
{
type: 'pie',
name: 'Price',
data: [
{
id: '1',
name: 'Fuel',
y: 7450.00
},
{
id: '2',
name: 'Lubricants',
y: 435.00,
},
{
name: 'Road Services',
y: 200.87,
id: '3',
},
{
name: 'Food',
y: 45.67,
id: '4',
},
{
name: 'Shop',
y: 42.45,
id: '5',
}
]
},
]
};
semiCircleDonut: Options = {
chart: {
type: 'solidgauge'
},
title: undefined,
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: [{
backgroundColor: '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}]
},
exporting: {
enabled: false
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 0,
tickWidth: 0,
minorTickInterval: null,
tickAmount: 2,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
lineConfig: Options = {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
xAxis: {
accessibility: {
rangeDescription: 'Range: 2010 to 2017'
}
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
type: 'line',
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
type: 'line',
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
type: 'line',
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
}, {
type: 'line',
name: 'Project Development',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
type: 'line',
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
};
barChartConfig: Options = {
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
type: 'column',
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
type: 'column',
name: 'New York',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
}, {
type: 'column',
name: 'London',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
}, {
type: 'column',
name: 'Berlin',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
}]
};
ngOnInit(): void {
}
donutSliceClick(event: PointClickEvent): void {
this.label = event.name;
this.amount = event.value;
console.log(event);
}
linePointClick(event: ChartPointerEvent): void {
console.log(event);
}
barClick(event: ChartPointerEvent): void {
console.log(event);
}
}
and Bootstrap more information
 |  |  |  |  |
|---|---|---|---|---|
| Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
We use GitHub Issues as the official bug tracker for the ASW Charts. Here are some advices for our users that want to report an issue:
If you have questions or need help please email asoftwareworld@gmail.com
Twitter: https://twitter.com/asoftwareworld
LinkedIn: https://in.linkedin.com/company/asoftwareworld
Facebook: https://www.facebook.com/asoftwaresworld
(https://github.com/asoftwareworld/ASW-Charts)
Love ASW Charts? Give our repo a star :star: :arrow_up:.
If this project help you reduce time to develop, you can give me a cup of coffee :)
FAQs
`ASW Charts` helps you with the Highcharts library comes with all the tools you need to create reliable and secure data visualizations and Built on Angular.
We found that @asoftwareworld/charts 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.
Security News
AGENTS.md is a fast-growing open format giving AI coding agents a shared, predictable way to understand project setup, style, and workflows.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.