I am using kendo ui to render some pie charts to my web page. They have a variable data set, some will have a legend which is 1 row and some will be 2 rows.
When I have the position set to bottom the pie chart with two rows of legend ends up being smaller because its trying to fit the second row in the same area, so it forces the pie chart to be smaller. The legend is displaying how I would like it to display though, with the items being center aligned.
I've tried to get around this by setting the legend position to custom instead of bottom. This takes the legend out of the sizing equation and positions it absolutely. This means that the pie chart sizes are now all the same, but the legend data is now left aligned instead of centered. This makes the legend with only 2 items look bad since its now all off to the left instead of centered.
Does anyone know if there's a way to set the legend to be center aligned while i have it set to using a custom position?
From what I can see in the API documentation, there is no option. Also, because the labels will be of variable lengths, i can't conditionally statically position them because depending on the label length different amounts may fit on each row.
I have setup a JS Bin example showing the issue:
http://jsbin.com/fejeyi/5/
The first two charts are using position bottom and you can see the pie's are different sizes, but the legend displays correctly.
The second two charts are using position custom and you can see the pies are the same size, but the legend is left aligned.
Any help appreciated.
Here's the source of the JS Bin:
http://jsbin.com/fejeyi/5/watch?html,js,output
Cheers!
Related
I have a single chart webpage showing Highchart line:bar graph: http://www.jcsweb.biz/mef/AnimGIF/legend_csv_03h_1Cht_01d.htm
with external chart data:
http://www.jcsweb.biz/mef/csv_dump/HC_TEST_DATA1.CSV
and Chart Legend Tooltip (long string) from an external file: http://www.jcsweb.biz/mef/csv_dump/HC_TEST_LEGEND1.CSV
So on mouseover of chart series legend, a much longer Legend tooltip is displayed (ie as held in HC_TEST_LEGEND?.CSV).
It all works fine, but hits problems with the longer Legend tooltip when I try and "double up" to display 2 (or more) such charts on a single webpage. http://www.jcsweb.biz/mef/AnimGIF/legend_csv_03h_2Cht_01d.htm
The Upper chart long Legend tooltip displays fine (as above) but the Bottom chart doesnt display ANY longer Legend description from HC_TEST_LEGEND2.CSV.
In moving to 2 charts, I have tried to make the JavaScript code/variables names distinctive to each chart eg "legendData1" vs "legendData2" but I have run out of browser debug pointers to find the js coding legend tooltip error !
Any help/pointers on finding the offending code in Chart 2 much appreciated
The source of your problem is probably the value of e2.clientY. I debugged your code and it has the value higher than the chart's height. It seems that this value is relative to the whole document. When you assign attributes to your legend tooltip object then (.attr()) all the values are relative to the chart container. So in this case your tooltip is created outside of the chart and is not visible.
Here's live working demo of legend tooltip that uses properties of SVGElements instead of mouse event: http://jsfiddle.net/kkulig/mujn4eja/
I'm showing percentage values inside my chart columns but some of the labels overlap when the values are very small and are hard to read. I tried adjusting the font size but it's not helping. How can I show these labels without any overlap? Screenshot below.
I'm afraid there's very little that can be done as the library doesn't have any strategies to automatically avoid overlap outside of hiding the labels if there's not enough room by default with the default false setting for showAllValueLabels.
You can try tweaking the graph objects' labelOffset property to shift the text up to see if that helps, but that's all you can do on the label side of things.
Alternatively, instead of using labels, just rely on the chart balloons that appear when hovering over the column. You can also enable the chartCursor, which shows all balloons within a category/date instead of just one of the balloons and they won't overlap. You can adjust the cursor's visibility and appearance as well.
I have a chart created with ChartJS that displays datasets ( (x,y) pairs) in a line chart. Based on user requests, I am adding the ability for the user to change the X-max and Y-max values. All well and good until the datasets overflow the Chart area.
This is off the right side of the chart, in the blank space under the legend. As you can see, the lines stop following the points and go crazy until they are clipped by the canvas area.
I would like to clip or mask the visible data using the Chart area, rather than the Canvas area. Is there a setting in ChartJS to do this?
Edit: clarified title
I've found a partial solution. By adding lineTension: 0 to the Chart.dataset object, I was able to get the following:
Changing the line tension to 0 has eliminated the wavy lines outside of the chart area, but I'm still looking for a solution to the data overflow.
What will be the best way to align two charts on a same line? The thing is that I have different number of legend items and the height differs from one another. I've tried playing around the legend position, but it doesn't seem to work for me
You can set maxHeight parameter per each legend, then always this object have the same size. As a result your chart will be aligned.
http://api.highcharts.com/highcharts#legend.maxHeight
I have to implement candlestick stick graph through Highchart but since Highchart doesn't support candlestick graphs that's why I am trying to implement this through box plot chart in Highchart. For this I am doing this by setting the median to null.
But the issue is that How can I reduce the width of box and also I have to remove horizontal line shows on low point and high point of box plot. Can any body suggest me to do this
You can set pointWidth to make smaller width, but there is no option to remove vertical lines on how and low point, see: http://jsfiddle.net/mTdPh/