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);
},
Related
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
Using Chart.js 2.0. I'm looking for a way to add a footer (line of text) at the bottom of the chart in order to display sources of data.
I tried to solve it via the option object, the same way as title and legend are included and modified. Like this:
`options: { ...
footer: {
display: true,
text: 'data from xy'
}
}`
I saw 'footer' several times mentioned in the documentation and ways to style it or use it in the context of 'tooltips', but haven't seen anything how to add it concretely.
EDIT/UPDATE:
I've found two workarounds (but no perfect solution) to add a footer to the chart while trying to solve this. In case someone is running into same problem like I did, here some suggestions how to solve this.
Nr. 1: adding a HTML element. This workaround has the disadvantage that the added HTML element is not shown if a user downloads the chart as a .png. Maybe this is the best solution, if the element doesn't have to be visible if a user downloads the chart as a .png.
`var myChart = new Chart(ctx, {
type: 'line',
data: { ... },
options: {
legend: { ... },
...
legendCallback: function(){
return '<p>bla bla</p>';
},
...
},
});
document.getElementById('legendID').innerHTML =
myChart.generateLegend();`
adding AFTER the canvas a div to append the new HTML element
<div id=legendID></div>
Nr. 2: adding another dataset which is empty but a label which contains the information that is supposed to be displayed. borderColor and backgroundColor set to transparent. Adding some empty labels (" ") gives some distance between labels and the footer which is added. The disadvantage of this workaround are the limited possibilities for styling.
Nr. 3: the solution of ana liza. This finally works best for my case since the added info is visible on the .png.
From the official docs:
Labeling Axes
When creating a chart, you want to tell the viewer what data they are viewing. To do this, you need to label the axis.
The scale label configuration is nested under the scale configuration in the scaleLabel key. It defines options for the scale title. Note that this only applies to cartesian axes.
You can add labels for both axes but in your case, since you only need it on the x-axis, your chart options should look similar to this.
var options = {
scales: {
xAxes: [
{
scaleLabel: {
display: true,
labelString: 'Party size',
fontColor: '#C7C7CC',
fontSize: 11
}
}
]
}
};
I have the chart filling the height and width of the window.
Upon creation of the chart, the yaxes does get some options like these:
ticks: { display: true, min: 0, beginAtZero: true, max: 120, fontSize: 14 }
As the window is resized (aka browser), the smaller you shrink the window, the less space that is available for the chart, because of my initial font sizes for the Title, the x-axes, my two y-axes, and the legend (though I didn't set a font there, I'm hoping you can).
In my old fancy charts (VisiFire), "for free", the fontsize of the titles, and axes, shrank (and expanded, of course). I'd like to do the same here.
How can that be achieved?
Ya know, something like:
chart.scales['y-axes-1'].options.ticks.fontSize = new_font_size
And if so, where would I put it?
I just tried the animation onProgress event (for currentStep 1), but that's too late I guess (or I shouldn't be setting options.ticks.fontSize, but something else). I was trying to find an event before animation onComplete, where I could set this. And I set it, and every step after currentStep 1, I printed out the fontsize, and it was my new fontsize, but it didn't change a thing.
Thank you.
EDIT: Is it that we can't update fontSize of the ticks? Because I just tried this:
chartInstance.scales['Dataset1'].options.ticks.fontSize = 24;
chartInstance.scales['Dataset1'].options.ticks.min = -100;
chartInstance.scales['Dataset1'].options.scaleLabel.labelString = 'foo bar';
chartInstance.scales['Dataset1'].options.scaleLabel.fontSize = 36;
And it got updated to a min of -100, the label changed to foo bar, the fontSize of that label jumped to 36, but the sticks stayed the same. They didn't go to 24.
I have a jsfiddle here: http://jsfiddle.net/jmpxgufu/178/
This shows what I mean. After running the fiddle, within 5 seconds (setInterval) it will perform an update. And the scale ticks won't update their fontSize. I'm using this: https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.min.js, when I use 2.4.0 it does work.
I did discover a bug, confirmed as one here: https://github.com/chartjs/Chart.js/issues/4896
EDIT: Well, it was marked as a bug! Now, it looks like either there is a work-around, or they changed things in 2.7.0, and this is now how you set it, or what, but ...
it looks like minor and major are used:
myLiveChart.scales['myAxis'].options.ticks.minor.fontSize = 36
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.