Balanced Spacing Among Data Points in Highcharts

Is there a way to ensure equal distances between points when using the Datetime type for the xAxis?

Visit JSFiddle

I am looking to maintain consistent distances and eliminate the gap that appears on the chart between 3 and 6 January.

Highcharts.chart('container', {
xAxis: {
    type: 'datetime',
    ordinal: true
},
series: [{
    data: [
        [Date.UTC(2010, 0, 1), 29.9],
        [Date.UTC(2010, 0, 2), 71.5],
        [Date.UTC(2010, 0, 3), 106.4],
        [Date.UTC(2010, 0, 6), 129.2],
        [Date.UTC(2010, 0, 7), 144.0],
        [Date.UTC(2010, 0, 8), 176.0]
    ]
  }]

});
javascripthighcharts

Answer №1

To implement a broken axis in your chart, you can use the broken axis module and configure it to have a break of 1 day with a gap size of 0. If you need multiple breaks, you can either specify each break as an object in the breaks array or utilize the repeat property.

xAxis: {
  type: 'datetime',
  tickInterval: 3600 * 1000 * 24,
  breaks: [{
    from: Date.UTC(2010, 0, 3),
    to: Date.UTC(2010, 0, 6),
    breakSize: 1000 * 3600 * 24
  }]
},

series: [{
  gapSize: 0,

Here is an example implementation: http://jsfiddle.net/8oL9757j/

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

Pass information to the reducer in Redux through actions with metadata included

I've implemented a component that extends the functionality of the Select component from Ant Design. You can find the documentation for the Select component here. <SomeComponent onSelect = { this.props.handleSelect } onDeselect = { this.props.hand ...

javascriptreactjsreduxantd

Encountering a Npm ERR! when deploying Angular 6 to Heroku due to missing Start script

I am experiencing an issue with my simple angular 6 app after deploying it to Heroku. When I check the logs using the command heroku logs, I encounter the following error: 2018-07-15T00:45:51.000000+00:00 app[api]: Build succeeded 2018-07-15T00:45:53.9012 ...

javascriptangulartypescriptherokunpm

Fundamental JavaScript associative object

I am working with an array filled with various items. let items = {'A', 'A', 'A', 'B', 'B', 'C'} My goal is to generate a new array that shows the count of each item present in the original arra ...

javascriptarrayshashtable

The specified class name cannot be found or is undefined after the function has

Here is a function that I have: var save = document.getElementById('savethis'+this.parentNode.childNodes[1].id); save.addEventListener('click', savethis.bind(this), false); function savethis() { this.removeEventListener(' ...

javascriptclassname

Simply input the data into the fields of the weekly tds

I am facing an issue with my code where, upon clicking the "apply to all" button, it automatically populates the columns for Monday through Friday only. However, I need Saturday and Sunday to remain empty without any data. $('#elemento').click ...

javascript

Having trouble loading a 3D model with ThreeJS in React?

I am currently utilizing React and ThreeJS to incorporate a 3D model into a webpage. However, I am encountering an issue with the function responsible for loading the mesh into my ThreeJS scene. The error message I am receiving is as follows: TypeError: C ...

javascriptreactjsthree.jsblendergltf

I am having trouble getting Vue.js to function properly within HTML when using Django. Can someone please lend me a

The code run Here is the HTML document: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Register</title> <!--javascript extensions--> <script src=' ...

javascripthtmldjangovue.js

modifying a mongodb array without actually updating it

Currently, I am facing an issue with updating the collection of users whose purchase dates have expired. When I attempt to save the changes, the user's role gets updated successfully but the purchase history does not reflect the changes. Below is the ...

javascriptnode.jsmongodbmongoose

Ways to clear dropdown selection in Vue based on a specific condition?

I am currently developing a dropdown menu for selecting visit status options, which include "pending," "canceled," "rejected," and "approved." In the case of an approved visit status, I would like the dropdown selection to only display the options for "can ...

javascriptvue.jsvuejs3

What is the best way to individually update fields using Prisma?

I am facing a challenge with updating fields individually for an object named Post. This object has three fields: title, content, and summary. Situation To save a post in the database, I can fill in just the title field initially and leave the other fiel ...

javascriptnext.jscrudprisma

Matching Parts of Strings with Regular Expressions in JavaScript

I've created an extensive regex pattern to identify URLs such as: /^\/([^\/.?]+)(?:\/([^\/.?]+)(?:\/([^\/.?]+)(?:\.([^\/.?]+))?)?)?$/ It successfully matches: /foo/bar/1.html and returns ['foo', & ...

javascriptregex

Searching for mustache variables in HTML using regular expressions is a helpful way to

As I work on parsing template files in my code, one of my first tasks involves removing all Mustache variables in the template. The majority of these variables follow this structure: {{variable}}, {{#loop}}{{content}}{{/loop}}, {{^not}}{{/not}}, {{! comme ...

javascriptregexmustache

Error message encountered: ReferenceError - The subcommand specified in Discord.js Slash Command function is undefined

I have been experimenting with subcommands in a slash command for a discord bot. I plan to have several similar subcommands, so I wanted to create a function that can be called within .addSubCommand, but it seems like it's not functioning correctly. ...

javascriptnode.jsdiscorddiscord.jsbots

Mastering the art of iterating through a JSON response

Looking to populate a combobox with data from the database. Upon accessing mystream.php?theLocation=NewYork, I receive the following JSON response: RESULT {"result": [{"theID":"36"},{"theStream":"0817-05131"},{"theLabel":"hgjbn"},{"theLocation":"NewYork ...

javascriptjqueryjson

I encountered an error while attempting to import a file into Firebase Storage

I've been struggling to upload files from Firebase Storage and encountering errors despite reading the documentation and various blogs on the topic. I'm looking for the most effective approach to resolve this issue. import { storage } from ' ...

javascriptreactjsfirebasegoogle-cloud-platformgoogle-cloud-storage

Securing the API for user registration

Currently, I am developing an HTML5 web application with a Sails.js backend. Most of my APIs are protected by the user authentication system implemented using PassportJS, which returns a 401 error for unauthorized users attempting to access them. However, ...

javascripthtmlnode.jsapisails.js

JS custom scrollbar thumb size issues in relation to the scroll width of the element

I recently implemented a custom scrollbar for a component on my website. To determine the length of the scrollbar thumb, I use the formula viewportWidth / element.scrollWidth;. This provides me with a percentage value that I then apply to the thumb elemen ...

javascripthtmlcssreactjs

Error: Could not locate local grunt on Windows 7 Professional

When attempting to initiate grunt, an error message is displayed: c:\repositories\kunde_1\themes-projekt_1\projekt_1-responsive\source>grunt grunt-cli: The grunt command line interface. (v0.1.13) Fatal error: Unable to find lo ...

javascriptnode.jsgruntjsnpminstallation

What is the best way to send the value from a textbox to this script?

My challenge is with this particular textbox: <input type="text" autocomplete="off" required="required" id="bar" name="bar" class="form-control" placeholder="Barcode"> Also, there's a button in the mix: <button type="button" style="float:r ...

javascriptjqueryhtml

Obtain the position of the click

My goal is to generate a 2dgrid with dimensions xMax = 10, yMax = 6 that looks like the following: x 0 1 2 3 4 5 6 7 8 9 _ _ _ _ _ _ _ _ _ _ y |_|_|_|_|_|_|_|_|_|_| 0 |_|_|_|_|_|_|_|_|_|_| 1 |_|_|_|_|_|_|_|_|_|_| 2 |_|_|_|_|_|_|_|_|_|_| 3 |_|_|_|_|_|_|_ ...

javascriptjqueryhtmlcss