Using the Highcharts example posted here how can you ensure that the Font Awesome icons will be positioned exactly in the middle of the data point like the native symbols/markers are? It gets called like this in the data series and uses the "plugin" that is found in that same Fiddle:
marker: {
symbol: 'text:\uf183' // fa-male
}
Using that example, if you toggle the series on/off a couple of times or zoom in/out the icons are no longer visually accurate, often displaying above the actual coordinate. In the image below you'd believe that data point had a value >50 based on where the icon is.
Their SVGRenderer example here doesn't seem to be effected.
It looks like problem with re-rendering icons later - height of the marker isn't considered. I suggest to change a bit logic for rendering icon:
var text = symbol.split(':')[1],
svgElem = this.text(text, x, y)
.attr({
translateY: h, // translate marker
translateX: -1
})
.css({
fontFamily: 'FontAwesome',
fontSize: h * 2
});
See demo: http://jsfiddle.net/2A7Zf/29/
If you want to use the markers XL-sized (i.e larger radius) for a custom chart (e.g. a Yes/No prevalence chart using the x and check icons, circle empty for the less prevalent one and circle filled for the more prevalent one and data labels showing counts/%s), then I'd recommend this tweak to center the symbols:
translateX: -w/2 + options.radius/4 - 3
Related
Hello to the community,
I would have one more question on Highcharts. I am working closely with designers and they prefer to have charts given to them with a predefined height, width, and text size, in millimetres (not pixels). That is because ultimately these charts are going to be printed out in reports.
Right now designers enter the value they want for a specific chart in millimetres onto a spreadsheet, and I convert all that to px before making the chart.
To convert pixel to mm I use:
px = mm * DPI / 25.4 since 1in = 25.4 mm.
For point (pt) to pixel I use:
px = pt * DPI/72 since 1pt = 1/72th of 1in.
Where DPI is a variable given to me: usually 300.
However the font size tends to be much bigger than it should be (it looks like it is 20 pt on the chart when I want 12 pt), and the chart dimensions also seem to be wrong.
My first question: do my calculations look right? (I am afraid I am not much of an image expert).
My second question: would there be a way to specify chart dimensions in a different format than pixel when configuring a chart on Highcharts, by any chance?
Thank you so very much!
You can use some of the already existing converters to get those values, like: https://www.unitconverters.net/typography/millimeter-to-pixel-x.htm
You can use CSS to set parameters for the container that the chart is rendered inside, demo: https://jsfiddle.net/BlackLabel/vu41gdt6/
#container {
height: 15rem;
width: 15rem;
}
Consider use regular CSS units for the charts on you web app and change them only for printing needs.
API: https://api.highcharts.com/highcharts/chart.events.beforePrint
Useful article: Using cm/mm on the CSS of a web app that replicates paper interaction is a good practice?
Already I have created a normal yAxis plotline with label styles.But now I want to create a yAxis plotline with some CSS styles. Any Suggestions?
This is what i have tried so far
This is my code
var chart = $('#tv_chart_container').highcharts();
chart.yAxis[0].removePlotLine('hori_line');
data = chart.series[0].data;
var test = data.length;
var value = data[999].y;
chart.yAxis[0].addPlotLine({
value: value, // Value of where the line will appear
width: 2 ,
color: '#248EC6',
// dashStyle: 'dash',
id: 'hori_line',
label: {
text: value,
align: 'right',
style: {
color: '#FFFFFF',
fontWeight: 'bold',
}
}
});
Here is the sample.What i actually need
I worked up a proof-of-concept that gets pretty close to what you're asking. This is using all code within Highcharts, and not anything dealing with outside CSS.
Plot lines can't possess the data label formatting you're seeking, so I used a scatter plot series to serve as the line instead. Plus, this also gives you the (default) Highcharts animation when you move over a new point in your line graph.
I did a few things here:
I added the scatter plot line as a separate "dummy" series that the user won't see in the legend and won't be able to interact with.
I formatted the data label for the last (second) point of the scatter plot line to show the blue background and white numerals as in your example.
I set a marker on the last (second) point of the scatter plot line with a diamond shape. Together with the data label settings, this gives you the marker example you showed above. Now, there is a shape: 'callout' option for data labels, but the carats only point up or down for this kind of series.
I updated your mouseOver event to update the value of the scatter plot line, rather than adding and removing plot lines.
Here's the proof-of-concept fiddle: http://jsfiddle.net/brightmatrix/tzu3khp1/. You can also see a screenshot of the result below.
I hope all of this information is helpful for you. Please let me know if you have any questions; I'll be glad to update this answer to elaborate.
I have a highcharts scatter plot with jpg's for marker symbols. When the chart loads, I would like to gently scale up and then scale down the image sizes for a few seconds so that the consumer knows that you can interact with the chart. The marker symbols are added as svg image tags by highcharts and so working with css transform/transitions are not working. I also tried adding in an animateTransform svg attribute to the image tag, but that is disrupting the way the marker symbol is placed on the chart. At the moment, I am at a loss as to what would be the best way to add a small scaling animation for a few seconds. I am currently looking into exporting my jpg's as svg paths so that they are easier to manipulate, but I don't know if that will work yet.
As an example, I would want the sun markers in this JS fiddle to scale up and then down a few times when the chart first loads. http://tinyurl.com/qj7eszh
It is possible to update series to change height and width of series' marker in callback based on series of setTimeouts.
Example: http://jsfiddle.net/9tcjo4dv/
}, function(chart){
var sunSeries = chart.get('sunSeries');
setTimeout(function(){
sunSeries.update({marker:{height: 15, width: 15}});
}, 500);
setTimeout(function(){
sunSeries.update({marker:{height: 30, width: 30}});
}, 1000);
});
I am using Highcharts and have initialized a pie chart, but with 4 pies in it, lined up in a row. Each pie has 2 slices, the second one is always transparent and has no datalabel, so every single chart has only 1 data label to show a value.
The only thing I want is to center the data label below the pie chart.
The problem is that dependent on the size of the visible slice the data label is moving because it is kinda bound to it?
Image to show the problem and the current state:
I tried to position the labels by using x and distance:
plotOptions: {
pie: {
dataLabels: {
distance: 0,
x: -100
which is actually working; I would have to fix the position for each chart and its data label.
But since the chart data can be changed by click the filled slice will change and so the data labels would reposition themselves. So I kinda need a way to fix their position relative to the center of the chart or something like that.
Thanks to Sebastian Bochan for the comment. I ended up using the renderer:
this.renderer.label(
this.series[0].data[0].name + '<br>'
+ Highcharts.numberFormat(this.series[0].data[0].percentage, 2)+'%',
80, 320,'callout')}).add();
Just an example. The 80 and 320 here set the position of the label in the plot area. Renderer
With Highcharts 3.0 it is possible to create charts with type 'bubble', whereas prior to 3.0 it was necessary to use a 'scatter' chart and modify marker size to make bubble charts. The nice thing about the old way is you had complete control over the visible pixel radius of each bubble--the new bubble charts automatically resize the bubbles so they are sized relative to each other. Is there any way to turn off this behavior or set bubble radius manually?
I am having a hard time seeing how a bubble chart, where the bubbles are not sized relative to each other, would be of any use.
You should be able to use the minSize and maxSize options, however, to control them the way that you need to:
bubble: {
minSize:2,
maxSize:50
}
{{edit:
I don't see them in the docs either, actually. But you can see an example here: http://jsfiddle.net/fXzke/13/ use either number as pixel value, or string with percent of chart height
}}
I found that adding an "empty" bubble to the series helps keep the size of all bubbles in the chart relative to each other:
name: '',
data: [{x:0,y:0,z:0}],
showInLegend: false,
color: 'transparent',
enableMouseTracking: false
Here's a sample on JSFiddle: http://jsfiddle.net/9bebT/2/. The legend, color, and mouse tracking variables each help keep the item in the series but otherwise invisible to the user. If you simply remove the empty bubble or set its visibility to "false," the chart doesn't register the empty bubble's z axis (diameter) as the minSize.