Hey there, I'm facing an issue with my highcharts diagram.
1) Can anyone help me adjust the column width to match the width of the month area? (I've tried changing "width" in CSS but it's not working)
2) Also, how can I remove all borders except for the top border? (Changing "stroke-width" in CSS didn't work either)
Maybe there's a JavaScript configuration solution for this?
Update: I implemented the suggested solutions and it worked! Thank you everyone.
To adjust the width, you can use pointPadding: 0 along with groupPadding: 0.
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
type: 'column'
}],
plotOptions: {
column: {
pointPadding: 0,
groupPadding: 0,
borderWidth: 0
}
}
});#container {
min-width: 300px;
max-width: 800px;
height: 300px;
margin: 1em auto;
}<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>Next, you can include:
yAxis: [{
gridLineWidth: 0,
minorGridLineWidth: 0
}],
This will help eliminate borders and lines, as demonstrated by @Alex in their response.
To adjust the width, you can use the pointWidth property:
plotOptions: {
series: {
pointWidth: 40
}
},
If you wish to get rid of grid lines, add the following code:
yAxis: [{
gridLineWidth: 0,
minorGridLineWidth: 0
}],
Take a look at this example:
Highcharts.chart('container', {
yAxis: [{
gridLineWidth: 0,
minorGridLineWidth: 0
}],
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
pointWidth: 40
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
type: 'column'
}]
});#container {
min-width: 300px;
max-width: 800px;
height: 300px;
margin: 1em auto;
}<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js">
</script>
<div id="container"></div>To set the width of the chart, include the chart: {width: WIDTH}, key value pair in the options object as demonstrated below.
When it comes to the chart's borders, there is no specific configuration available. To add borders, you must apply styles to the container div like in the example snippet provided.
Highcharts.chart('container', {
chart: {
width: 300
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
type: 'column'
}]
});#container {
min-width: 300px;
max-width: 800px;
height: 300px;
margin: 1em auto;
}<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="border-top: thin solid black" ></div>import Link from "next/link"; import Image from "next/image"; import { Text, useColorModeValue } from "@chakra-ui/react"; import { styled } from "@emotion/styled" const LogoBox = styled.span` font-weight: bold; font ...
In my JavaScript application, there is a functionality that loads a list of items for users to click and view detailed information in a separate div on the page. Users should be able to interact with and make modifications to these individual item overview ...
When we POST an AJAX request to a server running locally, the code looks like this: xhr.open("POST", "http://localhost:9000/context/request"); xhr.addHeader(someCustomHeaders); xhr.send(someData); The webpage where this javascript is executed is also on ...
The command that needs to be sent to the embedded device is in the form of a GET method. However, the value continuouspantiltmove: String(pt) is not being properly transmitted to the CGI script through Google Chrome, causing it to fail. Since I do not hav ...
I have been encountering an issue while trying to add links to different pages of my website. Whenever I click on the link, it displays a "404 Page Not Found" error message. Objective: My main goal is to create links from my home page, index.php, to other ...
My div has an auto-scroll feature that works fine, but I've encountered an issue when using multiple smileys in a single chat post. The auto scroll seems to stop working correctly and only scrolls 2 lines from the bottom. I attempted to fix this with ...
Currently utilizing Jquery to launch a new Telerik window, as shown below: var win = $('#myWindow').data('tWindow'); win.open(); With the knowledge of the mouse position (x,y), my goal is to initiate the window at that exact location. ...
I'm struggling to extract a function that can be used across various components. The issue is that when I try to use "this", it is coming up as undefined. I'm not sure of the best practice for handling this situation and how to properly assign th ...
I'm a bit perplexed by this discovery and I can't quite comprehend the rationale behind it. The provided code snippet showcases two nested DIVs. The outer DIV has specific dimensions and a relative position set, while the inner DIV also has fixe ...
Is there a way to create a responsive div on top of a responsive image? I'm having trouble getting the div to fully align with the image in my code. Can anyone offer assistance? Check out the codePen here HTML Code: <div class="container-fluid ...
Currently utilizing md-button with text inside An issue arises in low resolution where the text gets cut off, struggling to find a suitable solution If anyone has any suggestions on how to resolve this problem, please share. I have included screenshots ...
var count = 2; $('.next').click(function() { var requiredField = true; $(this).siblings('table').find('tbody tr:nth-child(' + count + ') td').each(function() { var element = $(this).find('center').f ...
I am working with a custom styled checkbox that is part of a mapped data array. {nfcArray && nfcArray.map((item, key) => { return ( <tr class="hover"> <td className="cell_style pl-3 pl-lg-5"> ...
Currently, I am in the process of developing a server-side node.js application utilizing express to manage HTTP requests. In addition to this, I am incorporating websockets (socket.io) support into the application. The challenge I face is that I do not hav ...
As someone who is new to Javascript and working on an e-commerce website, I am currently facing a challenge with displaying the order id on the return page. Each time I try to do so, I encounter an error message that reads Cast to ObjectId failed for val ...
Utilizing css counters for the formatting of certain wiki pages is a common practice that I implement by adding CSS directly to the wiki page. One particular use case involves numbering headers using counters. Below is a snippet of the code that demonstra ...
UPDATE (Instead of deleting this question, I'll keep it as a reminder that errors are sometimes found in unexpected places...) I apologize for leading you down the wrong path with this question. The issue causing the "Actual result" was actually loc ...
I am currently working on building a webpage, but I am facing some issues with the layout. Specifically, I am unable to make the div automatically adjust its size (particularly the height). Here is the code that demonstrates the problem: <!DOCTYPE html ...
I've created a template <div id="template" style="display: none;"> <strong>Name</strong>: <span class="name"></span><br/> <input type="number" id="amount"> <button type="button" onclick="App.submit ...
Having some trouble setting up ion-scroll on a specific screen in my mobile application built with Ionic. On the Book page of my app, I'm encountering two main issues: https://i.stack.imgur.com/MnheG.png 1) The placement of the Confirm button doesn& ...