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'
});
});
Related
I have some pie charts on my site and they show quite a bit of data. I was wondering if there is a way to load the data, but initially hide any data that is less than some arbitrary value. When I say hide, I mean in the same way you can hide the certain data by clicking on the label in the legend. Then through the legend, have the user be able to show this data on the graph by clicking on the label in the legend. Is there a property or something I can use to accomplish this?
You can define any variable as maxValue, then iterate on each point and call setVisible as false.
var minValue = 10
$.each(chart.series[0].data, function(i, point){
if(point.y < minValue) {
point.setVisible(false);
}
});
Example: http://jsfiddle.net/ct2jejgv/
Simply use this.chart.series[i].hide() / .show(). In your script, manually search for series less than your value and hide them like above. Its a simple foreach.
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/
I am using highcharts library to draw chart and I need to display Weekdays as labels on x-axis and also to auto reset it like from Monday to M if all weekdays can't fit on screen.
It should be dynamic, which means no flickering should appear when changing label text on x-axis.
Any suggestions?
Thanks in advance.
There is no straight option for that, rather simple workaround:
Disable reflow from Highcharts, use window.resize browser event
In that event add condition to decide showing full name of just shortened, and set this for chart - chart.xAxis[0].dateTimeLabelFormats should be fine
After setting new format, apply new chart dimensions using chart.setSize(w, h)
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
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().