highcharts - unwanted space at bottom of heatmap chart - javascript

I have a heatmap that has some space at the bottom that I want to get rid of. I have tried multiple SO threads suggesting that I change chart.marginBottom, chart.spacingBottom, x and yAxis margins, disabled legend, etc. Unfortunately, I created a jsfiddle and am unable to replicate the issue. The jsfiddle code is nearly identical my code: http://jsfiddle.net/b637gdxv/1/
chart: {
type: 'heatmap',
marginTop: 26,
marginLeft: 5,
marginRight: 5,
marginBottom: 5,
width: 200, // - width when in one row
height: 250,
borderWidth: 3,
borderColor: 'grey',
borderRadius: 5,
plotBackgroundColor: '#FFFFFF',
plotShadow: true
},
Here is an image of what it looks like on my page:
Notice the extra space on the bottom. Sorry that I am not able to define the problem more specifically - the difference between my page and the jsfiddle eludes me, and I am not super experienced with javascript. Any ideas of things to try?

Did a little more digging into the highcharts JS source code, and found a work around! This is actually being impacted by the logic that calculates the axis ticks, so setting the "endOnTick" option to 'false' on the impacted axis appears to resolve the issue. E.g.
yAxis: {
labels: {
enabled: false
},
endOnTick: false, // This is the fix
title: null,
reversed: true
}
Here is an updated jsfiddle showing the fix:
http://jsfiddle.net/e0av9wm1/
Compare to the following, which doesn't include the fix:
http://jsfiddle.net/v1697qhj/

Since we don't have enough code to really identify what you're issue is and you can't even reproduce it on jsfiddle, I'll give you a walkthrough of the steps I take to identify CSS issues and fix them - particularly when the CSS is applied dynamically.
If you're using IE, use the developer tools (F12). From the HTML tab click the "Select Element" tool (it looks like a pointer). Move the mouse to the outer box and it will garnish a slight grey border... click the mouse.
At this point - I think you'll have in the HTML pane the following tag highlighted:
<rect class=" highcharts-background" fill="#ffffff" stroke="grey" stroke-width="3" x="1.5" y="1.5" width="196" height="246" rx="5" ry="5" strokeWidth="3"/>
Note the attributes are clickable and can be changed on the fly.
At this point you can start tinkering with the styles (on the right pane) or even switch to the CSS pane (next to the HTML tab) and tinker around with the various CSS definitions.
There are different developer tools for each browser. Chrome has them built in as well and Firefox has the FireBug plugin to provide them. For this type of thing they come close to working the same way.
Let us know what you find and good luck!

I'm running into a similar question with my heatmaps, and updated the jsfiddle to show the issue:
http://jsfiddle.net/v1697qhj/
You'll notice in that example that the cells of the heatmap do not fill the full height set on "chart.height". I'm wondering if the issue is because the number of rows divided into the available height is not an even number of pixels, so when highcharts draws the rows at a fixed pixel height there is some amount of total space left over that is never used.
Does anyone know if there's a way to get Highcharts to add a pixel to every so many rows (or columns for the horizontal case) so that the cells of the heatmap will always fill the available plot area?
chart: {
type: 'heatmap',
marginTop: 26,
marginLeft: 5,
marginRight: 5,
marginBottom: 5,
width: 200,
height: 250, // We want the cells to fill this entire height
borderWidth: 3,
borderColor: 'grey',
borderRadius: 5,
plotBackgroundColor: '#FFFFFF',
plotShadow: true
}

Related

HighCharts how to make a responsive legend?

I am making a HighCharts pie chart with a responsive legend, the legend should work on mobile views as well as tablet, pc, etc.
Here is sort of a link to my issue on js fiddle https://jsfiddle.net/sg657bpz/1/
And here are the styles
legend: {
align: 'center',
layout: 'horizontal',
width: 600,
x: 100,
itemMarginTop: 1,
itemDistance: 10,
itemWidth: 170,
},
Basically right now, the legend will just kind of cut the words out of the label when we go to mobile view..
I would like the legend to dynamically shrink in size kind of like how flexbox does, depending on how large your viewport is, so that It fits within the chart and keeps the same structure of having 3 columns and two rows.
How can I add this responsive functionality? In the responsive attribute, it only lets me set one value of either min width or max width, so I cannot do CSS like media queries. Also to create this two row funcitonality, I have to set the width to different numbers, and just kind've guess that It will go on two rows, is there a way to implement this feature easier?
Thank you for the help

Highcharts move xAxis down / off of chart

I am working on legacy code from a previous developer and they used highcharts.js (v3.0.1). The xAxis is landing within the graph (screenshot) and I can't sort out why this is. I tried to recreate this in jsfiddle but I can't get that axis to move. I thought that maybe it was a bug in the version but I can't get it to replicate so I'm thinking that is has to be something within the sites own CSS that is manipulating it, however, it's built with g, rect, and text tags which I don't see in any of the custom CSS files.
I've looked through other Highchart.js posts on here but I haven't seen this issue posted yet. Does anyone know what I'm missing?
EDIT: I forgot to mention this but all the usernames are centered text-center
Check exactly how xAxis labels are aligned. As I can see they are rotated vertically so it is important to set appropriate labels align property:
xAxis: {
categories: ['Apple', 'Samsung', 'Dell', 'Lenovo'],
labels: {
align: 'left',
rotation: 90
}
}
Demo:
- labels align center: https://jsfiddle.net/wchmiel/29b4qejc/
- labels align left: https://jsfiddle.net/wchmiel/56evyrxj/
Api reference:
https://api.highcharts.com/highcharts/xAxis.labels.align
are you use the labels padding ?
https://api.highcharts.com/highcharts/xAxis.labels.padding
Be sure that the number is greater than 0.

Frame of data of sparkline is unbalanced

Im using Sparkline with AngularJS, it shows the graphics correctly, the problem is that the frame that shows the data is unbalanced! and I dont know why, this is the problem:
As you can see the number 7 is out of the frame, I dont know the why of this, and I cant find the style of this frame, anyone knows how to? :D
Finally I fount the solution for this problem, I created the sparkline like this:
$('.graphicLine').sparkline(vm.charData,{
type: 'line',
height: 80,
width: '100%',
lineWidth: 2,
lineColor: '#dddddd',
spotColor: '#bbbbbb',
fillColor: '',
spotRadius: 3,
highlightLineColor: '#fff',
tooltipFormat: '<p>Clientes : {{y}} </p>'
});
So in the frame the sparkline shows the tooltipFormat, just put in all what you waht to show on the frame

Setting a border on a Shield UI Chart

I am trying to show a border on my Shield UI Chart. I set it's color:
borderColor: 'red',
but it won't show. I tried to set the color as hex value:
borderColor: '#F01616',
but this doesn't help either. However when I set the same value for the charts background:
backgroundColor: 'red',
it works. What am I dong wrong?
You probably didn't set the border-width. How does your HTML markup look like?
See here in the Shield UI Documentation.
You are setting the color correct. You are right that it can be set either as
borderColor: 'red',
or as
borderColor: '#F01616',
As I can see from the previous answer and agree to it, the only thing you are missing, is to set the line thickness of your borther. However you need to use borderWidth:
borderWidth: 5,
using the internal property and not the CSS attribute border-width, at least because there is no CSS embedding.

Formatting legend and axis in Google Charts

I'm new with Google Charts and I am not able to obtain a fine result with the texts surrounding the graph.
This is how my chart looks:
As you can see, it does cut both Horizontal-Axis and Legends, so the final result is not as good as It could be. Is there a way to solve this? I've been reading the official documentation and some posts from here, but I haven't found the way to do this.
Recap: How do we modify the legend or the axis texts so they are fully visible?
After some time experimenting, I daresay it is not posible to choose how much part of the words on legend or axis you can show.
However, you can play with their sizes and position so you get -more or less- what we were looking for.
This is what can be done:
legend: {position: 'top', textStyle: {fontSize: 14}}
I've also made the image a little bit bigger so it fits the x-axis without problems (There was also the option of making its text smaller).
So doing this, this is what you get:
Its basically about setting your chart area vs width / height.
width: [yourChoice]px,
chartArea: {width: '50%'}
ref https://stackoverflow.com/a/6870732/661584
Also as #ArcDare says using the other available styling options such as font size etc
For optmized chart area,
chartArea: {'width': '90%', 'height': '60%'},
legend: { position: 'bottom' },
hAxis : { textStyle : { fontSize: 10} },
vAxis : { textStyle : { fontSize: 10} },
The trick is setting axis textStyle fontsize will enable better placement of legend on the bottom of the chart as the chart Area is about 60-70%
Feel free to use my custom Google Charts plugin which creates both chart and table.
https://github.com/cosmoarunn/gapiExt

Categories

Resources