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.
Related
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');
});
I want to display the Highcharts ECG Graph with Position next and previous buttons on far right and left side of the chart so that user could move previous and next graph. I need to move previous and next graph by using > < image on far right and left. Please help
You can add two buttons and use css styles for positions them. You need to catch click event and use setExtremes which allows to define range in xAxis.
http://api.highcharts.com/highcharts#Axis.setExtremes()
EDIT:
http://jsfiddle.net/Q8BHZ/
$('#button').click(function() {
var chart = $('#container').highcharts();
chart.xAxis[0].setExtremes(0, 5);
});
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.
As you can see from the attached image, my x-axis categories are getting bunched together in the middle. How can I configure highcharts to take up more of the x-axis? Note: The chart size is dynamic, it grows and shrinks based on the overall browser size and split-panels within the app. So explicit computation of the point-width is not an option (I expect highcharts to do the work for me).
Note: The picture is vertically cropped.
The chart options I'm using are:
highchart.setAnimation(false);
Legend legend = new Legend();
legend.setEnabled(false);
highchart.setLegend(legend);
highchart.getXAxis().setCategories(result.getAxisXCategories().toArray(new String[] {}));
highchart.setType(Series.Type.COLUMN);
ColumnPlotOptions options = new ColumnPlotOptions();
options.setStacking(Stacking.NORMAL);
options.setGroupPadding(0);
options.setAnimation(true);
highchart.setColumnPlotOptions(options);
In other words, legend is turned off and column plot options is set to zero group-padding.
UPDATE: Here is a JSFiddle showing the same issue
For others who run into the same issue, the solution is to set the pointRange option of the ColumnPlotOptions. In JSON this looks like:
"plotOptions": {
"column": {
"stacking": "normal",
pointRange: 1,
"groupPadding": 0
}
}
In GWT-Highcharts, you don't actually have a specific API for pointRange. Therefore set a generic option like this:
ColumnPlotOptions options = new ColumnPlotOptions();
options.setOption("pointRange", 1.0);
...
You can try to set pointWidth() http://api.highcharts.com/highcharts#plotOptions.column.pointWidth
I have a chart that has a custom legend i.e. it isn't part of Highcharts at all, it's completely my own code, the Highcharts legend is disabled for this chart.
Is it possible to turn series data AND plot bands on/off in a Highcharts chart using the API?
I found an example that triggered the click event of a legend item to do this, but this obviously relies on a legend being present, so this is no use to me: http://birdchan.com/home/2013/01/23/trigger-a-click-event-on-a-legend-item-in-highchart/
I also tried to set the series data .visible property to false and then redraw the chart and although it sets the visible property just fine, it doesn't redraw the chart so nothing changes:
var chart = new Highcharts.Chart(myoptions);
$("#custom_legend_link").click(function (e) {
chart.series[0].visible = !chart.series[0].visible;
chart.redraw();
}
Here is a jsFiddle using the basic line demo showing my problem:
http://jsfiddle.net/gfyans/zsaV4/
Thanks,
Greg.
To toggle the series, use Series.setVisible(). When called without parameters, it toggles.
Plot bands are a bit different, since they don't have methods like hide(), show() or setVisible. To toggle a plot band, you need to remove it by Axis.removePlotBand() and add a new one with the same options by Axis.addPlotBand().