i have a question with Jqplot Legend table size, legend table will override my plot size while legend contain a lot of content and i'm using outsizeGrid. I been try using scroll for legend table, but the table have no show any scroll bar and only legend table size is increase.
var legendTable = $($('.jqplot-table-legend')[0]);
legendTable.css('display', 'block');
legendTable.css('z-index', 100);
legendTable.css('height', '100px');
legendTable.css('overflow-y', 'scroll');
Related
How to Add responsive C3 chart in table.
i want to create a table with responsive table with one of the cell is C3 chart. initial width and height of the cell is 200 and 50, if browser size changes it should also update the chart.
Here my problem is on initial load also chart is not rendering as expected, svg size rendering as 197 width and 18 height.
chart Image for console sizes
looks like some margin is adding. how to ad responsive chart in table can any one help me.
App link : https://angular-rrxg7y.stackblitz.io
It can be resolved by resizing the chart whenever the table or div size changes using the chart.resize(); method
Is there any way to make a Highcharts pie chart with a height that automatically fits the chart and the legend? I have a variable number of legend elements and cannot rely on a fixed pixel height or one relative to the width.
The legend is far away from the pie chart. I would like the pie chart to be at the top of the container with the legend right below, with the height set to whatever the combined height is (rather than setting a static height).
You can calculate the required chart height and use setSize method to set it:
events: {
load: function() {
this.setSize(
null,
this.seriesGroup.getBBox().height +
this.marginBottom + this.plotTop + 20
);
}
}
Live demo: http://jsfiddle.net/BlackLabel/5jL1acdk/
API: https://api.highcharts.com/class-reference/Highcharts.Chart#setSize
I have a bar chart where I have drawn 3 vertical lines, each with it's own label at the top. I would like those labels to be above the top of the y-axis (above the 30% line in the example) but below the legend. I can't figure out how to increase the space between the top legend and the chart such that I can have my vertical line labels (15, 24 & 33) be off of the chart itself but below the legend. Any ideas?
I assume you are using chart.js. If yes, you can use custom HTML legends and apply style rules to them. Start your chart with the normal legends hidden and apply the generateLegend() method to a custom div.
var customChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
legend: {
//Because you are going to show your own legend
display: false
}
}
});
//insert legend to any div of your liking and manipulate via CSS
document.getElementById("custom-legend").innerHTML = customChart.generateLegend()
Documentation: http://www.chartjs.org/docs/latest/configuration/legend.html#html-legends
Fiddle example: https://jsfiddle.net/gmyy3rf5/
The requirements are:
1. "ellipsis" visual effect "..." for overflowed legend items' text.
2. After resized, the legend item width should adjust with the new container size. Means if the legend item had text "blahblahblahblah", and after resizing, the chart container get smaller and have no enough space to display the full text, it should display "blahblah...".
I've figured out the 1st requirement by giving the legend itemWidth a fixed width in pixel, and set the textOverFlow to "ellipsis":
chartOptions.legend.itemStyle.width = $container.width() + "px";
chartOptions.legend.itemStyle.textOverflow = "ellipsis";
But for the 2nd requirement, I changed the chart.legend.itemStyle.width to the current container width, and call the chart.redraw(), and it doesn't really redraw the chart.
`chart.legend.itemStyle.width = $container.width() + "px";
`chart.redraw()`
Is there any way I can update the chart with new legend.itemStyle.width?
Jsfiddle: https://jsfiddle.net/scottszb1987/z5qv1t80/
Cheers
In your case, I'd suggest adding a window .resize() event and then producing a new version of the chart with the updated options. That way, your legend size will pull in the new width of the container element.
// whenever the window is resized, destroy the chart and redraw it using updated options
$(window).resize(function() {
chart.destroy();
chart = new Highcharts.Chart(getChartOptions($("#container")));
});
Here's an updated version of your fiddle with this change: https://jsfiddle.net/brightmatrix/z5qv1t80/5/
I hope this is helpful for you.
I am having an issue with a pie chart I created in highcharts.
Depending on the placement of the data labels the actual chart will grow or shrink.
We need the pie chart to stay the same size so is there a way to keep the pie size constant and force the labels to fit around it or do I just have to place the labels inside each slice?
You will have to set a fixed size for the pie chart. Can be a percentage or a pixel value. For example:
plotOptions: {
pie: {
size: 100
}
},
See this fiddle from the API http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/pie-size/