Highcharts colorAxis - Hide or add dynamically - highcharts

I have a system set up where the user adds a chart and then selects the type they want. If I add the chart with the colorAxis in place, how do I hide it or remove it for those charts where I don't need it?
If I create the chart without the colorAxis, what is the proper way to add the colorAxis? I tried using the addAxis just like you would for any other axis, but there are problems. The remove function removed the colorAxis from the chart object, but not from the chart. It also resulted in an error.

You can destroy colorAxis by remove legend.
chart.legend.destroy();
Example: http://jsfiddle.net/h0rkf05t/

Related

Is there a way to define custom legend in highchart

I am creating a chart which internally is built using multiple highcharts.I want to create a custom legend for whole chart. Is there a way to show custom legend. Is yes then can someone point me to some example.

Highcharts - Updating a chart's option after initial render

Is it possible to update a chart's option (marginRight for example) and call redraw() to have that new value reflected in the chart? Or does a new instance of the chart need to be created for these types of changes?
I think it may be the latter because it sounds like only data or axis values can be altered after the chart is created. I see the documentation for redraw states:
Redraw the chart after changes have been done to the data or axis extremes
And the new dynamic feature in 3.0 states:
Through a full API you can add, remove and modify series and points or modify axes at any time after chart creation.
Thank you in advance.
Update
My reason for wanting to do this was I had a vertical layout and right-aligned legend that was overlapping my chart. I just realized Highcharts automatically sets the correct marginRight to accommodate for this if one isn't explicitly specified.
Unfortunately you cannot modify margin parameter dynamically, so you need to destroy old chart and create new instance.
This feature is one of our target in the nearest future.
Say you got a chart initialized like this:
chart = new Highcharts.Chart({
...
You can change trivial attributes, like its title, like this:
chart.setTitle({text: "New title"});
And you can refresh the dataset it's using with a new one, like this:
chart.series[0].setData(newChartData, true);
Where newChartData will contain the array with new data you wish to display

Change plotBand label after creation [highcharts]

I have a chart where the plotBands resize, and the labels have to change. However I cannot figure out how to change the labels after the chart is created.
I have tried:
changing the chart.axis[0].options.plotBands[0].label.text, marking the axis as isDirty and redrawing the chart
using an HTML label and changing the value via jQuery
Do I have to use a label formatter function or is there something in the API I missed?
I wanted to change the "to/from" values of the plotbands and found no attr method, this worked though:
this.chart.yAxis[0].plotLinesAndBands[4].options.from = this.min;
You can use attr() function which allows to update graph elements like plotBand label. Example:
http://jsfiddle.net/eaFdr/1/
$('#btn').click(function(){
chart.xAxis[0].plotLinesAndBands[0].label.attr({
text:'aaaa'
});
});

Turn series and plot bands on/off using API

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().

Changing the contents of Highcharts legend

When using Highcharts, is it possible to change the contents of the legend to display something other than the series?
For example, I have a scatter chart with just one series but with many elements, so that the element labels obstruct one another and are illegible:
Would it be possible to use the legend to display the element names instead of the series? (each member in the series has a different color so that it is possible to use the legend in this case)
EDIT:
It turns out there isn't any good way to do this, so I wrote my own custom legend. You can find the code here: http://pastie.org/5115536
I hope you find it useful
Highcharts allows to show data points instead of series name in the in the legend. But, Unfortunately its only for Pie charts type:pie.
There is a default option available for the Pie Chart though undocumented in the API.
legendType: 'point',
If you try to set it for other type of chart, Legend does not gets rendered.

Resources