Plotting multiple different plots using same container and different data,

[pranav2701]

I have an xrange graph and i want to plot a lengend on top what each color signifies in the same line. The xrange graph should be below the said legend.
The legend has 4 values (eg. val1,val2,val3,val4 ).
So the structure must be something like this:
# val1 # val2 # val3 # val4
[


X range graph


].


# denotes colored circles, diff for each val.
[ ] denotes the xrange graph.

[pranav2701]

Update, The x-axis of the x range graph is on top. So the legend must be above that. functions() cant be used. Am currently trying to create legend with a bubble chart and a heat map.

[jakub.j]

Welcome to our forum and thanks for contacting us with your question!

Could you please visualize what exactly do you want to achieve? I can't understand what do you mean.

Also, please send a live demo of your chart or anything that you have already done so that I will be able to work on your example.

Best regards
Jakub

[pranav2701]

https://jsfiddle.net/trmxg258/1/

Something like this just that the legend isn't related to the x range graph. More like a dummy legend with color set with hex and the values to display. Hope this helps.

[jakub.j]

Hey!

Thanks for explaining it!
To achieve the result that you wanted, I had to split your data into seperate series by the y value. Than, I extended the legend prototype because x-range series does not handle series.color property. Now the legend is shown correcly for each series with a corresponding color.

Demo: https://jsfiddle.net/BlackLabel/9276a405/

Let me know if that is what you were looking for!
Best regards
Jakub

[pranav2701]

Thanks a ton !!