The function $$.generatePoint is not recognized in the Billboard.js library

Having some trouble with integrating billboard.js into my Vue project as an alternative to using d3.js. Struggling to get it working in both my repository and a vanilla Vue project.

Anyone familiar with the process of getting billboard.js running smoothly in combination with Vue?

Snippet from My App.vue:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <div id="chart">
  </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { bb } from 'billboard.js';

@Component
export default class App extends Vue {
  mounted() {
    console.log(this);
    console.log(bb);
    bb.generate({
      bindto: '#chart',
      data: {
        columns: [
          ['data1', 30, 200, 100, 170, 150, 250],
        ],
        types: {
          data1: 'line',
          data2: 'area-spline',
        },
        colors: {
          data1: 'red',
          data2: 'green',
        },
      },
    });
  }
}
</script>

Error message received from devtools:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in mounted hook: "TypeError: $$.generatePoint is not a function"

found in

---> <App> at src/App.vue
       <Root>

Using the following npm package versions for this project:

  "dependencies": {
    "billboard.js": "^2.0.3",
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^8.4.2"
  },

Created a GitHub repository with minimal code to replicate the issue.

javascripttypescriptvue.jsbillboard.js

Answer №1

After referencing the documentation, it is recommended to use the ESM build in the following manner:

// BEFORE:
//import { bb } from 'billboard.js';

// AFTER:
import bb, { line, areaSpline } from 'billboard.js';


export default {
  mounted() {
    bb.generate({
      //...
      data: {
        types: {
          // BEFORE:
          //data1: 'line',
          //data2: 'area-spline',

          // AFTER:
          data1: line(),
          data2: areaSpline(),
        },
      }
    });
  }
}

If you plan on having multiple instances of this chart component on a single page, ensure each instance has a unique reference by using a ref for the parent element where the chart will be rendered:

<template>
  <!-- BEFORE: -->
  <!-- <div id="chart" /> -->

  <!-- AFTER: -->
  <div ref="chart" />
</template>

<script>
export default {
  async mounted() {
    // wait til next tick for `ref` to be available below
    await this.$nextTick();

    bb.generate({
      //...
      bindto: this.$refs.chart,
    });
  }
}
</script>

For more details and improvements, refer to the GitHub PR with fixes

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Determining the victorious player in a game of Blackjack

After the player clicks "stand" in my blackjack game, my program checks for a winner. I am using AJAX to determine if there is a winner. If there is a winner, an alert will display their name. Otherwise, the dealer will proceed with making their move. Any ...

phpjavascriptajax

Refresh PrimeNG dataTable without reloading the table

Currently, I am implementing the functionality of adding new rows to a dataTable in my template. Here is the code snippet from the component: rows: any = {} newrow: any = {} addNewRow(key: string) { let rows = {...this.rows} let newrow = {_key: Math ...

angulartypescriptdatatableprimeng

What initiates the call for CSS?

During his instructional video, the creator visits the CodeIgniter website at . When he initially arrives at the site (at 1:32), it appears somewhat odd, almost as if it lacks CSS styling. However, after refreshing the page (1:37), it displays properly. ...

javascriptcss

Guide on how to selectively add middleware such as multer to a fresh express router

For a previous project, I set up a router and utilized multer for handling file uploads. I was able to apply the multer middleware selectively on specific routes as shown below: var router = express.Router(); var multer = require('multer'); var ...

javascriptnode.jsexpressmulter

A correct JSON format for presenting information within an AngularJs framework

I am looking to integrate JSON data into my website using AngularJs. Here is the approach I have taken: First, I created a database in phpMyAdmin. Next, I set up a table with two columns - subject and body. Should an id column be included? After work ...

javascriptphpmysqljsonangularjs

Creating getter and setter functions for an input field model property in Angular

I need help creating getter and setter methods for an input field property. Here is my attempted code: import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', st ...

javascriptangular

Store a JSON object without creating a reference to it

My issue is presented in a much simpler manner. Here is the json (you can view it here if you wish) {"resource":[{"id":"1408694994","obj":[{"id":"1","action":[{"name":"ON","id":"301"},{"name":"OFF","id":"302"}]},{"id":"2","action":[{"name":"ON","id":"303 ...

javascriptjson

Angular 4 fetches the number obtained from a GET request

In my spring-boot back-end app, I have defined a query as shown below: @Query("SELECT COUNT(*) " + "FROM Foo " + "WHERE name = :name and surname = :surname ") Integer countByNameAndSurname(@Param("name") String name, @Param("surnam ...

angulartypescriptget

What is the best way to retrieve the chosen item within a Tabmenu component in Primeng?

I have created a simple array of MenuItem objects to populate the Tabmenu component from Primeng. Here is an example: .ts file: items = MenuItem[]; activeItem = MenuItem; //constructor, etc... ngOnInit() { this.items = [ {label: &a ...

angulartypescriptprimengangular5

Is there ample documentation available for Asp.Net Ajax controls?

Struggling to locate the client side functionality of Asp.net Ajax controls such as calendarextender. How can I determine the specific client side functionalities of each control or Calendar control? So far, I have only discovered the properties ._selected ...

javascriptasp.netajaxclient-side

Stop node.js from automatically converting a nested object containing numeric keys into an array

Every time I send an object with a nested object containing keys that are numbers to my node.js server, the nested object gets converted into an array. Is there a way to prevent this from happening? Client: $.ajax({ url : `/cctool/report`, method ...

javascriptjquerynode.jsexpressjquery-ajax

What is the process of attaching classes in vuejs?

I am attempting to bind multiple classes using v-bind:class for radio buttons that I want to apply Bootstrap classes to when they are active. However, it seems like I am not adding the classes correctly. <div id="app"> <div class="btn-gr ...

vue.js

Creating multilingual menus with ABP and Nebular

Currently, I am in the process of developing an application using ABP framework version 4.4 and integrating the Nebular theme as opposed to the default basic theme. Amidst various challenges faced during this migration, one particular issue stands out - lo ...

angulartypescriptabp-frameworknebular

What is the best way to fetch d3 data from a service?

I've been exploring a tutorial on creating charts with d3, which can be found at: When it comes to loading data for use in d3, I typically rely on the following code snippet: d3.tsv("data.tsv", type, function(error, data) { The file "data.tsv" is c ...

javascriptjqueryajaxd3.js

Tips for incorporating side effects into an observable property?

I am relatively new to Mobx and I need to automatically call a function when this observable array is updated. The observable array: @observable Todos = [] I have many functions to manage this array (addTodo, removeTodo, ...) and I would like to avoid ...

javascriptreactjsmobxmobx-react

In JavaScript, the gallery feature with Lightbox effect creates a unique touch as only half of the screen fades to black in

Hello everyone, I'm a complete beginner when it comes to programming so please be gentle with me on my first question :) I'm trying to put together a simple website with a lightbox gallery, and you can check out what I have so far here. The prob ...

javascriptjqueryhtmlcss

Tips for setting up npm dependencies in a subfolder

Within the main directory, I have a package.json file that contains this command: "install": "cd packages/my-package && yarn". Every time I execute yarn run install, my intention is for it to enter into the specified package, set up the node modul ...

javascriptnode.jsnpmyarnpkg

The occurrence of the error "Failed to resolve component" in Vue 3.0.11 seems to be random, particularly when using recursive components

After thoroughly checking all similar questions on this platform, I did not find any relevant solutions. In most cases, the error seems to occur when utilizing components:[comp1,comp2] This is incorrect because the components property should be an object. ...

javascriptvue.jsvue-componentvuejs3

Tips for accessing form data that has been automatically uploaded in PHP

I've been trying to automatically post data using JavaScript and retrieve it in a PHP file. However, I am facing an issue where the PHP file is not able to retrieve the data. I have set up an automatic form that takes input from another form and send ...

javascriptphphtml

Is there a way to use an Angular $watch to determine the specific changes made to $scope.value?

I am monitoring a variable called $scope.value with a watch in my code. There are two ways in which the value can be updated: The first is by updating it from the controller, such as through any services. The second way is that any input event can also ...

javascriptangularjswatch