{"id":15818495,"url":"https://github.com/asoftwareworld/asw-charts","last_synced_at":"2025-04-01T18:31:01.139Z","repository":{"id":42194553,"uuid":"415250368","full_name":"asoftwareworld/asw-charts","owner":"asoftwareworld","description":"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","archived":false,"fork":false,"pushed_at":"2022-04-11T03:11:06.000Z","size":1348,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-12T06:50:39.739Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/asoftwareworld.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-10-09T08:32:16.000Z","updated_at":"2023-03-20T04:24:42.000Z","dependencies_parsed_at":"2022-08-12T09:10:09.236Z","dependency_job_id":null,"html_url":"https://github.com/asoftwareworld/asw-charts","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asoftwareworld%2Fasw-charts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asoftwareworld%2Fasw-charts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asoftwareworld%2Fasw-charts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asoftwareworld%2Fasw-charts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/asoftwareworld","download_url":"https://codeload.github.com/asoftwareworld/asw-charts/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246635950,"owners_count":20809331,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-05T06:02:15.237Z","updated_at":"2025-04-01T18:31:00.766Z","avatar_url":"https://github.com/asoftwareworld.png","language":"TypeScript","funding_links":["https://paypal.me/asoftwaresworld?locale.x=en_GB"],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eASW Chart - Customized Highcharts Charts.\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"asw.png\" alt=\"asw-logo\" width=\"100px\" height=\"100px\"/\u003e\n  \u003cbr\u003e\n  \u003ci\u003eASW Chart helps you to implement charts with less time\n    \u003cbr\u003e using Angular and Bootstrap.\u003c/i\u003e\n  \u003cbr\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://asoftwareworld.github.io/charts\"\u003e\u003cstrong\u003ehttps://asoftwareworld.github.io/charts\u003c/strong\u003e\u003c/a\u003e\n  \u003cbr\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"CONTRIBUTING.md\"\u003eContributing Guidelines\u003c/a\u003e\n  ·\n  \u003ca href=\"https://github.com/asoftwareworld/asw-charts/issues\"\u003eSubmit an Issue\u003c/a\u003e\n  ·\n  \u003ca href=\"https://asoftwareworld.github.io\"\u003eBlog\u003c/a\u003e\n  \u003cbr\u003e\n  \u003cbr\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://circleci.com/gh/asoftwareworld/ASW-charts\"\u003e\n    \u003cimg src=\"https://badge.fury.io/js/%40asoftwareworld%2Fcharts.svg\" alt=\"CI status\" /\u003e\n  \u003c/a\u003e\u0026nbsp;\n  \u003ca href=\"https://www.npmjs.com/package/@asoftwareworld/form-builder\"\u003e\n    \u003cimg src=\"https://circleci.com/gh/asoftwareworld/ASW-Form-Builder.svg?style=svg\" alt=\"Asw charts on npm\" /\u003e\n  \u003c/a\u003e\u0026nbsp;\n  \u003ca href=\"https://github.com/asoftwareworld/ASW-charts/blob/master/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/license-MIT-blue.svg\" alt=\"Discord conversation\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003chr\u003e\n\n# Documentation\n\n`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.\n\n## Installation\nBelow are some prerequisites before install `Charts`.\n\n### Step 1: Install Bootstrap\nInstall `Bootstrap` source Sass files by running the following command:\n```html\nnpm install bootstrap\n```\n\n### Step 2: Install ASW Charts\nInstall `Form Builder` to set up in the project by running the following command:\n```html\nnpm install @asoftwareworld/charts\n```\n\n### Step 4: Import the component modules\nImport the NgModule for each component you want to use:\n\n```\nimport { AswPieDonutModule } from '@asoftwareworld/charts/pie-donut';\nimport { AswGenericChartModule } from '@asoftwareworld/charts/generic-chart';\n// ...\n\n@NgModule({\n  imports: [\n    // shown passing global defaults (optional)\n    AswPieDonutModule,\n    AswGenericChartModule\n    ...\n  ]\n  // ...\n})\nexport class AppModule {}\n```\n\n## Add a selector to HTML\nIn your template, use the component selector:\n```\n\u003cdiv class=\"row\"\u003e\n    \u003cdiv class=\"col-md-6\"\u003e\n        \u003casw-pie-donut \n            [config]=\"config\"\n            [label]=\"label\"\n            [amount]=\"amount\"\n            [currencyCode]=\"currencyCode\"\n            [isLegendSort]=\"isLegendSort\"\n            [legendType]=\"legendType\"\n            [legendLayout]=\"legendLayout\"\n            (donutSliceClick)=\"donutSliceClick($event)\"\u003e\n        \u003c/asw-pie-donut\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"col-md-6\"\u003e\n        \u003casw-generic-chart\n            [config]=\"lineConfig\"\n            [currencyCode]=\"currencyCode\"\n            [isLegendSort]=\"isLegendSort\"\n            [legendType]=\"lineChartLegendType\"\n            [legendLayout]=\"legendLayout\"\n            [legendPosition]=\"legendPosition\"\n            [isLegendDisplay]=\"isLegendDisplay\"\n            (linePointClick)=\"linePointClick($event)\"\u003e\n        \u003c/asw-generic-chart\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"row\"\u003e\n    \u003cdiv class=\"col-md-6\"\u003e\n        \u003casw-generic-chart\n            [config]=\"barChartConfig\"\n            [isLegendSort]=\"isLegendSort\"\n            [legendLayout]=\"legendLayout\"\n            [legendPosition]=\"legendPosition\"\n            (barClick)=\"barClick($event)\"\u003e\n        \u003c/asw-generic-chart\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\nDefine in your component to get published event :\n\n```\nexport class AppComponent implements OnInit {\n    isLegendSort = true;\n    title = 'Donut chart';\n    label: string | undefined;\n    currencyCode = CurrencyCodeEnum.INR;\n    legendLayout = LegendLayoutEnum.Vertical;\n    amount: number | null | undefined = -345345;\n    legendType = PieLegendTypeEnum.Both;\n    lineChartLegendType = ChartLegendTypeEnum.Both;\n    legendPosition = LegendPositionEnum.Right;\n    isLegendDisplay = true;\n    config: Options = {\n        chart: {\n            type: 'pie'\n        },\n        colors: ['#FAD331', '#96D5DF', '#1BA8BB', '#C5D930', '#C1A0C5'],\n        plotOptions: {\n            series: {\n                marker: {\n                    enabled: false\n                },\n                dataLabels: {\n                    enabled: false\n                }\n            }\n        },\n        series: [\n            {\n                type: 'pie',\n                name: 'Price',\n                data: [\n                    {\n                        id: '1',\n                        name: 'Fuel',\n                        y: 7450.00\n                    },\n                    {\n                        id: '2',\n                        name: 'Lubricants',\n                        y: 435.00,\n                    },\n                    {\n                        name: 'Road Services',\n                        y: 200.87,\n                        id: '3',\n                    },\n                    {\n                        name: 'Food',\n                        y: 45.67,\n                        id: '4',\n                    },\n                    {\n                        name: 'Shop',\n                        y: 42.45,\n                        id: '5',\n                    }\n                ]\n            },\n        ]\n    };\n\n    semiCircleDonut: Options = {\n        chart: {\n            type: 'solidgauge'\n        },\n        title: undefined,\n\n        pane: {\n            center: ['50%', '85%'],\n            size: '140%',\n            startAngle: -90,\n            endAngle: 90,\n            background: [{\n                backgroundColor: '#EEE',\n                innerRadius: '60%',\n                outerRadius: '100%',\n                shape: 'arc'\n            }]\n        },\n\n        exporting: {\n            enabled: false\n        },\n\n        tooltip: {\n            enabled: false\n        },\n\n        // the value axis\n        yAxis: {\n            stops: [\n                [0.1, '#55BF3B'], // green\n                [0.5, '#DDDF0D'], // yellow\n                [0.9, '#DF5353'] // red\n            ],\n            lineWidth: 0,\n            tickWidth: 0,\n            minorTickInterval: null,\n            tickAmount: 2,\n            title: {\n                y: -70\n            },\n            labels: {\n                y: 16\n            }\n        },\n\n        plotOptions: {\n            solidgauge: {\n                dataLabels: {\n                    y: 5,\n                    borderWidth: 0,\n                    useHTML: true\n                }\n            }\n        }\n    };\n\n    lineConfig: Options = {\n        title: {\n            text: 'Solar Employment Growth by Sector, 2010-2016'\n        },\n\n        subtitle: {\n            text: 'Source: thesolarfoundation.com'\n        },\n\n        yAxis: {\n            title: {\n                text: 'Number of Employees'\n            }\n        },\n\n        xAxis: {\n            accessibility: {\n                rangeDescription: 'Range: 2010 to 2017'\n            }\n        },\n\n        plotOptions: {\n            series: {\n                label: {\n                    connectorAllowed: false\n                },\n                pointStart: 2010\n            }\n        },\n\n        series: [{\n            type: 'line',\n            name: 'Installation',\n            data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]\n        }, {\n            type: 'line',\n            name: 'Sales \u0026 Distribution',\n            data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]\n        }, {\n            type: 'line',\n            name: 'Manufacturing',\n            data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],\n        }, {\n            type: 'line',\n            name: 'Project Development',\n            data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]\n        }, {\n            type: 'line',\n            name: 'Other',\n            data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]\n        }],\n\n        responsive: {\n            rules: [{\n                condition: {\n                    maxWidth: 500\n                },\n                chartOptions: {\n                    legend: {\n                        layout: 'horizontal',\n                        align: 'center',\n                        verticalAlign: 'bottom'\n                    }\n                }\n            }]\n        }\n    };\n\n    barChartConfig: Options = {\n        chart: {\n            type: 'column'\n        },\n        title: {\n            text: 'Monthly Average Rainfall'\n        },\n        subtitle: {\n            text: 'Source: WorldClimate.com'\n        },\n        xAxis: {\n            categories: [\n                'Jan',\n                'Feb',\n                'Mar',\n                'Apr',\n                'May',\n                'Jun',\n                'Jul',\n                'Aug',\n                'Sep',\n                'Oct',\n                'Nov',\n                'Dec'\n            ],\n            crosshair: true\n        },\n        yAxis: {\n            min: 0,\n            title: {\n                text: 'Rainfall (mm)'\n            }\n        },\n        tooltip: {\n            headerFormat: '\u003cspan style=\"font-size:10px\"\u003e{point.key}\u003c/span\u003e\u003ctable\u003e',\n            pointFormat: '\u003ctr\u003e\u003ctd style=\"color:{series.color};padding:0\"\u003e{series.name}: \u003c/td\u003e' +\n                '\u003ctd style=\"padding:0\"\u003e\u003cb\u003e{point.y:.1f} mm\u003c/b\u003e\u003c/td\u003e\u003c/tr\u003e',\n            footerFormat: '\u003c/table\u003e',\n            shared: true,\n            useHTML: true\n        },\n        plotOptions: {\n            column: {\n                pointPadding: 0.2,\n                borderWidth: 0\n            }\n        },\n        series: [{\n            type: 'column',\n            name: 'Tokyo',\n            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]\n\n        }, {\n            type: 'column',\n            name: 'New York',\n            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]\n\n        }, {\n            type: 'column',\n            name: 'London',\n            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]\n\n        }, {\n            type: 'column',\n            name: 'Berlin',\n            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]\n\n        }]\n    };\n\n    ngOnInit(): void {\n\n    }\n\n    donutSliceClick(event: PointClickEvent): void {\n        this.label = event.name;\n        this.amount = event.value;\n        console.log(event);\n    }\n\n    linePointClick(event: ChartPointerEvent): void {\n        console.log(event);\n    }\n\n    barClick(event: ChartPointerEvent): void {\n        console.log(event);\n    }\n}\n```\n## Theme\nand Bootstrap [more information](https://getbootstrap.com/docs/4.0/getting-started/theming/)\n\n## Browser Support\n\n| ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | \n| ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | \n| Latest ✔                                                                                 | Latest ✔                                                                                    | Latest ✔                                                                                 | Latest ✔                                                                              | Latest ✔                                                                                                                                                                                                    |\n## [Report a bug](https://github.com/asoftwareworld/ASW-Charts/issues)\nWe 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:\n\n1. Make sure that you are using the latest version of the ASW Charts.\n2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.\n3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.\n\n## Technical Support or Questions\nIf you have questions or need help please email `asoftwareworld@gmail.com`\n\n## License\n[MIT](https://github.com/asoftwareworld/asw-charts/blob/main/LICENSE)\n\n## Social Media\n\nTwitter: \u003chttps://twitter.com/asoftwareworld\u003e\n\nLinkedIn: \u003chttps://in.linkedin.com/company/asoftwareworld\u003e\n\nFacebook: \u003chttps://www.facebook.com/asoftwaresworld\u003e\n\n(https://github.com/asoftwareworld/ASW-Charts)\n\n**Love ASW Charts? Give our repo a star :star: :arrow_up:.**\n\n## Donate\n\u003ca href=\"https://paypal.me/asoftwaresworld?locale.x=en_GB\"\u003e\u003cimg src=\"blue.svg\" height=\"40\"\u003e\u003c/a\u003e  \nIf this project help you reduce time to develop, you can give me a cup of coffee :)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasoftwareworld%2Fasw-charts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fasoftwareworld%2Fasw-charts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasoftwareworld%2Fasw-charts/lists"}