when all the values are 0 in the chart and I don't have a max axis value I am getting blank space in place of bars
You need to increase gridZIndex property for yAxis:
yAxis: {
gridZIndex: 4,
...
}
Live demo: https://jsfiddle.net/BlackLabel/0e89puxL/
API Reference: https://api.highcharts.com/highcharts/series.column.minPointLength
the grid line overlapps the bar when we add z-index
Related
I am using Anychart to generate a donut chart on a test website. I have the following code in my web page:
<div id="container" style="width: 500px; height: 400px;">
<script language="javascript">
var data = anychart.data.set([
['aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa', 34],
['bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb', 21],
['cccccccccccccccccccccccccccccccccccccccc', 15],
['dddddddddddddddddddddddddddddddddddddddd', 11],
['eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee', 6],
['ffffffffffffffffffffffffffffffffffffffff', 13]]);
// create a pie chart with the data
var chart = anychart.pie(data)
// set the chart radius making a donut chart
chart.innerRadius('55%');
// set the position of labels
chart.labels().position('outside');
//chart.legend().position('right').itemsLayout('vertical');
chart.title('')
chart.container('container');
chart.draw();
</script>
</div>
This generates a nice donut chart but the legends are generated at the bottom of the chart with right and left arrows so the user can scroll through the legend.
When I uncomment the chart.legend().position('right').itemsLayout('vertical') command, the legends get generated to the right of the chart, but the chart disappears. Here is a screen print of the before and after.
Any idea on how to get the legend to appear to the right of the donut? Eventually, I will be using this to dynamically generate the chart so there is the possibility of being up to 50 data points.
Thank you.
It is expected behavior because the legend items have very long text. To solve the issue you should limit the legend width to provide more space for the chart itself. Simply add the line below:
chart.legend().width('30%').padding(0);
You can adjust the desired width in percents or pixels .width(100);.
Issue description
I have a paging-enabled grid with 100+ pages of data. Page size = 100 rows.
Even on page 1, if I drag the scroll box to the bottom of the grid, I see a large white space at the bottom of the grid.
Jump to page 30, and if I drag the scroll box to the bottom of the grid, I see a large white space at the bottom of the grid. If I drag the scroll box up and down the grid, I see flashes of large white spaces appearing in the middle of the grid as well (which are soon painted over with rows of data).
This does not provide a smooth scrolling experience to end users.
Picture showing large white space at the bottom
Picture showing large white space in the middle
ExtJS version tried: 7.4.0
Steps to reproduce the issue:
Here’s the fiddle to reproduce this issue:https://fiddle.sencha.com/#view/editor&fiddle/3e98
(1) On page 1, if you drag the scroll box to the bottom of the grid, you will see a large white space at the bottom of the grid.
(2) Jump to page 30, and if you drag the scroll box to the bottom of the grid, you will see a large white space at the bottom of the grid. If you drag the scroll box up and down the grid, you will see flashes of large white spaces appearing in the middle of the grid as well (which are soon painted over with rows of data).
Does anyone know why this issue occurs, and how to resolve this?
Thank you.
Try setting "variableRowHeight" to true for any column that could have cells with varying heights.
To fix your example you can set it on these columns:
{
text: 'CommandLineWithDisplayNames',
dataIndex: 'CommandLineWithDisplayNames',
flex: 3,
variableRowHeight: true
},
{
text: 'CommandLineWithNumbers',
dataIndex: 'CommandLineWithNumbers',
flex: 3,
variableRowHeight: true
},
Documentation: https://docs.sencha.com/extjs/7.4.0/classic/Ext.grid.column.Column.html#cfg-variableRowHeight
In chart js is it possible to have each bar exactly under each scatter dot? in below images the first one correct and second one is not.
You can check demo here demo
any help please?
You can do it on a per-case basis. The problem is that both charts have different xAxis type (linear and category). Also the yAxis labels are of different length.
To solve the problem on the chart from your demo, you can change the options from your scatter chart as follows.
Define option scales.xAxes.offset: true to make it correspond to the default value defined for bar charts.
Add min and max to scales.xAxes.ticks to horizontally adjust the points with the bars.
scales: {
xAxes: [{
offset: true,
gridLines: {
display: false
},
ticks: {
min: -0.2,
max: 3.3,
Please have a look at your amended Demo.
In Data Studio my 10 points pie chart is like below:
As you can see there is a navigation arrow in the legend at the top of the pie.
I wonder how can I avoid the navigation by creating the multiline legend? How can I wrap the current single line legend?
Three ways to display all items in the legend; located in the Style Tab of the Pie Chart (added a GIF to elaborate):
Increasing the max lines;
Increasing the width of the Pie Chart;
Reducing the font size of the legend.
EDIT: Multi line Legend (Workaround using a Bar Chart)
How about using the legend from a Bar Chart? Added a GIF to elaborate as well as a few points:
Bar Chart: Use a Dimension and Breakdown Dimension that's the same as the one on the Pie Chart and enable the legend (Top) as well as using 2 lines (no legend for the Pie Chart)
Shape: Add a Shape over the Bar Chart (one that blends in with the background)
Order: Right click on components and select Order from the drop down to change the order of the components (Bar Chart: Send to back; Shape: Send Backwards (behind the Pie Chart); Pie Chart: Bring to Front)
Fine Tuning: Use Shift + Movement for precision placement (to get the shape exactly where you want it)
I just started using angular-nvd3 and can't seem to find out how to keep the legend text from being truncated. I'm using the bar+line graph and the legend text uses the "key" property of the data for the legend text, appended with (left axis) and (right axis). If the key property name is longer than 20 characters it's being truncated and appended with an ellipses. How do I keep the legend text from being truncated?
legend: {
align: false,
padding: 40,
width: 100
},
The align false will stop truncating, the padding and width are extra to help it look nice.