{"id":23020953,"url":"https://github.com/jscharting/jscharting-vue","last_synced_at":"2025-08-14T09:32:35.176Z","repository":{"id":42927463,"uuid":"237024771","full_name":"jscharting/jscharting-vue","owner":"jscharting","description":"Official JSCharting Vue.js Plugin \u0026 Examples","archived":false,"fork":false,"pushed_at":"2024-01-08T12:20:01.000Z","size":3724,"stargazers_count":56,"open_issues_count":12,"forks_count":6,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-12-15T09:44:32.863Z","etag":null,"topics":["chart","datavisualization","jscharting","vue","vuejs"],"latest_commit_sha":null,"homepage":"https://jscharting.com/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jscharting.png","metadata":{"files":{"readme":"README-vue3.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-01-29T16:07:18.000Z","updated_at":"2024-12-06T15:27:27.000Z","dependencies_parsed_at":"2024-04-12T11:01:55.090Z","dependency_job_id":"4c11f971-c4ec-4ca0-a2e6-28afdc4f62b4","html_url":"https://github.com/jscharting/jscharting-vue","commit_stats":{"total_commits":23,"total_committers":2,"mean_commits":11.5,"dds":"0.17391304347826086","last_synced_commit":"9c1f4a8ba8e0e8d3c15c084bad65900468da87fa"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jscharting%2Fjscharting-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jscharting%2Fjscharting-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jscharting%2Fjscharting-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jscharting%2Fjscharting-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jscharting","download_url":"https://codeload.github.com/jscharting/jscharting-vue/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229815915,"owners_count":18128512,"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":["chart","datavisualization","jscharting","vue","vuejs"],"created_at":"2024-12-15T12:15:57.911Z","updated_at":"2024-12-15T12:15:58.426Z","avatar_url":"https://github.com/jscharting.png","language":"Vue","funding_links":[],"categories":["Components \u0026 Libraries","UI Components [🔝](#readme)"],"sub_categories":["UI Components"],"readme":"\n\u003cp align=\"center\"\u003e\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n   \u003ca href=\"https://jscharting.com\"\u003e\u003cimg src=\"https://jscharting.com/images/jsc-vue-logo.svg\" width=\"400\" alt=\"JSCharting for Vue.js\"/\u003e\u003c/a\u003e\u003cbr /\u003e\n   JavaScript data visualization for Vue.js \n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://travis-ci.com/jscharting/jscharting-vue\"\u003e\u003cimg src=\"https://img.shields.io/travis/com/jscharting/jscharting-vue.svg?branch=master\" alt=\"Builds\"\u003e\u003c/a\u003e\n\u003ca href=\"https://david-dm.org/jscharting/jscharting-vue\"\u003e\u003cimg alt=\"David\" src=\"https://img.shields.io/david/jscharting/jscharting-vue\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/jscharting-vue\"\u003e\u003cimg alt=\"npm version\" src=\"https://img.shields.io/npm/v/jscharting-vue.svg\"\u003e\u003c/a\u003e\n\u003cimg alt=\"code style\" src=\"https://img.shields.io/badge/code_style-prettier-ff69b4.svg\"\u003e\n\u003ca href=\"https://twitter.com/jscharting/\"\u003e\u003cimg alt=\"Twitter\" src=\"https://img.shields.io/twitter/url?style=social\u0026url=https%3A%2F%2Ftwitter.com%2Fjscharting%2F\"\u003e\u003c/a\u003e \u003cbr /\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n**JSCharting** is a JavaScript data visualization library offering seamless usage with Vue across all devices and platforms. Every JSCharting license includes a full suite of 150+ chart types including standards such as pie charts, line charts, donut and bar charts. In addition, advanced chart types including Gantt charts, JavaScript Org Charts, interactive charts for stock and finance, seamless grid and calendar charts, JavaScript maps, sparklines, and micro charts all for no additional charge. JSCharting has all the features you need and many you don't yet know you want.\n\nExample Charts:\n[Chart Types](https://jscharting.com/examples/chart-types/)\n| [Feature Examples](https://jscharting.com/examples/chart-features/)\n\n# Official JSCharting plugin for Vue.js \nA Vue2 and Vue3 wrapper to use [JSCharting](https://jscharting.com/) charting library as a Vue component.\n\n### This documentation is for Vue3. For Vue2, [click here](README.md).\n\n## Table of Contents \n\n1. [Install](#install)\n    1. [Run Examples](#run-examples)\n2. [Usage](#usage)\n    1. [Simple Example](#simple-example)\n    2. [JSCharting Component Options](#jscharting-component-options)\n    3. [Updating Charts](#updating-charts)\n3. [Chart resources](#chart-resources)\n4. [Getting a chart reference](#getting-a-chart-reference)\n5. [JSCLabel Component](#jsclabel-component)\n6. [JSCGrid Component](#jscgrid-component)\n\n\n\n### Install\n\nInstall the jscharting-vue chart component.\n\n```console\nnpm i -D jscharting-vue\n```\n\nor\n\n```console\nyarn add jscharting-vue\n```\n\n\n#### Run Examples\nClone the [Github repo](https://github.com/jscharting/jscharting-vue)  locally. Example charts are located in the `/examples-vue3` folder.\n\nTo view the examples you can run the webpack dev server: localhost:3333\n\n```console\nnpm run serve-examples-vue3\n```\n\nOr build the project manually.\n\n```console\nnpm run build-examples-vue3\n```\n\n\n### Usage\n\n#### Simple example\nThis example shows how you can use the `JSCharting` component of the `jscharting-vue` module to make a column chart.\n\n\n```html\n\u003ctemplate\u003e\n    \u003cJSCharting :options=\"chartOptions\" \u003e\u003c/JSCharting\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\"\u003e\nimport { defineComponent, reactive } from 'vue'\nimport JSCharting, { JSC } from 'jscharting-vue';\n\nexport default defineComponent({\n   name: 'columnChart',\n   setup() {\n      const chartOptions = reactive({\n         type: 'horizontal column',\n         series: [\n            {\n               points: [\n                  { x: 'A', y: 50 },\n                  { x: 'B', y: 30 },\n                  { x: 'C', y: 50 }\n                  ]\n              }\n          ]\n        } as JSC.JSCChartConfig);\n      return { chartOptions }; \n    },\n    components: {\n        JSCharting\n    }\n});\n\u003c/script\u003e\n```\n\nNotice that you can use `JSCChartConfig` type definitions for chart configuration properties.\n```typescript\nimport { JSCChartConfig } from 'jscharting'; // -\u003e JSCChartConfig\n// OR\nimport JSCharting, { JSC } from 'jscharting-vue'; // -\u003e JSC.JSCChartConfig\n```\n\n\n#### JSCharting Component Options\nThese customizable options are available with the `JSCharting` component.\n\n| Parameter | Type |  Description |\n| --------- | :----: | ----------- |\n| `:options` | object | JSCharting chart configuration object. Please refer to the [API documentation](https://jscharting.com/documentation/#node=Home.API.json.Chart). |\n| `:mutable` | boolean | (Optional) True by default. When set to `false`, a new instance of the chart is created when chart options change. Otherwise, updated options are passed to the existing chart instance `chart.options()` function. \n| `:ignoreStateUpdate` | boolean | (Optional) `false` by default. When `true`, the chart will ignore updates applied when reactive property is changed. This is useful when you want to update the chart directly. |\n| `@rendered` | event | (Optional) Event triggered when the chart is finished rendering. The first argument of the event handler is a reference to the created chart.|\n\n\n#### Updating charts\n\nThere are a couple ways to update live charts.\n\n##### Using reactive properties\n\nUpdating reactive chart options properties affects the chart in two ways, depending on the option `mutable`. \nWhen the component option `mutable` is true, options are passed to the chart using chart.options(). \nWhen `mutable` is false, changing options will reset the chart with a new instance.\n\nCharts with `mutable == true` option perform better and allow charts to animate changes. Only new options that are changing\nneed to be passed to the chart. You can animate chart updates using this more.\n\nUsing `mutable == false` is sometimes useful when a chart must be drastically modified. In this mode, all options should be\n available for a new chart instance to use.\n\nSee [animating series and points](https://jscharting.com/tutorials/types/js-series-point-animation-chart/) for more \ninformation.\n\n```html\n\u003ctemplate\u003e\n   \u003cdiv\u003e\n      \u003cJSCharting :options=\"chartOptions\"\u003e\u003c/JSCharting\u003e\n      \u003cbutton v-on:click=\"updateChartOptions\"\u003eUpdate Chart Options Data\u003c/button\u003e\n   \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\"\u003e\n   import { defineComponent, reactive } from 'vue';\n   import { JSCChartConfig } from 'jscharting';\n   import JSCharting from 'jscharting-vue';\n\n   export default defineComponent({\n      name: 'methodUpdate',\n      setup() {\n      \t\n         const randomPoints = () =\u003e {\n            let points = [];\n            for (let i = 1; i \u003c 12; i++) {\n               points.push({ id: 'p' + i, x: `1/${i * 2}/2020`, y: Math.random() * 10 });\n            }\n            return points;\n         }\n      \t\n         const chartOptions = reactive({\n            type: 'line',\n            title: { label: { text: 'Series updates' } },\n            legend: {\n               position: 'inside bottom right'\n            },\n            xAxis: { scale: { type: 'time' } },\n            series: [\n               {\n                  name: 'Purchases',\n                  points: randomPoints()\n               }\n            ]\n         } as JSCChartConfig);\n\n         function updateChartOptions() {\n            chartOptions.series = [\n               {\n                  name: 'Purchases',\n                  points: randomPoints()\n               }\n            ];\n         }\n         return {\n            chartOptions,\n            updateChartOptions\n         };\n      },\n      components: {\n         JSCharting\n      }\n   });\n\n\u003c/script\u003e\n```\n\n##### Updating chart directly\n\nJSCharting has a rich API for direct interaction with chart elements programmatically. This approach is more \nflexible and can update the chart more efficiently when performance is a priority. Charts can also \nbe decoupled from `data` updates and managed independently.\n\nSet the `ignoreStateUpdate` option to true to prevent reactive chart properties from affecting the chart itself.\n\nSee [getting a chart reference](#getting-a-chart-reference). Code to get the chart instance inside the `setup()` function\nwill look something like this.\n\n```js\nconst chart = this.myChart.value?.instance as JSC.Chart;\n```\n\nOnce a `chart` instance reference is available, you can update chart options as needed with code such as:\n\n```js\nchart.series().points(p =\u003e p.y \u003e 50).options({ color: \"red\" });\n```\n\nThis line will make all points on a chart with y values greater than 50 red. Another example:\n\n```js\nchart.series(0).points(0).options({ y: 100 });\n```\n\nThis example updates the \"Purchases\" series with new random point values.\n\n\n```vue\n\u003ctemplate\u003e\n    \u003cdiv\u003e\n        \u003cJSCharting :options=\"chartOptions\" ref=\"myChart\"\u003e\u003c/JSCharting\u003e\n        \u003cbutton v-on:click=\"updateData\"\u003eUpdate Chart Options Data\u003c/button\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\"\u003e\n   import { defineComponent, reactive, ref } from 'vue';\n   import JSCharting, { JSC } from 'jscharting-vue';\n\n   export default defineComponent({\n      name: 'methodUpdate2',\n      setup() {\n         const randomPoints = () =\u003e {\n            let points = [];\n            for (let i = 1; i \u003c 12; i++) {\n               points.push({ id: 'p' + i, x: `1/${i * 2}/2020`, y: Math.random() * 10 });\n            }\n            return points;\n         }\n            const myChart = ref({} as JSCharting);\n            const chartOptions = reactive({\n               type: 'line',\n               title: { label: { text: 'Series updates' } },\n               legend: {\n                  position: 'inside bottom right'\n               },\n               xAxis: { scale: { type: 'time' } },\n               series: [\n                  {\n                     name: 'Purchases',\n                     points: randomPoints()\n                  }\n               ]\n            } as JSC.JSCChartConfig);\n            \n            const updateData = ()=\u003e{\n               const chart = myChart.value?.instance as JSC.Chart;\n               if (chart) {\n                  chart.series('Purchases').options({ points: randomPoints() });\n               }\n            }\n            \n            return {\n               chartOptions,\n               myChart,\n               updateData\n            };\n        },\n        components: {\n           JSCharting\n        }\n    });\n\u003c/script\u003e\n```\n\n### Chart resources\nThe JSCharting library includes resources (modules, mapping data, polyfills, icons library) that load automatically\nwhen they are needed. The `examples-vue3/` webpack [vue.config.js](examples-vue3/vue.config.js) configuration copies \nthese resources to the `./dist/assets/jscharting` folder during built.\n\nThe `examples-vue3/src/App.vue` file calls the `JSC.defaults()` function to set `baseUrl` option\nwith this path globally in its constructor. All subsequent charts will be aware of the location of these resources.\n\n```js\nimport { JSC } from 'jscharting-vue';\nJSC.defaults({ baseUrl: 'dist/assets/jscharting', debug:true });\n```\n\n**Note:** If the chart does not find the resources path, it will download them from a CDN.\nSetting `debug:true` in the `JSC.defaults()` function during development is recommended as it will \nalert you when the CDN fallback is used. It is recommended to use a local copy of resources in production.\n\n### Getting a chart reference\n\nYou can get a chart instance and use it within the `setup()` function using the `ref` attribute on \nthe \u003cJSCharting\u003e tag:\n\n```vue\n\u003ctemplate\u003e\n    \u003cJSCharting ref=\"myChart\" :options=\"chartOptions\"\u003e\u003c/JSCharting\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\"\u003e\nimport { defineComponent, reactive, ref } from 'vue';\nimport JSCharting, { JSC } from 'jscharting-vue';\n\nexport default defineComponent({\n   setup() {\n      const randomPoints = () =\u003e {\n         let points = [];\n         for (let i = 1; i \u003c 12; i++) {\n            points.push({ id: 'p' + i, x: `1/${i * 2}/2020`, y: Math.random() * 10 });\n         }\n         return points;\n      }\n      \n      // Define myChart reference\n      const myChart = ref({} as JSCharting);\n      \n      const chartOptions = reactive({\n         type: 'line',\n         series: [\n            {\n               name: 'Purchases',\n               points: randomPoints()\n            }\n         ]\n      } as JSC.JSCChartConfig);\n    \n      // Helper function to get a chart reference\n      const getChart = () =\u003e this.myChart.value?.instance as JSC.Chart;\n      \n      return {\n         chartOptions,\n         myChart,\n         getChart\n      };\n    },\n    components: {\n        JSCharting\n    }\n});\n\n\u003c/script\u003e\n```\n\nYou can also store it when the chart `@rendered` event is executed.\n\n```vue\n\u003ctemplate\u003e\n    \u003cJSCharting :options=\"chartOptions\" @rendered=\"chartRendered\"\u003e\u003c/JSCharting\u003e\n    \u003cbutton v-on:click=\"updateData\"\u003eAdd Series\u003c/button\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\"\u003e\nimport { defineComponent, ref } from 'vue';\nimport JSCharting, {JSC} from 'jscharting-vue';\n\nexport default defineComponent({\n   setup() {\n      const myChart = ref({} as JSC.Chart);\n      return {\n         myChart,\n         chartOptions:{\n            type:'line'\n         },\n         chartRendered: (instance: JSC.Chart) =\u003e {\n            myChart.value = instance;\n         },\n         updateData: () =\u003e {\n            myChart.value?.series.add({name: \"S1\", points: [{x: 5, y: 10}, {x: 8, y: 10}]});\n         }\n      }\n   },\n   components: {\n      JSCharting\n   }\n});\n\u003c/script\u003e\n```\n\n### JSCLabel Component\nThis plugin also contains an implementation of the `JSCLabel` component for vue.\nYou can use it to create very efficient micro chart SVG images in your vue projects.\nHere's a simple example.\n\n```html\n\u003ctemplate\u003e\n    \u003cJSCLabel :options=\"options\" /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n   import { JSCLabel } from 'jscharting-vue';\n   export default {\n      name:'Microchart',\n      setup(){\n         const data = [5,2,3,5,1];\n         return {\n            options: `\u003cchart arealine data=${data.join(',')} width=200 height=50\u003e`\n         }\n      },\n\n      components: {\n         JSCLabel\n      }\n   };\n\u003c/script\u003e\n```\n\nThe [Microchart Fast](examples-vue3/components/microchartFast.vue) example demonstrates updating a microchart using the \nJSCLabel component quickly.\n\nSee the [microcharts tutorial](https://jscharting.com/tutorials/types/js-microcharts/) for configuration \nstring syntax and more information.\n\n### JSCGrid Component\nThe `JSCGrid` data grid component is also included. You can use it to create data grids from JSON arrays.\nHere's a data grid example.\n\n```html\n\u003ctemplate\u003e\n    \u003cJSCGrid :options=\"gridOptions\" /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n   import { JSCGrid } from 'jscharting-vue';\n   export default {\n      name:'Data Grid',\n      setup(){\n         return {\n         \tgridOptions: {\n         \t   data: [\n                  ['Art', 5, 10],\n                  ['Greg', 3, 6],\n                  ['Olivia', 11, 8],\n                  ['Steve', 11, 4],\n                  ['Anna', 3, 8]\n               ],\n               columns: [\n                  {header: 'Name'},\n                  {header: 'Value One'},\n                  {header: 'Value Two'},\n                  {header: 'Sum', value: '{%1+%2}'}\n               ]\n            }\n         }\n      }\n      components: {\n         JSCGrid\n      }\n   };\n\u003c/script\u003e\n```\n\nThe available options for the data grid component are.\n\n| Parameter | Type |  Description |\n| --------- | :----: | ----------- |\n| `:options` | object | JSCGrid configuration object. Please refer to the [API documentation](https://jscharting.com/documentation/#node=Home.API.json.Types.grid). |\n| `:mutable` | boolean | (Optional) When set to true, `grid.options()` is called with the updated props instead of recreating the grid instance.\n| `:className` | string | (Optional) Applies the class name to the grid container div element. It allows controlling grid size and layout with external CSS. |\n| `@rendered` | event | Triggered when the grid is finished rendering. The first argument of the event handler is a reference to the created grid.|\n\nSimilar to the chart, you can import `JSCGridConfig` typings for grid options with\n\n```typescript\nimport { JSCGridConfig } from 'jscharting'; // -\u003e JSCGridConfig\n// OR\nimport JSCharting, { JSC } from 'jscharting-vue'; // -\u003e JSC.JSCGridConfig\n```\n\nSee the [data grid tutorial](https://jscharting.com/tutorials/types/js-data-grid/) for configuration \nsyntax and more information.\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjscharting%2Fjscharting-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjscharting%2Fjscharting-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjscharting%2Fjscharting-vue/lists"}