Just like this stack-overflow - questions - d3-line-chart-axis-text-labels-in-multi-line, i think this new feature is really useful!

You can add some properties in AxisConfig to config axis label.

Thank you for being awesome package!

Hi @ghalex. How can I visual chart with multi y axis?

Hi,

I added vue3-charts to my Vue3 project, but the project won't compile with the following error:

 ERROR  Failed to compile with 1 error                                                    17:30:24

 error  in ./node_modules/vue3-charts/dist/vue3-charts.esm.js

Module parse failed: Unexpected token (6961:20)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|       ]),
|       createElementVNode("g", _hoisted_4$3, [
>         (!_ctx.axis?.primary?.hide)
|           ? (openBlock(), createBlock(_component_axis, {
|               key: 0,

 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/views/BpvApp.vue?vue&type=script&lang=js 10:0-48 14:11-16 15:10-14 16:10-14
 @ ./src/views/BpvApp.vue?vue&type=script&lang=js
 @ ./src/views/BpvApp.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

I have no idea how to solve this, I'm pretty new to Vue and web development in general. Any suggestions on what I could try?

It seems that Labels component is not exported in src/components/index.ts.
I can't find a way to import it into my project, any suggestion?
Also, is there a documentation of the component? I can't find it in the main page

Try to use 10 elements of an array on a pie chart. It will display only 7.

Hi mate, got a bug on piechat if any of the values are the same

This works:

export const plByMonth = [
{ name: 'Jan', pl: 1000, avg: 500, inc: 300 },
{ name: 'Feb', pl: 2000, avg: 900, inc: 400 },
{ name: 'Apr', pl: 400, avg: 400, inc: 500 },
{ name: 'Mar', pl: 3100, avg: 1300, inc: 700 },
{ name: 'May', pl: 200, avg: 100, inc: 200 },
{ name: 'Jun', pl: 600, avg: 400, inc: 300 },
{ name: 'Jul', pl: 500, avg: 90, inc: 100 }
]

This will not work

export const plByMonth = [
{ name: 'Jan', pl: 1000, avg: 500, inc: 300 },
{ name: 'Feb', pl: 1000, avg: 900, inc: 400 },
{ name: 'Apr', pl: 1000, avg: 400, inc: 500 },
{ name: 'Mar', pl: 1000, avg: 1300, inc: 700 },
{ name: 'May', pl: 200, avg: 100, inc: 200 },
{ name: 'Jun', pl: 600, avg: 400, inc: 300 },
{ name: 'Jul', pl: 500, avg: 90, inc: 100 }
]

Im referring here on the 'pl'

Hello! Your lib seems very interesting to me. However I cannot run even the doc front page example:

• I create a vue 3 project with vue-cli (version @vue/cli 4.5.15)
• I replace App.vue by:

<template>
  <Chart
    :size="{ width: 500, height: 420 }"
    :data="data"
    :margin="margin"
    :direction="direction"
    :axis="axis">

    <template #layers>
      <Grid strokeDasharray="2,2" />
      <Line :dataKeys="['name', 'pl']" />
      <Line :dataKeys="['name', 'avg']" :lineStyle="{ stroke: 'red' }" type="step" />
    </template>

    <template #widgets>
      <Tooltip
        borderColor="#48CAE4"
        :config="{
          name: { hide: true },
          pl: { color: '#0077b6' },
          avg: { label: 'averange', color: 'red' },
          inc: { hide: true }
        }"
      />
    </template>

  </Chart>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { Chart, Grid, Line } from 'vue3-charts'
import { plByMonth } from '@/data'

export default defineComponent({
  name: 'LineChart',
  components: { Chart, Grid, Line },
  setup() {
    const data = ref(plByMonth)
    const direction = ref('horizontal')
    const margin = ref({
      left: 0,
      top: 20,
      right: 20,
      bottom: 0
    })

    const axis = ref({
      primary: {
        type: 'band',
        format: (val: string) => {
          if (val === 'Feb') {
            return '😜'
          }
          return val
        }
      },
      secondary: {
        domain: ['dataMin', 'dataMax + 100'],
        type: 'linear',
        ticks: 8
      }
    })

    return { data, direction, margin, axis }
  }
})
</script>

• I add the file src/data/plByMonth.js

When I run npm run serve, I get the error:

 ERROR  Failed to compile with 1 error                                                                                  3:19:25 PM

 error  in ./node_modules/vue3-charts/dist/vue3-charts.esm.js

Module parse failed: Unexpected token (6953:20)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|       ]),
|       createElementVNode("g", _hoisted_4$3, [
>         (!_ctx.axis?.primary?.hide)
|           ? (openBlock(), createBlock(_component_axis, {
|               key: 0,

 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/views/patient/PatientMeasurements.vue?vue&type=script&lang=js 6:0-48 21:11-16 22:10-14 23:10-14
 @ ./src/views/patient/PatientMeasurements.vue?vue&type=script&lang=js
 @ ./src/views/patient/PatientMeasurements.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.0.14:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

Hi,

Would love to see an option to hide the x and/or y axis, leaving the entire canvas available for just the bar/line. This is useful when using the chart as a background or if it's more for a visual representation of change rather than hard numbers.

Thanks in advance!

Hello, I get the error "Resize Observer loop limit exceeded" when trying to integrate a graph from the documentation

Hello Ghiura Alexandru!

could you please support vite with vue ts - because thats the recommended way to start a vue3 project now.

It works fine with development server (npm run dev) but can't build it:

If you make a brand new vite vue ts project like so:
ralph@centauri:~/testspace$ npm create vite@latest my-vue-app --template vue
Need to install the following packages:
create-vite@latest
Ok to proceed? (y) y
✔ Select a framework: › vue
✔ Select a variant: › vue-ts

Scaffolding project in /home/ralph/testspace/my-vue-app...

Done. Now run:

cd my-vue-app
npm install
npm run dev

And then add your example "Linechart.vue" from your website, plug it in the Helloworld.vue and compile it like this:

ralph@centauri:~/testspace/my-vue-app$ npm run build

[email protected] build
vue-tsc --noEmit && vite build

node_modules/vue3-charts/dist/components/Chart/index.vue.d.ts:1:71 - error TS2307: Cannot find module '@/types' or its corresponding type declarations.

1 import { ChartAxis, ChartConfig, Data, Direction, Margin, Size } from '@/types';
~~~~~~~~~

node_modules/vue3-charts/dist/components/Layer/index.vue.d.ts:1:27 - error TS2307: Cannot find module '@/types' or its corresponding type declarations.

1 import { LayerType } from '@/types';
~~~~~~~~~

node_modules/vue3-charts/dist/components/Line/index.vue.d.ts:1:23 - error TS2307: Cannot find module '@/types' or its corresponding type declarations.

1 import { Point } from '@/types';
~~~~~~~~~

node_modules/vue3-charts/dist/components/Treemap/index.vue.d.ts:1:30 - error TS2307: Cannot find module '@/types' or its corresponding type declarations.

1 import { Margin, Size } from '@/types';
~~~~~~~~~

node_modules/vue3-charts/dist/hooks/useBars.d.ts:2:27 - error TS2307: Cannot find module '@/types' or its corresponding type declarations.

2 import { Rectangle } from '@/types';
~~~~~~~~~

node_modules/vue3-charts/dist/hooks/useChart.d.ts:1:23 - error TS2307: Cannot find module '@/models' or its corresponding type declarations.

1 import { Chart } from '@/models';
~~~~~~~~~~

node_modules/vue3-charts/dist/hooks/usePoints.d.ts:2:23 - error TS2307: Cannot find module '@/types' or its corresponding type declarations.

2 import { Point } from '@/types';
~~~~~~~~~

node_modules/vue3-charts/dist/types/index.d.ts:1:27 - error TS7016: Could not find a declaration file for module 'd3-axis'. '/home/ralph/testspace/my-vue-app/node_modules/d3-axis/src/index.js' implicitly has an 'any' type.
Try npm i --save-dev @types/d3-axis if it exists or add a new declaration (.d.ts) file containing declare module 'd3-axis';

1 import type { Axis } from 'd3-axis';
~~~~~~~~~

node_modules/vue3-charts/dist/types/index.d.ts:2:29 - error TS7016: Could not find a declaration file for module 'd3-shape'. '/home/ralph/testspace/my-vue-app/node_modules/d3-shape/src/index.js' implicitly has an 'any' type.
Try npm i --save-dev @types/d3-shape if it exists or add a new declaration (.d.ts) file containing declare module 'd3-shape';

2 import { PieArcDatum } from 'd3-shape';
~~~~~~~~~~

Found 9 errors in 8 files.

Errors Files
1 node_modules/vue3-charts/dist/components/Chart/index.vue.d.ts:1
1 node_modules/vue3-charts/dist/components/Layer/index.vue.d.ts:1
1 node_modules/vue3-charts/dist/components/Line/index.vue.d.ts:1
1 node_modules/vue3-charts/dist/components/Treemap/index.vue.d.ts:1
1 node_modules/vue3-charts/dist/hooks/useBars.d.ts:2
1 node_modules/vue3-charts/dist/hooks/useChart.d.ts:1
1 node_modules/vue3-charts/dist/hooks/usePoints.d.ts:2
2 node_modules/vue3-charts/dist/types/index.d.ts:1

Hi,

I can't seem to find a way to change the gap between bars.

I noticed there is a gap variable in useBars which is hardcoded to 5. It would be nice to see this configurable to change the spacing between bars. For smaller charts 5 is quite a lot and causes you to have tiny bars.

For example using the default:

But when I change the built js file to have gaps set to 1.5:

Thanks in advance! Loving the library.

I'd appreciate a demo showing how to follow the new Vue3 no-build feature, using ES modules to import components.

Thank you for a simple way to display charts! That is awsome!

Could you please provide "@types/vue3-charts", so one can build with vite vue/ts, please!

Please export AxisConfig and ChartAxis interface, so i can import like this:

import type {  AxisConfig, ChartAxis  } from "vue3-charts"

For improving and reusing input axis object type!

Thank you for being awesome package!

Hello,

I have tried the example at https://vue3charts.org/docs/charts/line that shows a tooltip.

I have copied the entire code and added it to a component, like so:

<template>
  <Chart
    :size="{ width: 500, height: 420 }"
    :data="data"
    :margin="margin"
    :direction="direction"
    :axis="axis">

    <template #layers>
      <Grid strokeDasharray="2,2" />
      <Line :dataKeys="['name', 'pl']" />
      <Line :dataKeys="['name', 'avg']" :lineStyle="{ stroke: 'red' }" type="step" />
    </template>

    <template #widgets>
      <Tooltip
        borderColor="#48CAE4"
        :config="{
          name: { hide: true },
          pl: { color: '#0077b6' },
          avg: { label: 'averange', color: 'red' },
          inc: { hide: true }
        }"
      />
    </template>

  </Chart>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { Chart, Grid, Line } from 'vue3-charts'

export default defineComponent({
  name: 'LineChart',
  components: { Chart, Grid, Line },
  setup () {
    const plByMonth = [
      { name: 'Jan', pl: 1000, avg: 500, inc: 300 },
      { name: 'Feb', pl: 2000, avg: 900, inc: 400 },
      { name: 'Apr', pl: 400, avg: 400, inc: 500 },
      { name: 'Mar', pl: 3100, avg: 1300, inc: 700 },
      { name: 'May', pl: 200, avg: 100, inc: 200 },
      { name: 'Jun', pl: 600, avg: 400, inc: 300 },
      { name: 'Jul', pl: 500, avg: 90, inc: 100 }
    ]
    const data = ref(plByMonth)
    const direction = ref('horizontal')
    const margin = ref({
      left: 0,
      top: 20,
      right: 20,
      bottom: 0
    })

    const axis = ref({
      primary: {
        type: 'band',
        format: (val) => {
          if (val === 'Feb') {
            return '😜'
          }
          return val
        }
      },
      secondary: {
        domain: ['dataMin', 'dataMax + 100'],
        type: 'linear',
        ticks: 8
      }
    })

    return { data, direction, margin, axis }
  }
})
</script>

I do get a chart, but there are no tooltips. The same example at https://vue3charts.org/docs/charts/line shows a tooltip just fine and the code is almost the same. Is this a bug? I don't see any documentation on how to use the tooltips.

My package.json:

{
  "name": "mosquito2_public_frontend",
  "version": "0.0.1",
  "description": "Public map for Mosquito Alert",
  "productName": "Mapa Mosquito Alert",
  "author": "[email protected]",
  "private": true,
  "scripts": {
    "dev": "quasar dev",
    "lint": "eslint --ext .js,.vue ./",
    "test": "echo \"No test specified\" && exit 0"
  },
  "dependencies": {
    "@quasar/extras": "^1.0.0",
    "core-js": "^3.6.5",
    "quasar": "^2.0.0",
    "vue3-charts": "^1.1.28",
    "vue3-openlayers": "^0.1.54",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.13.14",
    "@quasar/app": "^3.0.0",
    "eslint": "^7.14.0",
    "eslint-config-standard": "^16.0.2",
    "eslint-plugin-import": "^2.19.1",
    "eslint-plugin-node": "^11.0.0",
    "eslint-plugin-promise": "^5.1.0",
    "eslint-plugin-vue": "^7.0.0",
    "eslint-webpack-plugin": "^2.4.0"
  },
  "browserslist": [
    "last 10 Chrome versions",
    "last 10 Firefox versions",
    "last 4 Edge versions",
    "last 7 Safari versions",
    "last 8 Android versions",
    "last 8 ChromeAndroid versions",
    "last 8 FirefoxAndroid versions",
    "last 10 iOS versions",
    "last 5 Opera versions"
  ],
  "engines": {
    "node": ">= 12.22.1",
    "npm": ">= 6.13.4",
    "yarn": ">= 1.21.1"
  }
}

Hi there, @ghalex!

The problem is that pie chart cannot display the same values and shows only unique ones
I found a line that creates this problem
By using r.uniq all duplicate data is deleted :(

Example

Data provided:

export const notUniqueData = [
  { name: 'John', avg: 30 },
  { name: 'San', avg: 20 },
  { name: 'Oliver', avg: 20 },
  { name: 'Kate', avg: 10 },
  { name: 'Ton', avg: 10 },
  { name: 'Khan', avg: 10 },
  { name: 'Talli', avg: 30 },
  { name: 'Pan', avg: 30 },
  { name: 'Kate', avg: 30 },
  { name: 'Tiny', avg: 30 }
]

Component:

<Chart
  direction="circular"
  :data="data"
  :axis="axis"
  :config="{ controlHover: false }"
  >
  <template #layers>
    <Pie
      :dataKeys="['name', 'avg']"
      :pie-style="{ innerRadius: 100, padAngle: 0.05 }" />
  </template>
  <template #widgets>
    <Tooltip
      :config="{
        name: { },
        avg: { hide: true},
        pl: { label: 'value' },
        inc: { hide: true }
      }"
      hideLine
    />
  </template>
</Chart>

Results with r.uniq and without it:

Let me start by saying that this is an awesome charting library. Thanks for sharing it!

I have a Bar chart and I wish to make the bars clickable so I can execute some logic. I understand the basics of how to add custom layers.

Could you give some pointers on how to make Bars (or Points in a Line graph) clickable?

I can contribute the result as an example to https://vue3charts.org/ if that helps

Thanks for a great package!

On build I get noUse of eval is strongly discouraged, as it poses security risks and may cause issues with minification

Can't this be re-written without eval ?

How to refresh a chart?
For example, I want it to recreate the chart SVG when the html document is resized.

Is there an example of a stacked bar chart somewhere? Thanks in advance

Hi, looks like an interesting Chart Library, but I am not able to figure out how to make the stacked bar chart.

Can you help me out?

https://gist.github.com/baybal/bf3ba9037ba2719ec4b39fe1226e3874

Hello,

Any plans for that soon?

Please export AxisConfig and ChartAxis interface, so i can import like this:

import type {  AxisConfig, ChartAxis  } from "vue3-charts"

For improving and reusing input axis object type!

Thank you for being awesome package!

How to set size.width = 100% or 100vh to make the chart responsive

How can i draw chart (e.g: Line, Bar...) from Y-axis to end of the chart right-side?

• from Y-axis:
  

• to chart right-side:
  

I found this library quite simple to use. As a new user, the surprising thing came from the (default) "band" x-axis setup.
At first I thought it was a design constraint (and almost switched to some other lib) but I realized we can configure the x-axis as "linear" and now everything is fine :)

An example with a linear x-axis might avoid people like me from wrongly thinking it is not possible.

It is not possible to have the bar chart scale in page.

Hello, how can I set full-width for the chart? I mean width 100%, auto full width when the div change, thanks

Hello, I am a beginner with vue 3, i have the following problem with vue3-charts after npm run serve:

My dependencies:
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-slider-component": "^4.0.0-beta.4",
"vue3-charts": "^1.1.22"
},

The Error:
`in ./node_modules/vue3-charts/dist/vue3-charts.esm.js

Module parse failed: Unexpected token (6533:20)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loadersepts#loaders
| ]),
| createElementVNode("g", _hoisted_4$3, [

    (!_ctx.axis?.primary?.hide)

| ? (openBlock(), createBlock(_component_axis, {
| key: 0,
/vue-loader-v16/dist??ref--0-1!./sr
@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/App.vue?vue&type=script&lang=js 2:0-32 7:11-16
@ ./src/App.vue?vue&type=script&lang=js
@ ./src/App.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.1.14:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js`

When using Area component one console.log is printed with area type and direction.
After searching for this i founded in Area/index.vue file in line 58 console.log(type, chart.config.direction)

Hi, I am having an issue with multiple pie-charts on the same page. The issue is seen in the screenshot. The tooltip is shown underneath the second chart. Is there anything I can do to prevent this?