I am adding the series to the chart like this
const series = this.chartInstance
.addPointSeries({ pointShape: shapes[shapeIndex], dataPattern: lsjs.DataPatterns.horizontalProgressive })
.setPointFillStyle((solidFill) => solidFill.setColor(lsjs.ColorHEX(palette.simpleSet[seriesColorIndex])))
.setName(groupTag.slice(0, groupTag.indexOf('(')));
I have grid that displays the series name and symbol.
On selecting the row from grid I want to hide the series with particular symbol(example circle) from chart.
Can you please suggest a solution to achieve this on row selection(show series) and deselection(hide series) ?
In our Simple Scatter Interactive Example we show how this can be achieved. You can view and edit the code by clicking on the Edit this Example-button.
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.
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 trying to update a series of chart. I have found some methods in chartOption but when I change (for example the width) the chart doesn't update.
Is it possible to update the series and if it is how I can do it?
After changing the chart options, you need to call redraw().
For example:
var chart = $("#chart").data("kendoChart");
chart.options.series[0].width = 4;
chart.redraw();
DEMO
In the demo, click the button to change the first series' width.
The goal is to create a pie chart, where
the percentages (calculated or manually specified) are shown inside the pie.
data is shown upon mousehover.
Clarification: e.g. imagine a set consisting of 2 data labels. One is called apples (containing "15" apples), and the other one is called pears (containing "15" pears), then the percentages, always visible, shown inside the pie would be "50%" and "50%", whereas the data shown on mousehover would be "15" and "15".
Such has been already done in a previous post: Displaying percentage inside pie item for highcharts with JSFiddle 1.
However, would it be possible to
use a semi-circle donut pie chart, instead of a circle pie chart. (what is a semi-circle donut pie chart? -> JSFiddle 2)?
have text labels (data names) on the chart inside the pie chart, such as in Fiddle 2.
*Clarification: e.g. having the data labels "apples" and "pears" on the pie by default, such as "Firefox" and "Chrome" in Fiddle 2.*
Any help would be greatly appreciated, as I find it hard to combine these Fiddles, since I am far underexperienced with JS.
E.g. Fiddle 1 works/starts with $(function () {
var chart = new Highcharts.Chart({,
whereas Fiddle 2 starts with $(function () {
$('#container').highcharts({.
The Highcharts API Reference manual is learning me slowly, as a beginner.
Since I'm not sure which you prefer here is a fiddle you can look at that leverage the highcharts formatter attribute:
formatter: function() {
return Math.round(this.percentage*100)/100 + ' %';
}
I believe what you want is something like this.
How can i hide/show a praticular column in the Column Chart of Highcharts api.
i have a single series. The column to be hidden lies on the xaxis.
For sine Chart, chart.series[4].hide() /show() works fine
and for Pie Chart, chart.series[0].data[0].setVisible(false);
works fine. But i am not able to figure out the solution for Column Chart. Please Help!
You can use Element.hide() and Element.show(), so for example:
var chart = $("#container").highcharts();
chart.series[0].data[0].graphic.hide();
chart.series[0].data[0].dataLabel.hide();