Highchart Absolute Percentage Stacked Area - javascript

I have 10 series in one chart and using the Percentage Stacked Area chart type in Highchart, I can get the percentage distribution for each series.
However, when I deselect one series from the legend, it recalculate the percentage by only the active series. How do I tell Highchart to use the original total series instead of the active ones only?

You can set chart.ignoreHiddenSeries to false, see: http://jsfiddle.net/quthyjta/
API: http://api.highcharts.com/highcharts#chart.ignoreHiddenSeries

Related

How to disable auto hiding of labels on Category Axis in Amchar 4?

In amCharts 4 column chart, labels on category axis are alternately hidden when user reduces the browser width.
By default the chart automatically hides labels to improve readability. I want to disable it.
Please refer ruining ex. codepen.io/Mishra-Praveen/pen/MWwmVbp
I am getting solution for Amchart 3 not for Amchart4.
categoryAxis.renderer.minGridDistance = 30;
Increasing these numbers will mean likely sparser grid lines and related labels. Decreasing will probably result in denser grid/labels.

Highcharts: How to combine Column Range and Line Chart?

I basically want to just combine these two charts:
1) Column range: https://www.highcharts.com/demo/columnrange
2) Basic line: https://www.highcharts.com/demo/line-basic
Is this possible, considering that the first chart has a categorical Y-Axis?
I don't need to use categories, I only want the Y-Axis of the line chart. And the lines would be overlaid on top of the horizontal bars.
So both charts would be using the X-Axis time series, but only the line chart would be using the Y-Axis numbers.
You can link both charts into one but you need to remember, that the columnrange chart is inverted and if you want to display line chart exactly like in this example (https://www.highcharts.com/demo/line-basic), you need to swap x values with y values of line series and both axis should have the same scale.
API Reference:
http://api.highcharts.com/highcharts/chart.inverted
Examples:
http://jsfiddle.net/jmmsyv9w/ - not inverted
http://jsfiddle.net/8unrzm1j/ - inverted

Dates are overlapped in Highchart's areachart

I am using Highcharts area graph.
The type of the chart is "datetime".
The X-Axis labels get well adjusted as long as
Either the width of the chart container div is less than 900px
Or the width is not specified for the div
When I set the width of the container of the div more than 900px, either the labels are appended with the dots or get overlapped.
How it can be resolved. Thanks in advance for any suggestion or help.
You can add the tickInterval option to the x-Axis. This option determines the distance between the individual ticks. For example setting it to
tickInterval: 24*3600*1000
which resembles on day in milliseconds yields no overlapping labels for your chart:
https://jsfiddle.net/doc_snyder/mwzd1rc8/1/
You can also use a new option provided below by highcharts if you are comfortable with showing the labels in 2 or more lines and if you do not want rotated labels.
staggerLines: 2
https://jsfiddle.net/bhavinpatel/153eh40z/

Google Charts Horizontal BarChart calculate percentage

Is there a way to make the google BarChart to work like the PieChart?
The google´s PieChart sums all values you provided and give percentages. The BarChart does not do that when you work with horizontal columns, the length of the columns and the graph itself are based only on the values you provided and it does not label the horizontal axis with the percentage.
Even though I format it with 'percentage' it only adds the % simbol to the current values.
Is there any way of doing that?
use the option isStacked:'percent'
https://jsfiddle.net/kzk07ocw/

HighCharts - how to show the lineborder in Area Charts

I have a chart with two series - area types,When series1 data is less than another series2 , then only the border line of the series1 must appear over the series2 data.
In high charts, do we have any attributes or method to show only the line border.
You have two options:
1) arrange your series so that the one that will get hidden is on top
2) set your fillColor using rgba() values so that you can set the opacity lower, or set your fillOpacity lower, so that you can see both series no matter which one is on top.
http://api.highcharts.com/highcharts#plotOptions.area.fillColor
http://api.highcharts.com/highcharts#plotOptions.area.fillOpacity

Categories