The width of Highcharts increases proportionally to the growth of the chart's width

I want to create a highcharts graph where the width increases as data points increase.

Currently, I have:

I am using vuejs with highcharts, but it should work similarly with jquery or other frameworks.

<div class="col-md-6" style="overflow:auto"> //set overflow css
                   <div id="container_h"></div>
                <div>

Here is the script code that renders the highchart:

 this.chart = Highcharts.chart('container_h', {
                            chart: {
                                type: 'column'
                            },
                            credits: {
                                enabled: false
                            },
                            title: {
                                text: ''
                            },
                            xAxis: {
                                categories: this.ranges
                            },
                            yAxis:{
                                min: 0,
                                title: {
                                    text: 'Total trucks'
                                },
                                stackLabels:{
                                    enabled:true,
                                    style:{
                                        fontWeight: 'bold',
                                        color:(Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                                    }
                                }
                            },
                            tooltip:{
                                headerFormat:'<b>{point.x}</b><br/>',
                                pointFormat:'{series.name}: {point.y}<br/>Total: {point.stackTotal}'
                            },
                            plotOptions:{
                                column:{
                                    stacking:'normal',
                                    dataLabels:{
                                        enabled:true,
                                        color:(Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                                    }
                                }
                            },
                            series:this.chartdata
                        });

The above code renders a chart like this: https://i.sstatic.net/OXKt2.png

What I want to achieve is to have fixed width columns in the highchart that creates a scroll on the x-axis as they grow. Something like this: https://i.sstatic.net/mHFBm.png

How can I accomplish this?

javascriptcsshighcharts

Answer №1

To accomplish this, make use of highstock.js.

For a detailed solution, refer to the existing answer provided here: How to enable horizontal scroll in highcharts for large x-axis range credited to @Gopinagh.R

There are two methods to implement a scroll bar.

Method 1

Utilize highstock.js and instead of displaying a stock chart, generate a highchart.

Then activate the scroll bar feature

  scrollbar: {
        enabled: true
    }

Refer to the API documentation for scroll bar options and functionalities http://api.highcharts.com/highstock#scrollbar.

To view a live example, check out this fiddle http://jsfiddle.net/gopinaghr/kUSyF/1/.

Method 2

Another approach is to set the min & max attributes for the x-axis.

xAxis: {
            categories: [...],
            min: 0,
            max:9
} This will display 10 categories on the x-axis at once, with a scroll option for additional categories. View the example here http://jsfiddle.net/gopinaghr/kUSyF/293/

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

Focus on a specific div element while bypassing its parent

Can I directly target the element with .div-3 class, even if its parent does not have an id or class? <div class="wrapper"> <div> <div> <div class="div-3"> </div> </div> </div> </div> I am aware ...

htmlcss

I am looking to retrieve the values entered in a textbox from an HTML document and then post them using a JSON file in Node.js when the submit button is

Here is the JavaScript code I have written: $(document).ready(function(){ $('form').on('submit', function(){ var email = $("form input[type=text][name=emails]").val(); var todo = {email: email.val(), ...

javascriptjqueryjsonnode.js

Filter a two-dimensional array based on the presence of a string value found in the second array

My logic for this assignment is not very good, as I need to filter a 2D array based on the values of another array. Let me provide an example of the 2-Dimensional Array: const roles = [ ['roles', 'admin', 'write'], ['ro ...

javascriptarraystypescriptlogic

Troubleshooting problems with a JavaScript game that involves guessing numbers

I have been given a challenging Javascript assignment that involves using loops to create a counting betting game. The concept is simple: the User inputs a number, and the computer randomly selects a number between 1 and 10. The User can then bet up to 10 ...

javascripthtml

An effective way to connect the ng-model of a <select> element with ng-options within an ng-repeat loop

My task list consists of: [{ Title: "Title1", Position: "9" },{ Title: "Title2", Position: "1" },{ Title: "Title3", Position: "5" },{ Title: "Title4", Position: "7" }] I am attempting to generate a series of <select> ...

javascriptangularjsangularjs-ng-repeatangular-ngmodelangularjs-ng-options

Implementing a JQuery function to generate a popup whenever a user clicks on a table row (tr) in an

I am working on a JSP page that contains a table, and I want to implement a pop-up window functionality when clicking on a specific row in the table. I have attempted to use JavaScript to connect with the row but so far, I have not been successful in creat ...

javascripthtmlcsspopup

An issue with asynchronous execution in Protractor

I have been using and learning protractor for over a month now. Despite the documentation stating that Protractor waits for Angular calls to complete (http://www.protractortest.org/#/), ensuring all steps are executed synchronously, I have not found it ...

javascriptangularjsprotractor

Experiencing difficulties with node and asynchronous programming

I'm attempting to use async-waterfall in order to fetch data from an API, save it as JSON, and then store it in a database. Here is a snippet of the code I have so far. Can someone assist me with this process? async.waterfall([ function getBo ...

javascriptnode.jsexpressasynchronous

What could be causing the issue preventing me from applying a border in the code below?

There seems to be an issue in the code below where I am struggling to apply a border Can anyone help identify what the problem might be? <!doctype html> <html> <head> <title> My first Navigation Page</title& ...

htmlcss

The metro bundler is facing an unexpected glitch and is stuck in the terminal, failing to load

Recently, I've been using explo-cli to work on a react native project. Everything was running smoothly until today when I encountered an error stating that it couldn't find module './iter-step'. Before this, there was also an issue with ...

javascriptreact-nativenpmexpo

The Java Selenium script encountered an illegal type error when trying to execute JavaScript through JavaScriptExecutor: driverFactory.CustomWebElement

I have a CustomWebDriver class that extends the functionality of JavascriptExecutor. Here is my implementation: @Override public Object executeScript(String script, Object... args) { return ((JavascriptExecutor) driver).executeScript(script, args); } ...

javascriptjavaseleniumselenium-webdriver

The Threejs Blender exporter is exporting in an incorrect format

I'm attempting to convert a blender model into a threejs JSON format using the provided blender exporter. However, when I try to parse the JSON file, I encounter an error: Uncaught TypeError: Cannot read property 'length' of undefined The ...

javascriptjsonthree.js

CSS - the option element is not appearing when using display:block

I am facing an issue with a select tag and its options. I have used CSS to hide all the options except for the last one which is set to display block. However, the last option is not showing up. Could this be due to the large number of options present? &l ...

htmlcssselect

Using jquery to dynamically retrieve the unique property identifier

I have a dynamically generated table with a button labeled as view images. Each time this button is clicked, I need to retrieve the image names from the database for that specific property. <?php foreach($unapproved as $unapp):?> < ...

javascriptphpjquery

What is the constant name returned by jQuery's .css method for font-weight?

I previously defined the font-weight of an element using this code snippet $('#myid').css('font-weight', 'bold'); However, when I attempt to check the value later on $('#myid').css('font-weight') I rece ...

jquerycssproperties

Unable to Trigger onClick Event with react-bootstrap Navbar Dropdown in Combination with react-router-dom

In my React application with react-bootstrap, I have a Navbar component that displays a dropdown menu for different brands. However, I noticed that the second brand option (Tommy Hilfiger) is always the one active by default, as if it is automatically cl ...

javascriptreactjsbootstrap-4react-hooksreact-bootstrap

Ways to safeguard your API endpoint

Just starting out with Node.js/Express, I'm looking to have my front end retrieve data from an endpoint ('/1') without displaying the JSON data to users when they access that specific endpoint. Any guidance on how to accomplish this would be ...

javascriptnode.jsexpress

I'm having trouble getting my CSS opacity to smoothly transition back to its original state of .5 using setTimeout(). What could be

I recently started learning JS, Jquery, and CSS. My goal is to create a Simon Says style game. However, when I attempt to animate the computer to automatically light up the correct square, I faced some challenges. To address this issue, I decided to star ...

javascriptjquerycss

Integrating image transitions into JavaScript

Could you provide guidance on how to create buttons from the three images within the "fadein" div in order to navigate directly to a specific jpeg? Currently, the three jpgs are displayed in a continuous loop. Thank you. ...

javascriptcssimagehtml

Challenges encountered in exporting functions with Webpack 5

Imagine having an exported function called createTableFromJSON(json) from the main file named index.js. The configuration example below adheres to the guidelines outlined in Webpack's official documentation: const config = { entry: './assets/ja ...

javascriptwebpack-5