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
Related
We have a request from customer and we need to trick the highcharts bar view.
The problem is our series contain timestamp vs value but business wise this value is corresponding to previous timestamp to that value's timestamp. So we would like to show the bars in between of these timestamps.
So is there an easy way to do this in highcharts w/o playing with the points in the series.
See images below;
Current Highchart Behaviour
Requested Chart Behaviour
You can use xAxis.tickPositioner in order to move ticks and xAxis.labels.formatter to change labels values.
Live example: https://jsfiddle.net/h9zjmqap/
Output:
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 have a situation where I need to remove all margins from a highchart and remove the x/y axis so it fills a series of columns in a table completely.
I did that, no problem. Chart goes to the extremes as needed.
What I need now is that pesky yaxis I already removed...but displayed in a table cell outside of the existing highcharts object.
It would seem easy, as though I could just set the overflow property of yaxis to 'visible' and play with the offset...which would work however this would only work if I wanted to re-position the axis within the boundaries of the highchart object. I want him in a different cell entirely.
Is there anyone who has had experience in this situation? Is it going to require me to have a secondary highchart with only a y-axis?
Best answer gets a green check.
EDIT :: I now have dispersed each 'day' into their own column (more bars coming per day [scheduled,actual,etc...]). In order to keep the scales lined up, I manipulate the yAxis:max property and set them all to a derived value.
In the open column (currently w/ text Hourly Trends) is where I would put an additional highchart module with no series data but with the same min/max/tickInterval.
The next big leap will be to see the data is alive and changes w/ schedule. May have to start another thread for that one, no?
Create a new HC object with no data but only the yAxis (making sure it is the right scale, etc). Perhaps add the same series of data to it but hide the series? Add it to the location you want. This seems kludge and not very good practice. Each business use is different but why would you want this?
EDIT based on comment of business rules:
Why not come at this from a different direction and have the individual chart elements (the bars/points/etc) be a single point chart. This way you have one chart per column. You can then set up the yAxis to be text and not worry about the position. If we could see an example of the page layout and the desired result that would help.
I am new to highcharts and trying to show the chart and data at the same time.
Like the whole display should be like this.
First column : Station Name(data)
Second column : horizontal bar
Third column : Data.
Is it possible to paint it only using highcharts API's ?
Thanks
Sukanta
You are basically talking about a regular bar chart with a categorical axis and data labels:
http://jsfiddle.net/JVNjs/288/
categories:['group a','group b','group c','group d','group e']
I don't think that there is a default setting that will align the data labels all to the right in a column as you requested, but I am sure there is a workaround that will allow it to be done.
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().