Does anyone know how to reduce the size of this pie chart? I am using Lazy High Charts gem.
return LazyHighCharts::HighChart.new('pie') do |f|
f.chart({:defaultSeriesType=>"pie" , :margin=> [0, 0, 0, 0], backgroundColor: "#F5F5F5", renderTo: "mediamix#{akid.to_s}"} )
f.series({:type=> 'pie', :name=> "Count",:data=> data_val, borderWidth: 0})
f.title({ :text=> nil})
f.plot_options({:pie=>{:allowPointSelect=>true, :cursor=>"pointer" , dataLabels: {enabled: true}, showInLegend: false}})
end
You can also explitly define the width and height via Highchart API:
$('#container').highcharts({
chart: {
height: 200,
width:100
});
Highcharts renders the charts to fill the containing div that you specify in the renderTo option. In your case, you are specifying:
renderTo:"mediamix#{akid.to_s}"
I don't use Lazy Highcharts Gem, so I don't know what this refers to, but you need to look through your code for where this div is defined, and set it's height and width to the size you need.
Related
I have created a combined line/timeline chart in this jsfiddle:
// arbitrary code snippet required by stackoverflow editor:
xAxis: [{
type: 'datetime'
}, {
type: 'linear'
}],
I would prefer the events to be positioned below the analog value grid rather than as currently, in the middle of it.
Is there any way to achieve this? Thanks in advance!
I can suggest two solutions:
add a second yAxis and set heights for both y-axes:
yAxis: [{
height: '50%'
}, {
height: '50%',
top: '50%'
}],
Demo: http://jsfiddle.net/BlackLabel/e0zhmyr7/
API: https://api.highcharts.com/highcharts/yAxis.height
change the y values for x-range series in the current implementation
Demo: http://jsfiddle.net/BlackLabel/ow1357tq/
I want to create charts with fixed height, depending on user interaction, some chart can be empty, so there are no legend.
My problem is I want all of them with the same height, and then, if there is legend it's above the chart, this height should be increased by the legend.
I can't get it, it's my try.
options = {
chart: {
zoomType: 'x',
height: 300
},
legend: {
enabled: 'true',
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal',
maxHeight: 50
}
};
As result, what I have is, if there is legend, a 250px chart and if it's not a 300px chart. What I want is always a 300px chart, and if legend, 50px more to contain it.
how can I solve it?
In the chart load event you can use the chart.setSize method to increase the height of the chart by the height of the legend.
function addLegendHeight(chart) {
var legendSpace = chart.legend.legendHeight -
chart.legend.padding;
if (legendSpace) {
chart.setSize(null, chart.chartHeight + legendSpace);
}
}
Highcharts.chart('container', {
chart: {
...,
events: {
load: function() {
addLegendHeight(this);
}
}
},
...
});
Live demo: http://jsfiddle.net/BlackLabel/seqah1by/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#setSize
I'm using Highcharts to generate a heatmap grid with around 10k grid cells. The heatmap renders in under a second without dataLabels. However if I enable dataLabels, which are necessary for my project, the same heatmap takes 10 seconds to render. I tried setting useHTML to true, and that renders in 30+ seconds. I'm not doing any work within the dataLabel rendering. Is there any way to speed this up?
The example with 10k cells in the heatmap with enabled data labels is here.
Highcharts.chart('container', {
chart: {
type: 'heatmap'
},
xAxis: {
min: 0,
max: 99
},
series: [{
data: data,
dataLabels: {
enabled: true
}
}]
});
No-opt rendering time: 33.5 s
From the profiler I can say thet there are two good candidates for optimization.
Rendering with overlapping labels: 10.4 s
dataLabels: {
enabled: true,
allowOverlap: true
}
No textOutline: 8.56 s
dataLabels: {
enabled: true,
allowOverlap: true,
shadow: false,
style: {
textOutline: null,
color: 'black'
}
},
The other candidate is about setting zIndex for the data labels, I cannot see how to optimize it without changing internal Highcharts method responsible for drawing data labels. You can wrap drawDataLabels method and remove the part for setting label's zIndex.
Without zIndex: 1.62 s
attr = {
//align: align,
fill: options.backgroundColor,
stroke: options.borderColor,
'stroke-width': options.borderWidth,
r: options.borderRadius || 0,
rotation: rotation,
padding: options.padding
// zIndex: 1 /* commenting this part gives a few good seconds */
};
full example: http://jsfiddle.net/dddqrb9f/1/
I commented only one line in the function but you can remove additional features if you don't need them - e.g. if you don't need labels, you can render text only.
if (!dataLabel) {
dataLabel = point.dataLabel = renderer['text']
Text instead of labels: 0.864 s
example: http://jsfiddle.net/dddqrb9f/2/
How do I get HighCharts not to overlap columns in this chart? I have tried all sorts of options. What I would like is for highcharts to set the widths evenly depending on the number data elements in the series, the more the narrower.'
I have specified width: 300 to force the columns to overlap just to show what is happening in narrow chart and only add a few data elements.
$(function() {
Highcharts.chart('container', {
chart: {
type: 'column',
width: 300,
zoomType: 'x'
},
legend: {
enabled: false
},
series: [{
data: [
[102.0, 66815.0],
[96.0, 77760.0],
[90.0, 68710.0],
[84.0, 69452.5],
[78.0, 48807.5],
[72.0, 35472.5],
[66.0, 24595.0],
[60.0, 17790.0],
[54.0, 18010.0],
[48.0, 5635.0]
]
}]
});
});
http://jsfiddle.net/a0kjogh1/3/
Data should be sorted before you put it into the chart. You receive the error in the console.
data.sort((a, b) => {
return a[0] > b[0];
});
example: http://jsfiddle.net/a0kjogh1/4/
I have a chart with two combine chart types, line and column. I would like, as in the image below, to have my column chart at the bottom and my line chart a bit higher up and the line chart label to start hihger up as well.
I want something like:
yAxis: labels{y: -100}
My problem with this is that this only moves the labels, not the chart data.
My try so far can be found here: http://jsfiddle.net/32r7rctt/2/
It is possible to set 'height' and 'top' properties of the yAxis. Example: https://jsfiddle.net/mtvy24rj/1/
yAxis: [{
height: '70%',
top: '0%'
}, {
title: {
text: null
},
height: '30%',
top: '70%',
labels: {
enabled: false
},
}],