How to invert a chart in Highcharts through code? - javascript

I am trying to invert a chart through code in Highcharts.
I am setting the chart inverted property:
chart.inverted = true;
chart.redraw();
You can see the code I am using here:
http://jsfiddle.net/Wajood/Hz4bH/
This doesn't invert the chart. It seems to me that the redraw() function doesn't seem to care for the inverted property.
Any help/suggestions/tips in the matter will be appreciated.
Thanks.

Calling redraw() will only redraw data changes. Browsing the methods in the Highcharts API there does not appear to be a method which will change the inverted setting of an existing chart.
Your only option in this case is to destroy the existing chart and create a new one with the relevant chart.inverted setting.

I faced a similar problem and was able to solve it using chart.update.
chart.update({chart: {inverted: true}});
chart.redraw();
http://api.highcharts.com/highcharts/Chart.update

Related

Highcharts Gantt - how to use a different shape for the milestone markers?

Is there a way to use a different shape for the milestone markers in Highcharts Gantt? I'd like to use triangles instead of the default diamonds.
If a solution for this involves using the API to change something in the chart after the chart is loaded and telling it to redraw (instead of doing something with the configuration options), I'm fine with that.
As you can see in the Highcharts Gantt source code: https://github.com/highcharts/highcharts/blob/47dfb49f7b6053178c92d24b34b5f3e7ddd8770b/ts/Series/Gantt/GanttSeries.ts#L202
shape for milestone can not be set through API options.
The simplest solution is to replace diamond function with the built in triangle function.
(function(H) {
H.Renderer.prototype.symbols.diamond = H.Renderer.prototype.symbols.triangle
})(Highcharts);
Live demo: https://jsfiddle.net/BlackLabel/9zuodLjt/
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

.renderTitle(false) is not working on linechart DC.js

I have some DC.js charts, I added a tooltip with d3-tip, so I needed to disable .title, use .renderTitle (false) and works well with bar charts and a GeoJson map, but when I use it in Linechart does not work. Is it a DC.js or d3-tip bug?
It works, but you have to call it before the chart is rendered, because it will not affect an existing chart. (And redraw won't remove any existing titles.)
Here is a fiddle demo, based on the Line Chart Example. The important part is calling
chart.renderTitle(false);
before
chart.render();
http://jsfiddle.net/1rafgm40/2/

Removing X-Labels of barChart in DC.js

I have a bar chart that created in dc.js and hosted in jsfiddle. i want to remove x labels of this chart . after searching i find this SF question. but even i set
.xAxis().ticks(0)
it doesn't work and i can see the label.so how can i remove the xAxis labels.
Use the .tickValues() function instead, passing an empty array:
.xAxis().tickValues([]);
Complete demo here.

d3.js - blank object when applying y-axis scale

I'm trying to apply a scale to y-axis in my chart, but when I do it I get a blank svg object.
I did the same thing with the x-axis and it's working fine.
Problem happens when you uncomment this section
// .y(function(d) {
// return yScale(d[1])
// })
http://jsfiddle.net/MgwR5/1/
Could anyone tell me what I'm doing wrong?
The area functions are y0() and y1(), not y(). Ref: D3 API documentation
Have a look at the js bin. I've put a bunch of comments in that should help and I've assumed that you wanted a line chart.
If you want to put axis's on your chart you should be looking to use the d3.svg.axis function. It does most of the heavy lifting for you. You also need to make space for the axis try using some padding and margins (you might want to look at this example or the example on the js bin d3 page - use the link at the top of the google groups d3 page). You also probably want to separate out your axis's and your plot by using svg's group ('g').
Cheers

Highcharts problems: variable legend height

I have to set the height & width of the Highcharts placeholder. But the data to be displayed is variable. When the series names(long name) come to much more. The lengend height grows too high and hide the chart.
How could I solve this problem? Hoping to get some help.
I faced the same issue as you have mentioned. I was setting chart height and marginBottom property for the chart. I removed the marginBotton property and its working fine. AS your legend grows, the chart canvas area gets adjusted by itself and the legend does not overlap with the plot area
After your chart loads.. put this in your code..
$('.highcharts-legend').attr('transform', 'translate(50,400)')
But It will still move if you resize the browser...
Ill let you know if I figure it out..
As you can see here the release 2.2.4 introduces legend paging.
You can custom it following the reference.
As you add your series to the chart just stop adding them to the legend after a certain point (eg after 5) with the following option:
showInLegend: false
docs: http://www.highcharts.com/ref/#plotOptions-series
demo: http://jsfiddle.net/7Mmee/14/
see this jfiddle link.this is fiddle and highchart links
http://jsfiddle.net/highcharts/B9L2b/
I think this will solve your problem.

Categories