dagmar
1
I have created a ternary plot to draw a Duval Plot in my application and am having issues with responsiveness.
The issue is that in mobile view the legend takes up too much space and the triangle plot becomes too small to be functional.
I have followed the instructions on this page
And have modified the codepen example to illustrate my problem
I have come up with a workaround to put the legend at the bottom, but I’d like to have the legend automatically wrap.
Is this possible?
dagmar
2
Workaround putting the legend at the bottom:
Add these css styles
text.gtitle {
font-size: 6vw!important;
}
text.legendtext {
font-size: 2vw!important;
}
text {
&.atitle,
&.btitle,
&.ctitle {
font-size: 3vw!important;
}
}
.xtick,
.ytick {
& text {
font-size: 2vw!important;
}
}
This is another way to have responsive text
