I have successfully implemented chart js to create a visually appealing chart. However, despite ensuring all the necessary steps have been taken, I am perplexed as to why the x and y axis labels are not displaying on the chart

I need the y axis labeled as "Project Count" and the x axis as "Installers" in this chart.js chart. Currently, I am using the h5 html tag for the x axis which is incorrect. I have included my chart.js javascript code below and also attached an image of the chart.js chart. Thank you in advance. Here is my code:

<div class="cardImage" style="width:97%;height:480px;margin-top:40px;margin-left:20px;margin-right:10px;">
  <div class="columnChild child3" style="position: relative; height:32vh; width:80vw">
    <canvas class="bubble" id="bubble" style="margin-left:10px;width:25px;height:10px;"></canvas>
  </div>

  <center>
    <h5 style="color:black;margin-top:240px; margin-left:-100px;">Installers</h5>
  </center>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script>
    var bubbleBackgroundColor = function () {
      return 'rgba(194, 106, 137, 0.8)'
    };
    var bubbleBorderColor = function () {
      return 'rgba(243, 193, 28, 0.8)'
    };
    var bubbleData = {{ data['bubbleData'] | tojson }};
    var bubbleCategory = {{ data["bubbleCategory"] | tojson }};
    var colorBubbleHover = {{ data['colorBubbleHover'] | tojson }};
    var pointBorderColor = {{ data['pointBorderColor'] | tojson }};
    var bubbleChartData = {
      animation: {
        duration: 10
      },
      datasets: [{
        label: "Customer Segment",
        fill: true,
        lineTension: 0.1,
        backgroundColor: bubbleBackgroundColor(),
        borderColor: bubbleBorderColor(),
        borderCapStyle: 'butt',
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: 'miter',
        pointBorderColor: pointBorderColor,       //"rgba(75,192,192,1)"
        pointBackgroundColor: "#fff",
        pointBorderWidth: 1,
        pointHoverRadius: 5,
        pointHoverBackgroundColor: colorBubbleHover,
        pointHoverBorderColor: "blue",
        pointHoverBorderWidth: 2,
        pointRadius: 1,
        pointHitRadius: 10,
        data: bubbleData,
      }],
    };

    var ctx = document.getElementById('bubble');
    var bubble = new Chart(ctx, {
      type: 'bubble',
      data: bubbleChartData,
      options: {
        responsive: true,
        plugins: {
          legend: {
            display: false,
          }
        },
        scales: {
          x: {
            type: 'category',
            labels: bubbleCategory,
            labelStrng: "Installers",
            scaleLabel: {
              display: true,
              labelString: "Project Count",
              fontStyle: 'bold',
              fontColor: "black"
            }
          }

        }
      }
    });
  </script>
</div>

[My bubble Chart image][1] [1]: https://i.sstatic.net/LVZS4.png

javascriptcsschart.js

Answer №1

The reason for the issue is related to your use of V2 syntax in attempting to set the title within the scaleLabel option. In version 3, these options have been relocated to the title namespace within the scale:

new Chart('websitecalls_chartel', {
  type: 'line',
  data: {
    labels: ["Sa", "So", "Mo", "Di", "Mi", "Do", "Fr"],
    datasets: [{
      data: [0, 0, 0, 0, 0, 0, 0],
    }]
  },
  options: {
    scales: {
      x: {
        title: {
          display: true,
          text: 'x title',
          font: {
            weight: 'bold'
          },
        }
      },
      y: {
        title: {
          display: true,
          font: {
            weight: 'bold'
          },
          text: 'y title'
        }
      },
    }
  },
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
<canvas id="websitecalls_chartel" height="80"></canvas>

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

Footer remains fixed to the bottom of the page even when there is not enough content to

It seems like there are already many discussions on this topic, so I apologize if this is a duplicate. I searched for it but couldn't find anything similar. I am currently working on an angular application using the Ionic framework for testing purpos ...

htmlcssangularjsionic-framework

The PrimeNG table component in Angular is having trouble maintaining a fixed width

I am facing an issue with fixing the width of the first column in a primeNG table. Despite inspecting the element and confirming that it is displaying correctly, my CSS adjustments are being overridden. Essentially, I am seeking a CSS solution where, rega ...

htmlcssangularprimeng

How can I use jQuery to transform a div with its elements into a canvas?

Looking for a way to convert a HTML Div and its elements to canvas, and then the canvas to an image using Jquery. I've checked out a website that only converts the whole HTML page, but I need a solution for converting specific Div elements. Any help w ...

jquerycsshtmlcanvas

Submit button functions properly in Chrome, yet facing issues in Firefox and IE

My submit button is clickable in Chrome but not in FF or IE. I suspect the formatting of the button may be incorrect. Any help would be greatly appreciated! <button> <img src="http://button_image.png" onclick="mySubmit();" ></button> Th ...

javascriptjqueryhtml

Include a tab button within a vertical tab list using Angular Material

I have utilized Angular Material to create a vertical tab, and I would like to incorporate an Add Tab button within the tab listing itself. Currently, when I add the button, it appears at the bottom of the layout instead. For reference, you can access the ...

cssangulartabsangular-materialmaterial-design

How can I fix my HTML Image input not redirecting when clicked?

I have successfully implemented the following code: <input type="button" name="btnHello" value="Hello" onclick="Test();"/> Here is the JS function that accompanies it: function Test() { window.location.href = "Page2.aspx"; } Initially, clicking ...

javascripthtmlimagehttp-redirectimagebutton

What is the best way to ensure that all my images are fully loaded before inserting them into the HTML code?

I've encountered a challenge while trying to fetch multiple images from an ajax source and display them on the page only after all of them have finished loading. Some images were not loading, even though they existed on the server https://i.sstatic.n ...

javascriptjqueryimage

CSS - Struggling to center an element with absolute positioning in IE

I have created a layout with 3 div elements. The first parent div has a css property of position relative and is taking up the full width of the viewport. The second child div has an absolute position to cover the entire area of the parent. The third child ...

htmlcssinternet-explorer

When attempting to make a GET request, Express/Mongoose is returning a null array

I am having trouble retrieving the list of books from my database. Even though I have successfully inserted the data into Mongoose Compass, when I try to fetch it, all I get is an empty array. //Model File import mongoose from "mongoose"; cons ...

javascriptnode.jsmongodbexpress

How to retrieve a nested array element in JavaScript

Here is the Pastebin link of the index.html file for reference: http://pastebin.com/g8WpX6Wn (The file contains broken image links and no CSS styling). If you would like to access the entire project, you can download the zip file. I am currently working ...

javascriptjqueryhtmlarraysfor-loop

Is it not odd that there are two '=>' symbols in an arrow function when there is typically only one? What could this possibly signify?

function updateStateValue(name) { return (event) => { setState({ ...state, [name]: event.target.checked }); }; } To view the full code example, visit CodeSandbox. ...

javascriptreactjsmaterial-ui

"Enhance your website with the magic of jQuery magnific-popup

Is there a way to add an additional button to the jquery magnific-popup component that can close the dialog box? I am currently utilizing this component to insert descriptions for photos, so I need a submit button that will successfully add the descriptio ...

javascriptjqueryjquery-uijquery-dialog

What is the method for customizing the color of the drop-down arrow in

Is it possible to customize the color of the dropdown arrow while maintaining the same style? #cars{ width:150px; } <!DOCTYPE html> <html> <body> <select name="cars" id="cars"> <option value="volvo">Volvo</option& ...

htmlcssselectdrop-down-menudropdown

Error encountered in Vue: Unexpected token (x:y) when utilizing webpack-dev-server with a process.env variable

While constructing a Vue (2.7.14) component with webpack-dev-server, I encountered a need to make a URL dynamic in my Vue CLI 2 code using a process.env variable. In order to achieve this, I made a modification to the line of code in MyComponent.vue: ...

javascriptvue.jswebpackvuejs2

My tests are not passing because I included a compare method in the Array prototype. What steps can I take to fix this issue in either the

Embarking on the challenging Mars Rover Kata has presented a unique problem for me. My jasmine tests are failing because of my array compare method within the prototype. This method is crucial for detecting obstacles at specific grid points. For instance, ...

javascriptarraysjasmine

Modifying the order of Vuetify CSS in webpack build process

While developing a web app using Vue (3.1.3) and Vuetify (1.3.8), everything appeared to be working fine initially. However, when I proceeded with the production build, I noticed that Vue was somehow changing the order of CSS. The issue specifically revol ...

javascriptcssvue.jsvuetify.jsvuetify-1

Sort the elements within the *ngFor loop according to the category upon clicking the button in Angular

Currently, I have a collection of items that I am iterating through using *ngFor. Above this list, there are category buttons available as shown in the HTML snippet below. My goal is to enable filtering of the list based on the category of the button click ...

javascripthtmlangularangular-pipe

Assistance required in creating a numerical list from an array of objects

I'm currently facing an issue with creating a numbered list from an array of objects. Below, you'll find the code containing the objects. You need to add the necessary TS code to display the atom names along with their weights in a numbered list ...

javascripthtmltypescriptlistobject

What is the best way to apply a JQuery UI Tooltip to a newly added element?

In my HTML file, I have included all the necessary JS and CSS files. Then I load a content page within it. Some of these content pages contain Usernames where I want to implement a tooltip feature. Here is an example of how they are structured: <user ...

javascriptjqueryjquery-uijquery-tooltip

How can one easily implement a countdown timer in an Ionic 3 app?

Easily create an Ionic3 timer set to 2 minutes that displays countdown like 1:59, 1:58, and finally reaches 00:00. Once the timer hits 00:00, a block of HTML content will be shown. ...

javascriptangularionic-frameworktimerionic3