I've upgraded from highcharts 3.0.5 to 3.0.7 and with that change came the dataLabels overflow:justify property that is set to justify the dataLabels (see this fiddle for an example). This will just slide labels that fall outside of the chart into the bar, but the color doesn't change and there doesn't appear to be an option to change the color. Is there A) any way to force the label to appear beside the bar and readjust the size of the bars, or B) any way to change the color when overflow: justify kicks into play?
The only "fix" that immediately comes to mind is to provide some maxPadding, but that feels a bit hacky.
instead you can use the property
overflow: 'none',
crop: false
here is the API reference
I hope this will help you
I ran into the same thing and came up with a solution that appears to work for my scenario.
After rendering the chart, I look through the series for dataLabels that have been right-aligned, then change them to white using jQuery.
// snipped: rendering the chart
var chart = $('#chartContainer').highcharts(),
labels = $('#chartContainer').find(".highcharts-data-labels tspan"),
indexesNeedingWhite = [];
$.each(chart.series[0].data, function (index, data) {
if (data.dataLabel.alignOptions.align === "right") {
indexesNeedingWhite.push(index);
}
});
// find the exact text label within this container
// and change the fill to white
$.each(indexesNeedingWhite, function (i, index) {
$(labels[index]).css('fill', 'white');
});
Related
Using highcharts, if you create a pie chart with styledMode: true; and you import their highcharts.css file, the hover effect on legend items causes all legend items to go opaque.
Code That Causes It
You can even see this on their demo page by selecting the Styled Mode: Pie.
And then hovering over the legends items. If you set the styledMode: false; and then remove the CSS import it goes away.
My question basically: Is this a bug? It seems like unintended behaviour.
I don't think that it is a bug - it's more like a small difference between styledMode and the regular one, which could be easily fixed by changing the opacity for it.
Demo: https://jsfiddle.net/BlackLabel/pq6omt2y/
CSS:
.highcharts-legend-point-active .highcharts-point:not(.highcharts-point-hover) {
opacity: 1
}
I am converting all the charts in an application to Highcharts 5.x styled mode.
I cannot find how to make the solidgauge stops work in styled mode. When I inspect the SVG, I do not see any class for the colors.
I couldn't find any solidgauge stops example with styled mode.
Anyone can post a working example?
In a solid gauge series color is calculated dynamically based on stop values - currently, I do not think you can do the same with only css. The point fill atribute is calculated and set correctly but in this case css class takes precedence and the point's color has a fixed fill taken from the css file (highcharts-color-{n} class).
Keep stops in options and remove class from the point (or set colorIndex to a non existing number, e.g. 99)
.highcharts-color-0 {
fill: #7cb5ec; //remove fill attribute
stroke: #7cb5ec;
}
or:
data: [{y: 80, colorIndex: 99}], // the point's class will highcharts-color-99 now
example: http://jsfiddle.net/gj8zfw73/
I have an issue with a HighCharts pie I've created. Sometimes the tooltip text overlaps with the legend, so I had to increase the legend's y property. However, this is causing parts of the legend (it's horizontal with 4 rows) to become partially hidden. I've tried adjusting the height property of the container, as well as a bunch of other properties, but the problem never goes away...
Here's how it looks like:
http://imgur.com/YOPjoXG
Any help is much appreciated.
If you are fine with pagination in legend then fix the height of the legend with maxHeight.
if the legend overflows, then pagination appears automatically.
legend: {
maxHeight: 30,
}
here is a working fiddle for pagination http://jsfiddle.net/cEcRz/
hope this is what you are looking for.
You can use pagination but in exporting add custom options to the legend like here:
http://jsfiddle.net/cEcRz/1/
exporting:{
chartOptions:{
legend:{
layout: 'horizontal'
}
}
},
Obviosuly you need to adapt other parameters like size etc.
I have a line chart with markers disabled.
The legendSymbol is currently a line. I would like to show the symbol as a square. Any pointers?
With the latest Highcharts release you can also exchange the method that draws the legend icon from outside of Highcharts:
Highcharts.seriesTypes.line.prototype.drawLegendSymbol =
Highcharts.seriesTypes.area.prototype.drawLegendSymbol;
To use the element that is drawn for the area chart as an icon for a line graph.
(I have used this in Highcharts Stockcharts but this should be applicable in basic Highcharts as well)
You can use two series (one normal and one fake) with defined custom symbol. First should be hidden in legend. Then only what you need is use legendItemClick and call action.
http://jsfiddle.net/5m9JW/339/
You can change the stroke-width attribute on the path element.
We can provide functions to Highcharts that will be drawn whenever the chart is drawn. Since redraw is not called on the first drawing the load event is needed
chart: {
events: {
load: function () {
$(".highcharts-legend-item path").attr('stroke-width', 10);
},
redraw: function () {
$(".highcharts-legend-item path").attr('stroke-width', 10);
}
}
},
I like this as it's quicker than than the other two answers and adding a "fake series" feels like a hack.
If you need further customization Hendrik's would be great! The original question asked for a square, if all that's really needed is a rectangle (or a large square) this works great.
Also Hendrik's answer didn't work for me out of the box in HighStocks, this does.
To set visibility of legends before a highstock chart is created, I can do:
new Highcharts.StockChart({
legend: {
enabled: true,
align: 'left'
}
});
After the chart is created I want to allow users to hide or move legends to a different location. I need something similar to chart.setTitle but for legends.
Please note, I read this post but didn't quite understand the suggestions in it.
Thanks for your help.
Right now something like this is not part of Highcharts, but it is planned plugin for that, check this: http://highcharts.uservoice.com/forums/55896-general/suggestions/912335-draggable-legend-box
The post that you linked to is correct, but not as complete as you may like. There is no way to set an option to turn the legend on and off and have the chart adjust the margins to the presence of the legend. However, by removing all the data series in the manner shown in the example you linked to, the chart disappears. You can then manually adjust the margin if you know ahead of time where the legend will be and how much margin it has been given.
For example, if "chart" is the name of your highcharts object :
for (var a=0; a<window[id].Chart_dataseries.length; a++)
{
chart.series[a].options.showInLegend = false;
chart.series[a].legendItem = null;
chart.legend.destroyItem(chart.series[a]);
chart.legend.render();
}
You can then make the chart "reappear" by re-rendering the items.
for (var a=0; a<window[id].Chart_dataseries.length; a++)
{
chart.series[a].options.showInLegend = true;
chart.series[a].legend.renderItem(chart.series[a]);
chart.legend.render();
}
I make this happen by linking the actions to a checkbox and when it is checked, the chart "reappears" and when it is unselected, the chart "disappears." I tried doing this with the following additional commands :
chart.options.legend.enabled=false; (or true)
chart.render();
This did indeed adjust the chart to fill the space taken by the legend when the legend was removed. However, it also left the box around the legend. I also allow my users to manually adjust the margin, so for me a valid option was letting the user "turn off" the legend and then manually adjust the margin.