I am following the code example of this jsFiddle in order to draw an additional table into the Highcharts SVG, so that it can be exported into an image when the chart is exported.
I am able to draw the table I want, but when I export, my extra table is not part of the image, it just shows the chart as if I had not done any of the extra drawing.
This is important to note, I think, because as in the example jsFiddle, I leave the legend in its default state (horizontal, centered), with a negative y value in order to trick Highcharts into extending the SVG area below the chart to leave room for the table. But then, as part of the process where I draw my table, I move the individual legend elements by changing their tranform: translate() values.
However, when I try to export the chart to an image, in the image the legend is back to being horizontal and centered below the chart, which indicates to me that Highcharts in not actually reading the "live" SVG information, but instead rendering some sort of cached version, or something?
I am using offline exporting, is this behavior a result of that?
I am also using highcharts-react-official, and I have my imports and setup like this:
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import Exporting from 'highcharts/modules/exporting';
import OfflineExporting from 'highcharts/modules/offline-exporting';
Exporting(Highcharts);
OfflineExporting(Highcharts);
export default class MyChart extends Component {
// etc
}
Is this behavior something to do with using highcharts-react-official?
As suggested in the comments, I tried using marginBottom instead of a negative Y value for the legend in order to make space for the table at the bottom of the SVG, but that did not change anything, the table was still not exported.
Here's how my component is set up. I tried to include all the different stages it goes through as it receives and processes the data before actually putting it into the chart:
https://codesandbox.io/s/w7m53k6p37
Related
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 designed a treemap using highcharts with custom algorithm.It has a drilldown to 1 level. There is a drop down for my chart and it has two options for selection. treemap is displayed on the basis of dropdown selection which has a group by feature implemented using underscore.js library. The feature is working fine. But the problem is, all the tiles which are grouped together, are placed next to each other. My requirement is : i want all those tiles to be packed in one big tile with one label. something like header title in D3(exactly the same). Please let me know how to go about it. Is it something like treemap within a treemap? Also i wanted to know if its feasible to have different labels and tooltips for parent and children in the same treemap. any leads would be helpful.
actual image
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'm looking for a free iOS component that allows me to draw a doughnut chart with text in the center. So far I've only used Code Plot, but that is a full pie chart.
I'm attaching an example of the requirement.
Any help will be much appreciated.
I suggest searching on cocoacontrols.com. They have lots of open source controls for iOS and Mac. I didn't se any specifically called "doughnut chart" but some of the pie charts controls might offer that option.
In fact, it seems that this one does include what you're calling a doughnut chart. It doesn't look like it has built-in support for a label in the middle, but it does create a ring-shaped chart like you want.
You could also always create a pie chart and then put a view on top of it that is transparent except for a white circle in the middle, and then put a label on top of that.
Getting a little more complex you could modify the CorePlot control and add a filled CAShapeLayer to it.
Another option is to create svg chart and use UIWebView to display it. With svg chart, you get much more flexibility with libraries like highcharts and d3js. Here's an example with donut chart:
http://vida.io/documents/Byh8tTakzB59oGa9f
You can embed the link or save svg and display in UIWebView. Saving svg works offline.
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.