Boxplot and columns combined in a single chart with Highcharts.js - javascript

I'm trying to use Highcharts.js to create a chart made up of two types: a box plot and a column inside the same cartesian axis system.
I've got two y axes with different scales (the one for the box plot data on the left and the one for the columns on the right).
The series share the same categories on the x-axes.
Can I combine this two rapresentations in the same chart? The results should be something like this: Boxplot combined with Columns example.


You could use both series types without any problems. To set each point of boxplot series on left side of each column you could use pointPadding and pointGroupping for columns and pointPlacement for boxplot.
Example: http://jsfiddle.net/zyy2g6xs/

Related

Antd Charts - Area chart series values plot relative to last series

I'm trying to use Ant Design charts to plot an area chart with 3 series - actual, target and forecast. For some reason, the chart plots the series relative to the last item in the array, rather than relative to the x axis. I tried setting the startOnZero: true but that didn't help.
See below example:
In this example, the target is 220 and the actual is 1558, but the target point is higher on the y axis. Recreated:
https://codesandbox.io/s/beautiful-grothendieck-qtjj7?file=/App.tsx:8366-8384
If we put the 'Target' values to the bottom of the data array, it works fine for some reason:

By default it creates a stacked chart. You can set isStack to false.

Stacked highcharts on the same graph, with a new y axis each time?

I'm not sure if this is possible, but I have separate, stacked highcharts. I'd like to keep them on the same graph, but stacked on top of each other, resetting the y axis to 0 each time. Here is a Fiddle of them all separate:
I've also attached an example graph of what I am imagining. The blue horizontal lines represent each new chart series's 0 point.
Sample graph example
//random line so it will let me post the fiddle. Ignore this

You can also achieve a similar effect using different height of multiple yAxis.
Example:
http://jsfiddle.net/6b9prwjc/

You are making highchart for each series in the array seriesAll by looping through it and that is causing it to create seperate charts for each series. If you just create 1 highchart and give it the series array, it will plot all the series on the same chart. Here is a modified version of your code to give you what your looking for.
https://codepen.io/Nasir_T/pen/zdzdrW
Also please check out the docs of highcharts and it will give you all the information you need. E.g. here is the combined charts link:
https://www.highcharts.com/docs/chart-and-series-types/combining-chart-types
[Edit for stacking option]
You can also stack them on top of each other by setting the plotOption > series > stacking properties. e.g.
plotOptions: {
series: {
stacking: 'normal'
}
}
Learn more on stacking in the following doc link.
http://api.highcharts.com/highcharts/plotOptions.area.stacking
Hope this helps.

Area/Line chart not working as expected with stacking : percent and negative values

I'm trying to make a population pyramid type of chart with both bars and lines at the same time.
I also need to place a checkbox to allow the user to switch to percent values.
The problem i'm facing is that the line series are not behaving the same as the bar series when i set stacking:percent
The values of the two line series are copied with just a minus in front so i'd expect to see all the values to 50% when switching to percent. But for some reason the blue line is always at 0%.
jsFiddle
EDIT:
As Bobby Orndorff explained in the comment:
When stacking line/area series, you add the values of the second series to the values of the first series. If the values of the second series have the same magnitude but different sign then the sum will be zero (i.e. the second series will be plotted at zero). When stacking bar series, positive values are stacked above the zero and negative values are stacked below zero.
So now my question is:
How do i achieve the same effect as the bar series but using the line/area series? Is it possible without manually editing the dataseries (doing the percentages myself)?

draw a google line chart with three axial

i try to get image of a three axial google chart but don't display any line chart , like below :
http://chart.googleapis.com/chart?chxt=x,y,r&chxr=1,734238,882088|2,993,1431&cht=lc&chd=t:850751,852364,828412,801830,772874,734238,768322,804502,844117,882088,839063,832920|&1364,1431,1380,1263,1168,1093,993,1099,1285,1261,1330,1261,1175&chco=76A4FB&chls=2.0&chs=200x125
we have three axial and different range numbers and want to show this two data series in one google line chart image

with something like below you can draw two different range series :
http://chart.googleapis.com/chart?cht=lc&chd=t:2768,2538,2439,1205,1367,1694,1897,2011|2722,2686,2669,2669,2669,2667,2666,2666&chxt=x,y,r&chs=450x200&chds=1205,2768,2666,2722&chxr=2,2666,2722|1,1205,2768|0,1,8,1&chg=3,50,1,0,3&chco=0a6cff,ff9e0c&chdl=visit|price&chdlp=r

Highmaps - how to draw two mabBubble series on one chart

I am trying to create a highmaps chart that contains two mapbubble series so that it will show two bubbles in each country rather than just one. I am however struggling to understand how I can manipulate the x coordinates of the series so that they are not drawn on top of each other.

You need to manipulate second serie's data and change x/y values, because points are printed according to these values.

Categories

Resources