Limit the y-axis on CanvasJS visualization

Is it possible to adjust the minimum and maximum values on the y-axis of the graph below:

new CanvasJS.Chart(this.chartDivId, {
            zoomEnabled: true,                          //Interactive viewing: false for better performance
            animationEnabled: true,                     //Chart animations: false for better performance
            title: {
                text: "",                            //No title
                fontColor: "rgba(102, 102, 102)",
                fontFamily: "Arial"
            },
            backgroundColor: "rgba(9, 9, 9)",           //Modified black
            axisX: {
                labelFontColor: "rgba(102, 102, 102)",  //Modified white
                labelFontSize: 12                       //Font size
            },
            axisY: {
                labelFontColor: "rgba(102, 102, 102)",  //Modified white
                labelFontSize: 12                       //Font size
            },
            data: [
                {
                    type: "line",                       //Line graph
                    lineColor: "rgba(102, 102, 102)",   //Letter color
                    markerType: "none",                 //Circle for point marker
                    dataPoints: []                      //Chart data points
                }
            ]
        })

I am having trouble making changes to these settings as the instructions on the website are not effective.

javascripthtmlcss

Answer №1

new ChartJS.Graphic(this.divChartId, {
        enableZoom: true,                          
        enableAnimation: true,                     
        titleText: {
            textContent: title,                            
            fontColor: "rgba(102, 102, 102)",
            fontFamily: "Arial"
        },
        backgroundColor: "rgba(9, 9, 9)",          
        axisX: {
            labelFontColor: "rgba(102, 102, 102)",  
            labelFontSize: 12                       
        },
        axisY: {
            labelFontColor: "rgba(102, 102, 102)",  
            labelFontSize: 12,                     
            minVal: minY,
            maxVal: maxY,
            intervalVal: interval
        },
        data: [
            {
                chartType: "line",                       
                lineColor: "rgba(102, 102, 102)",   
                markerType: "none",                 
                dataPointsList: []                      
            }
        ]
    });

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

What is the best way to modify the state of a particular element in an array when using useState in React?

In my Next.js application, I am using a useState hook to manage state. Here is how my initial state looks like: const [sampleData, setSampleData] = useState({ value1: '', value2: '', value3: [] }); To update the state ...

javascriptreactjsnext.jsreact-hooks

Tips for integrating Angular 2 with different websites and modules while utilizing PHP as the backend

I am looking to transition to using more industry-standard practices by starting my front-end development with Angular 2 instead of my custom JS MVC-framework. However, I am encountering some challenges while working with Angular and would like to address ...

javascriptphpangularjsjsonnode.js

Sort through an array of objects using a different array

I am looking to showcase projects based on specific skills. For instance, if I choose "HTML", I want to see all projects that have "HTML" listed in their array of skills. If I select multiple skills, then only display projects that have those exact skills. ...

javascriptreactjs

Adjust the height of the image using CSS while maintaining its aspect ratio within the Gall-Peters projection

I've implemented a Gall-Peters projection on my website and I'm looking for the right CSS code to maintain its aspect ratio. I want the image to take up 100% of the available width without elongating the countries' shapes. Can anyone help wi ...

cssaspect-ratio

Encountering an error in Jest with TypeScript (Backend - Node/Express) that reads "Cannot use import statement outside a module

Currently, I am in the process of developing Jest tests for a Node/Express TypeScript backend. Recently, I came across the concept of global test setup which I am integrating to streamline the usage of variables and function calls that are repeated in all ...

javascriptnode.jstypescriptexpressjestjs

Guide on implementing OrbitControls to a camera imported from a glTF file

I am facing an issue with OrbitControls.js when trying to apply it to a loaded camera in a three.js scene. While the camera and model load successfully, the OrbitControls.js seem to work only with cameras created directly in the three.js using new THREE.Pe ...

javascriptthree.jsgltf

Prevent clicking here

I'm attempting to only prevent the click event on the current item with a certain class. $(document).on('click', '.item', function() { $(".item").removeClass('is-expanded'); $(this).addClass('is-expanded'); ...

javascriptjquery

Content within this specific div should move in a marquee fashion

#player #title{ left: 90px; width: 200px; overflow: hidden; } Within this specific div (#Title), the text should scroll like a marquee. The challenge is to achieve this effect using only JavaScript without altering the HTML structure. How can this be acco ...

css

The issue of Select2 with AJAX getting hidden behind a modal is causing

I'm currently facing an issue with Select2 within a modal. The problem can be seen here: https://gyazo.com/a1f4eb91c7d6d8a3730bfb3ca610cde6 The search results are displaying behind the modal. How can I resolve this issue? I have gone through similar ...

javascriptjqueryajaxjquery-select2

Looking for assistance with retrieving all files from a directory based on their file extensions in JavaScript

Looking for a way to gather all the '.txt' files from a folder that also contains a 'backup' folder, and moving them into the 'backup' folder using Node.js. If you have any suggestions, please share. Thanks! Best regards, M ...

javascriptnode.js

Exploring Grunt (node): Ways to Display Available Tasks

While I am accustomed to using Rakefile, Cakefile, and Jakefile, each of them offered a convenient method for listing the tasks available. For example: jake -T jake db:dump # Dump the database jake db:load # Populate the database ...and so ...

javascriptnode.jscommand-line-interfacegruntjsjake

Adjust the color of the glyphicon icon within a date and time picker dropdown component

I decided to implement the bootstrap datetimepicker using this gem and utilized the following HTML code: <div id="custom-dates" style=" clear:both;"> <div class="container"> <div class="row"> <div class='col-md-3 col-xs-3' ...

javascripthtmlcssruby-on-railstwitter-bootstrap

Disable the background color css when hovering over a button

I'm having trouble with my Angular and HTML code. https://i.stack.imgur.com/Ea5oV.png The image above shows that a background color appears when hovering over the first icon. I've attempted: .sidemenuitm { padding: 10px 5px; cursor: poin ...

htmlcssangular

What is the best way to condense a repetitive method declaration and make it more concise?

I'm facing a situation where I have declared similar const values. Here's my current setup... import React from 'react' function Component_a() { const x = 5; const y = 10; const image_a = [...Array(x)].map((e, i) => ...

javascriptreactjsdeclarationvariable-declaration

Prevent special characters from being entered into an HTML input box with Angular 7

I'm looking to limit the use of special characters in an HTML input box using Angular 7. I also need to set requirements for only allowing numbers, letters, etc. As I am new to Angular, any assistance would be greatly appreciated. I've attempte ...

regexangularhtml

Obtain the sender using an href JavaScript code

Is there a way to retrieve the tag that called a javascript function if the anchor has a href tag of javascript:someFunc()? I know that in the onclick attribute, you can pass this, but when called from the href tag, this references the DOMWindow. Unfortu ...

javascript

How to vertically center a div using CSS

I need assistance center aligning #container with the following code: <div id="container"> <p>new</p> </div> The CSS provided is as follows- #container { position:relative; width:100%; background:red; padding:10px; ...

css

Encountering a problem sending an array of objects to a controller via jQuery AJAX

I attempted to send an array of objects to a controller using jQuery Ajax, but I am getting a null result in ASP.NET 5.0. The data array that I'm sending is named regions. The constructor for the data is defined in the BoundingBoxModel class. Here i ...

javascriptjqueryasp.netjsonajax

Steps for automatically toggling a button within a button-group when the page is loaded using jQuery in Bootstrap 3

Here is a button group setup: <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default"> <input type="radio" name="environment" id="staging" value="staging" />Staging </label> <label class= ...

javascriptjquerytwitter-bootstrap-3

How come attempting to read a nonexistent document from Firestore results in an uncaught promise?

I've been struggling to read and display data from Firestore, but I keep seeing error messages in the console. Encountered (in promise) a TypeError: Unable to read properties of undefined (reading 'ex') Encountered (in promise) a TypeError ...

javascriptreactjsfirebasegoogle-cloud-firestorenext.js