Is this possible to set the legend navigation layout as vertical?
Something like this: https://d.pr/i/8wZySL
I also need to change the position (top/left) of the navigation - is this possible?
There is no such possibility in Highcharts by default. Your suggestion has already been added on Highcharts uservoice: https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api/suggestions/3356449-horizontal-legend-paging
As an alternative, you can modify default legend behavior by overwriting prototype methods:
H.Legend.prototype.handleOverflow = function(legendHeight) {
// Here you can overwrite method
}
Experimental example: http://jsfiddle.net/BlackLabel/2zo9hg4f/
Related
In my Angular 2 environment, the OpenLaysers and Highcharts components are not rescaling themself after I change the Bootstrap layout. If I click on my button that changes the Bootstrap grid classes, the components should rerender. I tried rerendering the charts through highcharts.redraw() function - that does not fix the problem. As visible in the video, if I press 'F12' and go into 'Developer Tools' (showing as a black box at the bottom - 0:08), the components redraw. Therefore I tried workarounds like giving the body a zoom of 2.0000.1, new zIndex, different height, display 'none' - 'block'. Nothing works.
In Highcharts you should use chart.reflow() not chart.redraw(). Alternatively, you can use chart.setSize(newWidth, newHeight).
Is there a way to modify a Vaadin chart by moving a bar or a point from the chart itself? i.e. I have a bar chart with a certain value in one of the bars, I want to get a new value by dragging that bar to that new value.
There is something similar in this example, that is why I wonder if it is possible to extend this option to something like what I need.
Thanks!!!!
I assume that vaadin uses Highcharts if this is the case, maybe you can use plugins, if so I recommend:
http://www.highcharts.com/plugin-registry/single/3/Draggable%20Points
Source code in case you had to rewrite it:
https://rawgit.com/highslide-software/draggable-points/master/draggable-points.js
Regards.
I have recently started using Vaadin. I am stuck at one point. I can disable the scrollers. But the bars are visible when I resize the grid how can I hide the bars? You can see view attached image to get the issue.
In order to hide the scrollbar, you need to override some CSS. Steps to overriding CSS are:
Set your theme in the application
setTheme("yourThemeName")
Then in your Table you can use your own style
table.addStyleName("yourStyleName")
Now you have to define your own CSS style in
VAADIN/themes/yourThemeName/styles.css
#import "../reindeer/styles.css";
.v-table-mymodel .v-scrollable {
overflow: hidden;
}
Once you've done this, clear your browser's cache and refresh your page. You should not see your scroll bar.
My chart is composed of multiple chart series. I have created a custom legend with buttons so the user can press a button and show or hide a chart series as desired. I have implemented a solution where the number of series are redefined after each button press but this requires a call to reloadData which is an expensive operation.
How do I hide a chart series without calling reloadData? I am looking for a solution that only requires the chart to be redrawn using redrawChart.
SChartSeries objects (from which all series types inherit) have a hidden property. You can set this property to NO or YES to show or hide the series. You must call redrawChart after changing the value.
For example, the following method toggles the visibility of the first series in a chart:
- (IBAction)handleTogglePressed:(id)sender {
SChartSeries *series = _chart.series[0];
series.hidden = !series.hidden;
[_chart redrawChart];
}
Does anyone know the setting in highcharts (I've looked through the API but I can't seem to find it - maybe looking in the wrong place?) where I can disable the chart's ability to resize when I click on a legend item?
http://api.highcharts.com/highcharts#legend
If there are two lines on the graph, and toggle off one of them on the legend, the graph resizes to show the one line full sized. I want to prevent this functionality.
There actually is a simple solution to this provided for by the API:
chart: {
ignoreHiddenSeries: false
}
I'm pretty sure this is the behavior you desire.