I am using Highcharts [Pie] series
How can I add one more inner circle with depth as it has marked in pic 1?
Online Demo
Expected:
What I am getting is:
To do this you need to have two series, each with type set to pie, then you can manipulate the look of the two pies with inner size.
Here is an example of your data with two pies, I made the inner size pretty wide so you can see what happens as you change it around.
JSfiddle Example
Good luck!
Related
For example, there are 4 pyramid, I want to place them like 2 * 2. So their centers should be ['25%','25%'], ['75%','25%'], ['25%','75%'],['75%','75%'],
you can see the second row of pyramids fly to the top of first row.
then I came out with an idea that "why not try second row centers with ['25%','-25%', '75%','-25%']?"
Yeah! It works! Wait! Where are my datalabels?
So, I'm wondering how do we place them propertly without losing datalabels?
Here is a fiddle:
https://jsfiddle.net/scottszb1987/wyqxLkxh/
I have the following chart as an example. I would like to move the points over B such that 1% is over the orange column, and the 2% is over the blue column. Is this possible?
http://jsfiddle.net/0m3208qj/4/
code
The points are positioned according to the y value. So if you need increae position of it, you need to prepare another y values.
I managed to do this, but in a complicated way. I had to split the points into two series, use pointPlacement to move them to the correct place, and then use the renderer to draw custom lines!
Here is an example: http://jsfiddle.net/8datkr4m/
Code
I'm in the process of evaluating Highcharts as a replacement for our current platform, and have some questions about how we can replicate one of our existing charts:
I've been able to recreate the basic floating stacked column chart, but need help with some of our specific features.
1) Is is possible to replicate the multiple y-axes with the columns displayed to the right of each within a single chart? If not, I suppose we could do 3 charts next to one another - and draw our own titles above (and data table below). If we go this route, is there a way to group all these elements in a single "container"? We need to export these charts to images and need to end up with a single image that looks like the one attached.
2) How would I create the inner box within each column? Do I need to draw it myself, or can I create another column series with a border and transparent fill and somehow set the width of the column to be less than the width of the main columns (note that the number of columns on each chart is dynamic, so the column widths can't be a fixed size. i.e. the inner box width needs to be a percentage of the main column width)?
3) Assuming #2 is possible, I could probably use the same technique to plot the horizontal line - just make the height 0 (or very small) and make the bar wider instead of smaller. Is there a better way?
4) How do I get the x coordinates of the columns so we can align our data table under each column?
5) Can I separate the individual points within the column. You'll notice in my jsfiddle, product 1 and product 2 are vertically aligned in the center of the column. Can I spread them out within each column as the 2 points are in the screenshot?
Thanks in advance for advice on all or any of the above.
Mike
1) You can use multiple yAxis, see the example
2) You can use renderer or mix column/column range and border parameter, example
plotOptions: {
columnrange: {
pointPadding:0.2,
color: 'rgba(255,255,255,0)',
borderColor: '#303030'
}
},
3) Use renderer, as above or scatter series with customied marker
4) Column is shape in point.element.graphic, so you can extract it.
5) as far as I know, it is not possible
I would like to fill the area between two serieses (when serieses cross each other). See below. I tried the 'arearange' chart type but it filled most of the chart with solid colors. I saw a similar question but I wanted to know if Highcharts supports what I want or I have to use the solution posted in that question.
Chart now:
What I want:
type:'arearange'
You need to use three series, first / second as lines, third as arearange with defined values.
Related topic: How to fill the Area between two series with multiples yAxis in HighChart?
I want to make a multiple plots with the x-axis aligned so that we can compare two set of data. I want it to look like this
https://stackoverflow.com/a/11796553/229075
In my case there are some addition requirement that some of the plot are lines and some are bar. So the default scale does not align even if the data range are the same.
I found some good suggestion about "stacking" the charts. It is a little bit complicated but a promising way to try.
https://stackoverflow.com/a/12179023/229075
However I also have other use case that may push the envelop of simple stacking. For example, I'd like to do scatter plot matrix sometime when both x-axis and y-axis have to align like this
http://www.statmethods.net/graphs/images/spmatrix3.png
Rather than putting many chart in one Highchart, this may requires have many separate charts but have better control in how the axis is layout.
If you want to use one one chart, you can use linkedTo option to connect axis.
If you want more simple charts, you can manage to connect axis using event afterSetExtremes, where you can call setExtremes() for another chart.