In version 2.5.5 markers was automatically clipped by x-axis, in version 3.0.2 they don't.
-> jsfiddle.net/7c8am/2/ - version 2.5.5. markers clipped
-> jsfiddle.net/vzv3X/2/ - last version, markers not clipped
Are there any options to enable clipping back?
I've changed following in highcharts source file (line 13503, ver. 3.0.2):
if (group && this.options.clip !== false) {
group.clip(chart.clipRect);
this.markerGroup.clip(); // no clip
}
to
if (group && this.options.clip !== false) {
group.clip(chart.clipRect);
this.markerGroup.clip(chart.clipRect);
}
Related
I'd like to get some datalabels showing inside segments of a doughnut chart where there is suitable space to do so.
I know I can use negative distance values on the the data labels config options, but I wonder how I can achieve this dynamically based on the values\size of the segments.
Is such a technique achievable? Can I have a mix of data labels outside of the segments connected with lines (connectors) and others inside the actual segments?
My starting point so far based off the official highcharts example pie chart code: https://jsfiddle.net/parky12/tbnjypse/1/
You can for example use chart.load event and change distance, x or y properties for an individual point. For example:
events: {
load: function() {
this.series[0].points.forEach(point => {
if (point.y > 5) {
point.update({
dataLabels: {
distance: -50
}
// avoid redraw after each update
}, false);
}
});
this.redraw();
}
}
Live demo: https://jsfiddle.net/BlackLabel/Lco29fdj/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Point#update
without full screen
on full screen
In StockChart of highcharts whenever I use Measure (X,Y,XY) annotation and switch to full screen, the annotation does not reflow or is not consistent with the scale.
Is there a way to correct that?
https://www.highcharts.com/stock/demo/stock-tools-gui
That problem is a bug in Highcharts and it is reported here: https://github.com/highcharts/highcharts/issues/11174
As a workaround, you can update measure annotations in redraw event:
chart: {
events: {
redraw: function() {
this.annotations.forEach(function(annotation) {
if (annotation.options.type === 'measure') {
annotation.update();
}
});
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/xc6eo0f7/
API Reference: https://api.highcharts.com/highcharts/chart.events.redraw
I would like to be able to add a dot at the tip of a connector in a pie highchart. (using Highcharts 5.0.10)
I learned that there are <marker> svg elements (not to be confused with the highcharts marker api) and these can be added either:
via css
as an attribute on the <path> element.
Although I don't see a way to actually apply them.
I tried appending a marker element during the render event in highcharts and then modifying the connector element to add the attribute:
render: function() {
var marker = '<marker xmlns="http://www.w3.org/2000/svg" id="circle-marker" refX="5" refY="5" markerUnits="strokeWidth" markerWidth="4" markerHeight="3" orient="auto" viewBox="0 0 10 10">'+
'<circle cx="5" cy="5" r="3" style="stroke: none; fill: red;"/>' +
'</marker>';
if (!$('#circle-marker').length) {
$('defs').append(marker);
}
$('.highcharts-data-label-connector').attr('marker-end', 'url(#circle-marker)');
}
Also tried creating a style that would point to that marker.
The more complex part of the issue is I want to make them dynamic (grab the color from the current point).
I might need to get my hands dirtier on SVG (I practically don't know a thing), but also think there is something I am missing from the Highcharts API.
EDIT: This is all done inside an AngularJS directive.
You can use Highcharts svg wrapper to create markers and attach them correctly on load event. The issue with the marker is - if you want them to have the same color as the connector,you need to create a separate marker for each - in SVG 1.1 markers do not inherit the color from the objects which refers to them (markers).
load: function () {
var renderer = this.renderer
this.series[0].points.forEach((point, i) => {
var marker = renderer.createElement('marker').add(renderer.defs).attr({
markerWidth: 10,
markerHeight: 10,
refX: 5,
refY: 5,
orient: 'auto',
id: `connector-marker-${i}`
})
renderer.circle(5, 5, 5).add(marker).attr({
fill: point.color
})
point.connector.attr({
'marker-start': `url(#connector-marker-${i})`
})
})
}
example: http://jsfiddle.net/39xvhwqo/
I'm using reveal.js (http://lab.hakim.se/reveal-js/) together with Highcharts JS but i have problems with tooltips position. For example, if i use a line with the months on the x axis, when i put the mouse over the point in january the tooltip its ok, but when i put the mouse over december the tooltip shows me the october data. The tooltip for each month is displaced more and more.
You can see http://lideria.net/presentacion/index1.php to see the problem
This may be problem with Highcharts which us already reported here. Also there is suggested workaround: http://jsfiddle.net/highcharts/BD3R7/
reveal.js autoscales the viewport with a css zoom tag. If you inspect class="slides" div, you'll see something like this:
<div class="slides" style="width: 960px; height: 700px; zoom: 0.8331428571428572;">
Here the content (the chart) is scaled 80% of normal size and Highcharts loses it's ability to calculate positions properly if the chart is scaled outside of its control.
With that knowledge, a quick stack overflow search talks about the ability to force 'reveal.js` to not auto-scale content.
You must overwrite the normalize of the H.Pointer.prototype (referenced WRAPPING UP A PLUGIN). Add the following code to document.ready function (maybe somewhere else works, I guess). The reasons are:
reveal.js has separate ways when zoom>1 and zoom<1, e.g., zoom:1.25 and transform:scale(0.75).
So, when a section has several charts and zoom>1, must adjust e.chartX by e.pageX.
(function (H) {
H.wrap(H.Pointer.prototype, 'normalize', function (proceed, e) {
var e = proceed.call(this,e);
var zoom = Reveal.getScale();
if(zoom>1) {
var positionX = e.pageX - e.chartX;
var positionY = e.pageY - e.chartY;
e.chartX = Math.round((e.pageX - positionX*zoom)/zoom);
e.chartY = Math.round((e.pageY - positionY*zoom)/zoom);
} else {
e.chartX = Math.round(e.chartX/zoom);
e.chartY = Math.round(e.chartY/zoom);
}
return e;
});
}(Highcharts));
I'm using DotNet.HighCharts and am very pleased with what it enables me to do so far. However, I cannot get it to position labels on the inside of a donut / pie chart. It appears that the distance attribute is not available for the DataLabels. Does anyone have a workround?
Alternatively, does anone know how to write text onto the top of a chart at a specific position (relative to the container of course)?
It's possible to use Distance property in the DataLabels:
DataLabels = new PlotOptionsPieDataLabels
{
Formatter = "function() { return this.y > 5 ? this.point.name : null; }",
Color = Color.White,
Distance = -30
}
Also you can see how is used in the sample project. Download from here: http://dotnethighcharts.codeplex.com/releases