How can I put legend of pie chart by google charts in a new line? - css

I used Google Charts to generate two pie charts in the same line (see the screenshot). But when the screen width updates, the legend goes beyond the screen, have to use the scrollbar.
I was wondering if there is a way that I can put the two legends beneath the pie charts and move Build: xxxx information right above the charts

Related

I want to create this chart -img indescription- in reactjs, which library is the best choice?

I've tried many times to make this chart but I've failed so i gave up and asking you about it.
If someone can help with it I will be grateful.

This charts looks like a stacked bar chart. This might help:
Stacked bar chart
or this one:
Stacked Group bar chart
For rounded corners of the bars this one will help:
How to put rounded corners on a Chart.js Bar chart

Multiple areachart overlaps each other so unable to hover over it

When I want to for example hover over my area chart dot symbols I could not do it because they could overlap each other.
See images:
Hover over event not triggered - No tooltip shows up
Hover over event triggered - Tooltip shows up
Maybe I can place the charts in the same layer or something like that to make it work properly?
What I noticed: As the charts loads in, the newer one covers the older one.
I could load the chart which has higher Y axis values first and than the charts with smaller Y axis values.
But that solution would only work in those cases where every single chart points are clearly bigger/smaller than the other chart's points.

Bar chart stacked vertically using Image-Charts

I have started using the Image-Charts Docs for Bar Charts
Vertically grouped Bars chart works as expected. You can see all 3 Items grouped(see the image below).
But
Using the same data in url for a Vertically stacked shows only 2 Items stacked (see the example from the docs below).
Both images attached can be found in the link to documentation
I work with this url to output stacked bar chart, but some Items are not visible/displayed.
https://image-charts.com/chart?cht=bvs&chs=800x725&chd=a:0,0,0,0,0,0,0,5882,9662,9363,9320,9363|0,0,0,0,0,0,500,3000,2520,6453,5000,3658|0,0,0,3358,0,0,0,7960,3040,584,601,2800|0,0,0,10488,0,0,0,1011,1659,290,4017,0|0,0,0,1050,1050,1050,1155,1050,1480,1150,1150,1150|0,0,0,0,0,0,0,623,1935,188,6796,404|0,0,0,0,0,0,0,833,833,833,833,833|0,0,0,0,0,0,0,0,819,819,819,0|0,0,0,0,0,0,0,0,0,0,0,1300|0,0,0,0,0,0,0,110,440,0,489,111|0,0,0,0,0,0,0,0,0,199,5,0|0,0,0,0,0,0,0,0,29,34,82,29|0,0,0,0,0,0,0,32,32,32,28,36|0,0,0,0,0,0,0,0,0,0,0,81|0,0,0,0,0,0,0,0,0,0,0,11|0,0,0,0,0,0,0,0,0,0,4,0&chco=648b7b,00e08a,00158b,8b0056,8b0000,a7f74a,ff9d00,ed0000,aa5555,555faa,202d91,18d4e3,d05bc7,9a5bd0,8d881a,8d5c1a&chxl=0:|Oct2017|Nov2017|Dec2017|Jan2018|Feb2018|Mar2018|Apr2018|May2018|Jun2018|Jul2018|Aug2018|Sep2018|&chg=10,30&chdl=Results$|Results|Results$|Results|Results$|Results|Results$|Results|Results$|Results|Results$|Results|Results$|Results|Results$|Results&chxt=x,y&chma=20,50,20&chtt=Vertically-stacked+Bar+Chart`

Thank you for your report, there was indeed an issue with our bvs support, it's now fixed:

Javafx chart show more empty space

I am customizing the javafx charts a bit adding valuelabels etc above bars and sliding out certain parts of piecharts. The problem is some of the extras come outside of the visual area.
Is there a simple way to get piecharts to become smaller (but the chart component itself retain its size so that there is more empty space surround the pie?
The same issue with barcharts. I need more empty space above my vertical bars, and more empty space to the right of my horizontal bars.
All data in the table has Number(mostly BigDeicmal) for its value and String for its key and series.

how to put a y-axis and x-axis label while using html and chartjs

I have a chartjs plug-ins for drawing chart. I render the chart data to the canvas html control. The problem is while usign chartjs I couldt add x-axis and y-axis label. Any one tel me how to show the labels on left side and bottom of the canvas control.

Axis labels aren't currently supported in chartjs.

Resources