I am currently building a treemap using highcharts. I have a few categories, and each category has a numerical value indicating how many programs it has inside. What I want to do is have a treemap in the "squarified" style with a box for each category.
The issue I'm running into is that the font size handling highcharts has is abysmal. I'm looking to have the text be large for the larger boxes, and small for the smaller boxes. I cannot seem to figure it out.
I've tried scaling the font size to the value, but sometimes boxes of a large value are really thin, so that falls apart.
I have access to the dimensions of the box, and can give the chart a datalabel formatter function. So I've tried rendering text to a canvas at a certain size, seeing if it is within the bounds or too small, and adjusting by 1 pixel from there, but it still did not work. I actually don't know why this one failed but I messed around with it for a while but has no success.
I've read the documentation and searched for other answers online but no one seems to have done this before. Any help is appreciated. Thank you
You can use formatter function for data labels and make font size depending on point value.
series: [{
...,
levels: [{
...
}, {
level: 2,
dataLabels: {
formatter: function() {
return '<span style="font-size:' + (10 + this.point.value) + 'px">' + this.key + '</span>'
}
}
}],
...
}]
Live demo: https://jsfiddle.net/BlackLabel/8e7b6ak0/
API Reference: https://api.highcharts.com/highcharts/series.treemap.levels.dataLabels.formatter
Related
I have a large heatmap, and because it's so large, I'm trying to highlight the cell when someone mouses over it, and I'd also like to highlight the y-axis tick as a time reference because of the large width of the chart. I've seen some examples of this, but my heatmap is not responding with hover effects.
I've used this example to highlight the cells red, but it's not working. http://jsfiddle.net/937twae7/ I've also researched this method for highlighting tick values, but it's probably not working for similar reasons. https://jsfiddle.net/sjapdya6/1/
In the "series" section of code, I've done this:
...
states: {
hover: {
color: 'red'
}
}
...
Here's my chart: https://jsfiddle.net/civilsurfer/Lhysx2vg/1/
Nothing happens as I hover on the cells.
Thanks for any assistance.
You used the boost module which increases performance, but causes some limitations - for example, the inability to change color in states.
To highlight an axis label you need to adjust the findTick function:
function findTick(point, ticks) {
for (var tickValue in ticks) {
if (tickValue == point.y) {
return ticks[tickValue]
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/agcper18/
Docs: https://www.highcharts.com/docs/advanced-chart-features/boost-module
I'm using a map chart where area's are colored based on a percentage. The legend shows a mapping between the colors and their percentages. But the legend only shows numbers, not percentages. It should be obvious that these numbers are percentages. So there should be a % symbol after each number or a % symbol at the top of the chart.
It seems there is such a thing as chart tick formatting but I cannot find a way to change it. Maybe this could be done with stacklabels I would expect something like this with d3.js. I tried this with highCharts, but it seems to ignore these properties.
I also tried changing the format properties of several other objects. Changing it on the legend object get's you closest, but it's only one text on the wrong position.
Edit: something that complicates this is that I don't think the chart has an x or y-axis. Instead there's a colorAxis object. Maybe it's possible to add text with CSS3 with the itemStyle property.
Its pretty simple, all you need to do is use formatter
xAxis: {
labels: {
formatter: function() {
return this.value+"%";
}
},
}
Good morning/evening! I've spent most of my day looking at this to no avail, so it's time to appeal to a larger audience...
I'm using a Highcharts "solidgauge" chart wrapped in an ExtJS 4.2.2 container class. When I create the solidgauge, everything looks fine until I try to resize it. When I resize it, the series label moves up and off the gauge.
Good:
Bad (after resizing):
The culprit is a "Y" value I need to set initially so the "79%" shows up in the middle of the gauge, instead of way below it. Here's the init code:
me.series = [{
name: 'Uptime',
data: [80],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:2.5vw;color:black"' +
'>{y}%</span><br/></div>',
x: 0,
y: -65,
borderWidth: 0,
useHTML: true
},
tooltip: false,
type: 'solidgauge',
valueField: 'uptime'
}];
The "Y: -65" is causing the "79%" to move up the chart when resized. If I set the X and Y values to 0, the text resizes fine (it's just that the label is too far below the gauge).
I have no idea how to get that label to resize correctly with the chart when it's positioned to anything but [0,0] initially. I've looked at the chart.Render object, various CSS configs, overriding ExtJS event handlers, etc.
Does anyone have a suggestion on how to have the label centered inside the gauge AND cause it to position correctly when the chart is resized?
Thank you in advance for any help you can provide.
HTML properties like 2.5vw on label text size can't work in this case, because the chart is a canvas and on render it's like printed on the dom (try to inspect it on browser html dom), doing a dashboard with different charts I solved the problem removing the label, adding the label again, and calling:
chart.redraw();
next i write my old code to reset font size of labels, maybe something is changet, I were using Ext 4
setFieldTitleHeight: function(){
var view=this.getView(),
panelHeight=view.height;
var newFontSize=Math.floor((panelHeight/290)*16);
view.items.items[0].getAxes()[0].getTitle().setAttributes({fontSize: newFontSize+'px'});
},
setDataLabelSize:function(){
var view=this.getView(),
panelHeight=view.height,
serie=view.items.items[0].getSeries()[0],
assi=view.items.items[0].getAxes();
var newFontSize=Math.floor((panelHeight/290)*16);
var label=serie.config.label;
serie.config.label.fontSize= newFontSize+'px';
serie.setLabel(label);
Ext.iterate(assi,function(item,index,array){
item.getLabel().setAttributes({fontSize:newFontSize+'px'});
},this);
},
I'm trying to implement the next feature in Highmaps: when a user moves the mouse cursor to a specific point an image is displayed along with text data, you know, on any Highcharts chart, stock or map detailed information about point is appeared in a small window when a user moves the cursor on that point.
Problem is that I don't know how to insert images in these small containers - I think this post Showing image with variable src in tooltip of Highcharts scatter plot is somehow related to my problem, but there (and in the majority of questions concerning embedding images in Highcharts) users usually try to insert images statically into a legend or a tooltip and thus their tips are not helpful in my case.
Hope someone can help me.
You can include required information in point, for example:
series: [{
data: [{
image: 'http://path.to/my/image.png'
}]
}]
Then use formatter as described in your related question, but using image property:
tooltip: {
useHTML: true,
formatter: function() {
return '<img src="' + this.point.options.image + '" height="150"/>';
},
I am using highcharts 3D pie and if some label is a little bit long it does not resize correctly.
Here it is an example which I have taken from highcharts documentation and forked it for getting large labels.
http://jsfiddle.net/78wr256o/
It is important to mention that I would prefer to display the whole name and not cropping it. Resizing correctly the chart, keeping it centered and moving labels position if it is possible.
This is the initial version:
This is exactly the same chart but with a large label:
You can use html and css to format data labels.
series: [{...
dataLabels: {
useHTML: true,
style: {
"width": "30px"
}
......
Here is an example http://jsfiddle.net/8d517w3v/
It doesn't crop rather wrap labels around and make graph centered.