How to create two legends on heatmap x and y axes - highcharts

I would like to create two custom legends as marked into red rectangles, for an heatmap chart.
The text and colors can be fixed in the code (they never change).
Is it possible to do something like this?

Related

How can I change the color of plot bands in Highchart basic column chart?

I opened the basic column chart using Highcharts and now I need to make little customization. I would like to change the color of the plot band that is visible when I place the mouse pointer within one category on X axis. I tried to use the xAxis -> plotBand option, but it only changes the color with specific start and end values. How could I change this color on mouseover?
This is some example, how I would like it to look: https://www.dropbox.com/s/ilxhd99xo8pwn7v/Zrzut%20ekranu%202015-09-05%2020.20.17.png?dl=0

Can a Highcharts Donut or Pie Chart Show a Default Background Circle?

I am helping my organization put together some Pie and Donut charts using Highcharts, and some of our charts will have zero value points. Normal behavior is to not render these points out, but that leaves us with an empty chart.
So, is there a way to set a "background" circle for the Donut chart so that if all values are zero, the user still sees a gray donut (indicating "0" values)?
I don't want to use something like a background image because then it may not adjust responsively in a proper manner. Plus, we'd like the parameters of the circle to be adjustable just like other data elements in Highcharts.
Thanks for any and all advice!

HighChart displaying legend icon along with Y axis

I have multiple Y axis and to differentiate the Y axis I want to display the legend icon just beside Y axis. So is there any way to do this I know we can make the Yaxis itself as the color matching with series but unfortunately that is not needed.
Highcharts is super nice because most text elements will have a style element associated with them. This uses CSS to style the text element for you.
So you can make the yAxis.title.style red or whatever color you want. This isn't just for titles, you can also make the values of the axis a certain color as well with style (make them red, or whatever you want).

Highcharts - multiple plot with the same x scale

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.

How to position labels for plotbands on y axis in Highcharts

This Link is a similar example from highcharts.com which i'm working on. I'm trying to place the labels for plot bands on y axis. But as you can see the labels are overlapping on the chart which isn't that good. If i wanna color the labels with the same color of the corresponding plotbands, the label doesn't show up. Is there a way to place it completely outside without overlapping?
Thanks in advance.
A possible solution is to add right margin to the chart, and move the labels over.
Add a marginRight to the chart, and on each label, use x to determine its starting x position.
marginRight:110
and
x: 90 on each label.
http://jsfiddle.net/7xb1Lgx6/ the fiddle.
I think it's not possible to do it yet.
If you add labels to the plotbands it will overlap them.
You can align your labels but if you set x more than your chart width, it will not appear on your chart.
demo

Resources