biering / vue-c3 Goto Github PK

Hi Chrys,

I just updated the latest package and it's not being picked up by webpack.

ERROR in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/LineChartC3.vue
Module not found: Error: Can't resolve 'vue-c3' in '/home/ec2-user/environment/yacp/app/src/components'
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/LineChartC3.vue 5:0-27
@ ./src/components/LineChartC3.vue
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/views/Dashboard.vue
@ ./src/views/Dashboard.vue
@ ./src/router/index.js
@ ./src/main.js

It seems like the main in package.json still points to dist/index.js while index.js is no longer available in the latest release. I temporarily changed the main to src/index.js and it works correctly.

Hello, I'm working on a project with vue, and i have problems to display charts in modals. The charts apears after 30 econds or 1 minut. I do not know whats the problem.

Node: 10.14.2
Vue: 2.6.10
Bootstrap: 4

First of all, I have problems with creating handler property in main component, due to the fact that example shows that we need to create this property with new Vue() value: handler: new Vue() and Vue returns error: Vue is not defined.

Secondly i dont understand why example shows event like: this.handler.$emit('init', options). Shouldnt be it something like this.$emit('init', options), cause the example ones returns an error?

Could someone explain how to properly use this vue-c3 package?

Here is my code:

Main component:

    <template>
    <div>
      <vue-chart @myEvent="init" :handler="handler"></vue-chart>    
    </div>
    </template>
    
    <script>
    import VueChart from '@/components/VueChart'
    
    export default {
      name: 'HelloWorld',
      data () {
        return {
          handler: {}
        }
      },
      components: { VueChart }
    }
    </script>

Chart component:

    <template>
    	<div>
    		Content
    	</div>
    </template>
    
    <script>
    export default {
    	name: 'VueChart',
    	props: ['handler'],
    	mounted () {
    		const options = {
    			data: {
    				columns: [
    					['data1', 2, 4, 5],
    					['data2', 1, 8, 9]
    				]
    			}
    		}
    		this.$emit('init', options)
    	}
    }
    
    </script>

Hey Christoph,

I try to use your package in my project, but dispatch throws following error:

[Vue warn]: Error in event handler for "dispatch": "TypeError: Cannot read property 'filter' of undefined"

here is my code:

initGraph () works as expected, but updateGraph throws an error

initGraph() {
      const options = {
        data: {
          type: "donut",
          columns: [["usage", this.temp], ["free", 100 - this.temp]]
        },
        legend: {
          hide: true
        },
        donut: {
          title: this.temp
        }
      };
      this.handler.$emit("init", options); # WORKS
    },
updateGraph() {
      const options = {
        data: {
          columns: [["usage", this.temp], ["free", 100 - this.temp]]
        }
      };
      this.handler.$emit("dispatch", chart => chart.load(options)); # THROWS AN ERROR
    }

could you take a look please?

thank you!

SelDetail.zip
I am use vue-c3 to create a chart and I have two problems.
First: I do not want to display the axis values. I have tried

axis: {
  x: {
    show: false
  }
  y:  {
     show: false
   }
}

but this hides the axis values and the axis, I just want to hide the values.

Next, I am using a line chart but the area under the line is black. I found a c3 problem that states that c3.css is not being used. Does vue-c3 include c3.css? if not how do I add it to chart?
I have attached the file zipped. I am hacking it now, so it looks funky

Hi,
i use webpack 4 with babel and the following setting:

{
    "presets": [
        [
            "env",
            {
                "modules": false,
                "targets": {
                    "browsers": [
                        "> 1%",
                        "last 2 versions",
                        "not ie <= 10"
                    ]
                }
            }
        ]
    ],
    "plugins": [
        "transform-object-rest-spread"
    ]
}

As soon i try to import "vue-c3" or "node_modules/vue-c3/dist/index.js" i get the error
"Couldn't find preset "latest" relative to directory [... the directory of vue-c3 ...]".
How can i fix that? Should this be fixed in your project?

after charts generated with options for axis.x.tick {multilineMax: 4, multiline: true,} look like http://joxi.ru/4AkkMveSopR1eA and after change tabs in browser look like http://joxi.ru/ZrJZbNyiwP6e5r

I keep getting this on the latest version. There is also a stackoverflow question related to the same problem. https://stackoverflow.com/questions/50440919/failed-to-mount-component-using-vue-c3

Is there a fix for this ?

I'm using vue-c3 to render a timeseries bar chart. I am able to rotate the x-axis text clockwise but only up to 180 via the axis.x.tick.rotate option. I need to rotate the x-axis text to either -90 or 270 (last letter of text faces x-axis line) but the chart rendering gets broken: the x-axis is no longer shown.

I'm currently employing CSS tricks to work around the problem but to no avail. has anyone else encountered the same problem, and what approaches were done to address it?

Thank you.

Hi I was just checking out vue-c3 and got this

[Vue warn]: Error in event handler for "init": "Error: url or json or rows or columns is required."

I just created an example chart like below and used it in the browser. Besides the console logs nothing shows. Should it work like this? Where could be the problem? Thanks!

<template>
    <div>
        <vue-c3 :handler="handler"></vue-c3>
    </div>
</template>

<script>
    import Vue from 'vue'
    import VueC3 from 'vue-c3'

    export default {
//        name: ...,

        components: {
            VueC3
        },

        data () {

            return {
                handler: new Vue()
            }
        },

        mounted () {
            // to init the graph call:
            const options = {
                columns: [
                    ['data1', 2, 4, 1, 5, 2, 1],
                    ['data2', 7, 2, 4, 6, 10, 1]
                ],

            }
            console.log('Mounted.');
            console.log(options.columns);
            this.handler.$emit('init', options)
        }
    }
</script>

Bringing in a number of charts into a SPA, but can't get them to bind to the container.

In an external js data file I specify the binding like this, for chart42Data:
bindto: document.getElementById('chart42Graph')

I import the data, and initialize the data:
this.handler.$emit('init', this.chart42Data)

Hoping it ends up in this container, but it doesn't:
<vue-c3 :handler="handler" id="chart42Graph"></vue-c3>

Instead, the last item I initialize attaches to all vue-c3 containers.

What am I missing?

When I'm using your component I get an error:

script1003: expected ':'

I really like the way you did the component. It's not very vue like but giving stuff to the chart using the handler is quite smart and at least it gives the opportunity to fully use c3 through this process ! Well done.

However I was wondering why do you use an external handler to handle event whereas one could have send event directly to the component using $refs ?

I'm running into a situation where if a user navigates away from the page before the chart is finished building, it's throwing an error: Cannot read property 'destroy' of undefined. Checking to make sure the chart exists before destroying fixed this.

I made a pull request with this change. Any advice is appreciated, thanks!