I would like to know whether there is any interactivity in the chart legend of the Shield UI Charts? For instance can data series be hidden by using the legend? Are there any special properties to be set?
Yes. The chart legend items can be used to hide/show data series on the chart. However it is worth noticing, that if a series is not added to the legend it obviously cannot be hidden/shown from its list of items.
The legend's interactivity is also enhanced by the ability to additionally format its active/inactive elements:
legendItemSettings: {
disabledStyle: {
color: 'red'
}
}
Related
I'm trying to hide a certain series by clicking on the legend item and/or using the hide() method. The series gets hidden, but the category is still visible on the xAxis. In some other solutions for other charts, like this column chart solution, breaks were suggested, but that doesn't work on the boxplot chart. Only the leftmost and rightmost categories get hidden. Here's a jsfiddle of the boxplot that's not working:
https://jsfiddle.net/mjan7y48/
In the same application I have a column chart that hides its category immediately without any trouble. Any idea how to solve this issue?
You need to disable grouping for this solution to work:
plotOptions: {
series: {
grouping: false,
...
},
}
Live demo: http://jsfiddle.net/BlackLabel/w6nhvge7/
API Reference: https://api.highcharts.com/highcharts/series.boxplot.grouping
Importing Highstock solved the issue.
I have a requirement where I need to change series array completely in the chart,
I have 2 legends in my chart, I wish to load a chart with one disabled legend, that's working fine,
now when the user clicks on the disabled legend corresponding data should be added automatically to the chart,
I tried same with chart.series.addSeries(), but that is giving different issues, as the new data which is to be added is not only after the first legend but it's in between those legends
chart
For eg: chart loads, with just grey legends, orange is hidden or is not added at all, on clicking on the orange colour legend I want to add this data to that chart, Please check the chart in the image
is there any way to replace series array completely.
Something like
chart.update({
series:newSeriesArray
});
I am using the bar chart from highchart.
Thanks in advance.
I have 2 legends in my chart
Do you have a separate legend for each series or do you mean legend item for each series?
Highcharts provide a possibility to set data to particular series - series.setData() method. So when a chart is initialized you can create empty series (series with name, color etc but without data array) with property visible: false, then your series will be hidden and legend item disabled:
{
name: 'Year 2016',
data: [],
visible: false
}
When user clicks legend item plotOptions.series.events.legendItemClick function will be invoked (if defined). In this function, you can set data to this particular series using series.setData() as mentioned above:
plotOptions: {
bar: {
events: {
legendItemClick: function() {
if (!this.data.length) {
this.setData([665, 234, 2344, 123, 23])
}
}
}
}
}
Demo:
https://jsfiddle.net/wchmiel/uLfcknsb/
Currently, it is observed that all series data labels when shown, overlap or only the show/hide behaviour of data labels can be achieved through the formatter function. Its observed that connectors for series data labels of leaf level nodes or the position of series data labels outside are not configurable.
Refer the following JS Fiddle:
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/sunburst
dataLabels: {
format: '{point.name}',
filter: {
property: 'innerArcLength',
operator: '>',
value: 16
}
}
Refer the Sunburst chart's series data labels on the following link:-
http://www.dundas.com/support/blog/sunburst-charts-homerun-or-groundout
Expected behaviour is to configure the series data labels in such a way that if the arc size of a node is less than a particular value, instead of hiding the data label, show it outside the leaf level nodes of the chart, also adjust the distance of data labels and its connectors from the chart.
I would like to show series data labels similar to the Sunburst chart shown in above link.
Is there any way to achieve this in Highcharts Sunburst chart?
Currently sunburst doesn't support data labels with connectors.
Share the idea of adding them to Highcharts here if you like: https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api
You can create your own connectors functionality using SVGRenderer (first check whether the label appeared or not and draw a connector if needed) or you can try to adjust the functionality implemented for pie series to your case (overwriting sunburst core functions).
API reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
Code reference: https://github.com/highcharts/highcharts/blob/master/js/parts/PieSeries.js
Docs reference: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
I'm using MetricsGraphics.js to plot a simple time series. I'm having trouble linking a "line" chart with a "point" chart using the linked: true option. The linking works when both charts are of the same type, but not when they're different.
The following jsfiddles show this. In the first, when you hover over data points in one chart, the points in both charts are highlighted. In the second, hovering over data points in one chart doesn't affect the other.
Both charts have chart_type: 'line': jsfiddle.net/7jc1h8vv
One chart has chart_type: 'point', the other chart_type: 'line': jsfiddle.net/7jc1h8vv/1
Question: How can I link a "point" chart and a "line" chart together? Alternatively, if that can't be done, then how can I create data symbols for each data point on the line in a 'line' chart, such that the two charts are effectively superimposed?
The MetricsGraphics.js library provides an option linked: true that will do the following, according to the doc:
Links together all other graphs whose linked option is set to true. When one graphic in that set is rolled over, the corresponding values in the other graphics are also rolled over.
See this example from the doc of two charts linked together.
I have an ASP.NET web forms application which uses DevExpress's bar chart controls. In the below side-by-side bar chart:
I needed to show some extra information apart from traditional x and y argument-values using series point's {HINT} pattern (Hospital Admissions: 130, (65%)) - as per the image.
Now, I need to show it in the bar itself. Like the control shows by-default for Stacked bar charts:
How do I push the Tool tip hint data to be shown inside the data bars?
Any suggestions, kind folks?
It is possible to access the current data row directly when handling the CustomDrawSeriesPoint event. Cast the e.SeriesPoint.
Tag property to the corresponding type (e.g., DataRowView). This should make it possible to update the SeriesPoint label text.
You can find a small sample project that illustrates this approach in the Chart Series Label from a dataset column that is not part of the series ticket.