Change legend size in highmaps? - javascript

Does anyone know of a good way to change the legend size in highmaps? Here is a fiddle in which the width and itemWidth properties of the legend are set. I found this solution searching the forum and this solution works for charts. Exmaple:
Highcharts set legend height
But I can't find a good way to do it for maps.
http://jsfiddle.net/meo67rhf/
legend: {
width: 200,
itemWidth: 200
}
I've also tried stetting the width use DOM methods:
i.e. document.getElementsByClassName("highcharts-legend").style.width = "200px";
Neither of which are working for me. I'm just trying to modify the height and width of the legend. Any help is appreciated.

You're on the right track with this one.
Yes, Highmaps can adjust the size of the legend, too. I'm not sure what you're looking to do, but the height is automatically defined by the number of elements that are included inside. You can play around with this by changing the values of width, itemWidth, and layout.
In your example fiddle, if you change the values above, you'll get a different layout. See what happens when you shift them to:
width: 300,
itemWidth: 100,
layout: 'horizontal',
You get the following:
The white box is taking on the defined width of 300. Setting the itemWidth of 100 means the individual legend items will take on 1/3 of the total defined width (just don't use percentages; that won't work).
One extra thing you could also do is have these values be percentages of the container element. If you have the container's width and/or height defined in a stylesheet declaration, you can set JavaScript variables to capture those values on runtime and adjust your legend accordingly.
For example:
// in your inline stylesheet
#container: { width: '650px', height: '450px' }
// variables defined before your chart options
var chartHeight = $('#container').height();
var chartWidth = $('#container').width();
// in your legend
width: chartWidth * 0.3, // 30% of total width
itemWidth: chartWidth * 0.1, // 10% of total width
Setting the layout to 'horizontal' will give you a legend that's shorter than if you had used the value vertical.
I hope all of this is helpful for you.

Related

How can you make all groups the same height in a vis.js timeline?

In vis.js, it seems that if you display your data in groups without stacking, then the last group is taller than the others by 5px. There doesn't seem to be an obvious way to change this: it isn't a question of styling the items, since it's the row itself that's taller for some reason. How would I make all rows the same height?
Example: https://jsfiddle.net/6czo14pg/
This is due to the margin on the timeline axis. It can be adjusted with the margin axis option described at https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options.
Setting it to 5 in your example makes all the rows the same height.
var options = {
groupOrder: "content",
stack: false,
margin: { axis: 5 }
};

chart.js fixed bar width issue

I am using Chart.js as my charting library. I have created horizontalBar chart.
I need to set the width of individual bar in the chart.
I did not found anything specific in chartjs documentation but while looking at source code I found the option barThickness which is setting the fixed bar width
But as number of rows increase, instead of increasing the height of the chart, the bar are colliding with each other. Please check fiddle for example:
https://jsfiddle.net/orhp0zLg/
Is there any way we can increase the height of the chart instead of letting the bars collide with each other?
The barThickness property is a fixed width, as you noticed in your issue.
However, you have an other property called barPercentage which is a multiplier of the max width of your bars.
You should set berPercentage to a value (let's say 0.95) and you'll always have the same format, no matter how many bars you have :
options: {
scales: {
yAxes: [{
barPercentage: 0.95,
}]
}
}
Here is your updated fiddle with the fix and here are the results with first 7 values and then 12 :

Left-align y-axis title with labels in Highcharts

In Highcharts, I'd like to put the y-axis title at the top and have it left-aligned with the y-axis labels.
I've tried this:
$('#container').highcharts({
...
yAxis: {
...
title: {
align: 'high',
text: 'Y-axis title',
rotation: 0,
y: -10,
//To left-align title with labels
textAlign: 'left', //This is undocumented, but appears to work
margin: 0
}
}
})
However, I get an excessive left margin which seems to be proportional to the length of the y-axis title.
JsFiddle
It looks like the margin calculation doesn't take into account the textAlign: 'left' setting.
UPDATE: I should say that my current "solution" is to set a margin with chart.marginLeft but that's not ideal because it's fixed. The left margin should be just big enough to accommodate the axis labels (however big they might be).
How can I left-align the y-axis title with the labels and have a reasonable left margin?
I decided to use marginLeft (yes, you read that correctly), but based on the length of your axis label, to provide the needed flexibility.
What I did here is set your chart options to a variable called chartOptions. I then calculated the length (number of characters) of the axis title, set the marginLeft property based on that value, and then drew the chart with the amended chart options.
chartOptions.chart.marginLeft = chartOptions.yAxis.title.text.length;
var chart = $('#container').highcharts(chartOptions);
Here's the working fiddle: http://jsfiddle.net/brightmatrix/6eeuay58/9/
I tested it with different numbers by increasing some of your data points.
Please let me know if this is useful and helpful for you.

how to increase Y-Axis height in Highcharts

I need to deal with large array data in Highcharts and I need to increase the height in Y-Axis and width in X-Axis with scrollbar. How to do this?
My JSFiddle : http://jsfiddle.net/ngendk2o/3/
You can manually increase the height and width of your chart. For example, use:
chart: {
/* ... */,
height: 800,
width: 2000
}
It will automatically add scroll-bars to your page.
See your JSFiddle here: http://jsfiddle.net/ngendk2o/4/

Google Charts bar chart last value label cutoff

I've tried looking for a fix to this problem but wasn't able to find one that pertained to the haxis labels...
In the picture below, you'll notice that the last percentage label on the haxis is not showing up. I'm not sure what the issue is. I've tried messing around with the chartArea width and left values but that didnt seem to work. I've also made sure that the containing div is wide enough so it's not cutting off the '100%' label.
Any ideas?
Update w/ jsFiddle
jsFiddle with my code
<body bgcolor = "black">
<div id="chart_language_div"></div>
<div id="chart_api_div"></div>
<div id="chart_software_div"></div>
</body>
As you can see from my div declarations, I don't have any containing divs in the example and the issue still exists.
Here is your problem code
chartArea: {left: 140, width:'80%', height:'70%'},
Here is a solution
chartArea: {left: 140, width: 420, height:'70%'},
Basically, you were right about the label not being created. Looks like Google is checking the chart width before making the label, so rather than the browser clipping the label, Google charts never creates it.
So with a containing div of 580, a left attribute of 140, and a chart width of 80% (464px), you were overflowing. The math is 464+140 = 604, which is greater than your containing element width (580). Setting the width to a flat 420 gives you 120+420=560, leaving 20px for the label on the right side.
I'd recommend never mixing percentages and fixed widths (that goes for every layout engine I've dealt with). Having a percentage height and fixed width is fine.
Jsfiddle: http://jsfiddle.net/sbo2ggp3/4/

Categories

Resources