I'm trying to configure the pie chart to use the minimum space possible.
I have set the fixed diameter (to the circle, not to the container) so that i can compare two charts.
Did not set the fixed width and height (to the container) as it can hide the labels (Labels are dynamic. Sometimes they can be long. And they are of different length for each chart.)
Here is the jsfiddle.
Please note that there are two charts one below the other.
Here is my code:
$(function ()
{
draw('container1');
draw('container2');
function draw(id)
{
$('#' + id).highcharts(
{
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title:{ text: null },
legend: { enabled: false },
credits: { enabled: false },
tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' },
plotOptions: {
pie: {
size: 100,
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [/* data */]
});
}
});
Current issues:
There is some unused space around the chart (gray colored).
Right hand side some part of the label is hidden even though there is space available on the left side.
Edit 1: From the api docs it seem to use default height 400px and width 600px, if not set on the container element. Is there any way to instruct it to use the minimum required width and height?
Reason for 2: size of the pie chart, you wouldn't see it if you increase the size.
Reason for 3: highcharts does not automatically recenter the chart if you set the size of the chart, and the center of the chart would be center of the div, which leads to cutting off the labels.
If you don't set the size, highcharts would recenter the chart to accomodate all the labels in the plot area.
Try using minSize instead of size.
Related
Originally I have the plot border width set as 0 and then later I want to update it as per below. But it doesn't work. The tooltip part works and I believe the attribute is in the correct place.
chart.update({
tooltip: {
enabled: false
},
plotBorderWidth: 1
});
Any help appreciated.
Thanks
You need to put plotBorderWidth property in a chart object:
chart.update({
tooltip: {
enabled: false
},
chart: {
plotBorderWidth: 1
}
});
Live demo: http://jsfiddle.net/BlackLabel/9pcm0fon/
API Reference: https://api.highcharts.com/highcharts/chart.plotBorderWidth
What I am trying to achieve is to have a highcharts that width continues increasing as data points increase
currently, I have the following
AM using vuejs with highcharts but should be similar to jquery or others
<div class="col-md-6" style="overflow:auto"> //set overflow css
<div id="container_h"></div>
<div>
now the script code that renders the highchart
this.chart = Highcharts.chart('container_h', {
chart: {
type: 'column'
},
credits: {
enabled: false
},
title: {
text: ''
},
xAxis: {
categories: this.ranges
},
yAxis: {
min: 0,
title: {
text: 'Total trucks'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: this.chartdata
});
The above renders a chart with the
What I am looking forward to achieve is this: the highchart columns to have a fixed width which when it grows it creates a scroll on x-axis so something like this
that has a scroll area
How do I achieve this?
You need to use highstock.js.
There is already an answear there: How to make highcharts scrollable horizontally when having big range in x-axis thanks to #Gopinagh.R
Two ways to achieve a scroll bar.
Option 1
You will need to use highstock.js and instead of rendering a
stock chart, you have to render a highchart.
Then enable the scroll bar
scrollbar: {
enabled: true
}
Check the API for scroll bar and related operations http://api.highcharts.com/highstock#scrollbar.
http://jsfiddle.net/gopinaghr/kUSyF/1/ I have fiddled an example.
Option 2
Try setting min & max attributes to the x-axis.
xAxis: {
categories: [...],
min: 0,
max:9
} Displays 10 categories in x-axis at a stretch, adding a scroll for the rest of the categories. find the fiddled example http://jsfiddle.net/gopinaghr/kUSyF/293/
I have a chart that is a column chart rendered on top of a area chart. Here is an example:
http://jsfiddle.net/78p42/4/
Is there a way to make the outer edge of the area chart to match up with the outer edges of the first and last columns in the column chart? In case you are not sure what I mean, please see this image I created.
I figured there would be a way to do it in the plotOptions for the area charts, but I can't find a way.
plotOptions: {
column: {
borderWidth: 0,
pointPadding: 0.1,
groupPadding: 0,
states: {
hover: {
enabled: false
}
}
},
area: {
lineWidth: 0,
marker: {
enabled: false
},
states: {
hover: {
enabled: false
}
},
pointPlacement: 0 // I have noticed that this will shift the whole graph over, but then there is a huge gap on one side of the graph
}
},
Thanks for your time.
Fiddle: http://jsfiddle.net/jakelauer/ZENuS/
Highcharts JS call:
$(function () {
$('div').highcharts({
chart: {
backgroundColor: 'rgba(0,0,0,0)',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
width: 500,
height: 500,
margin: [0, 0, 0, 0]
},
title: {
text: null
},
plotOptions: {
pie: {
minSize: 0,
size: 500,
animation: {
duration: 5000,
easing: 'linear'
}
}
},
series: [{
type: 'pie',
innerSize: 486,
data: [1]
}]
});
});
As you can see in the fiddle, while the graph grows, the thickness of the line animates as well as the percentage of the circle it takes up. I'd like the line to stay the same thickness the whole time, and only change how much of the circle it fills. Is this possible?
The Highcharts API only provides options to calibrate the duration and easing of this animation, as you've already seen. The default "scaling" animation into the charts final height/width and thickness of its "donut" cannot be altered. You either have no animation (animation: false) or this "scaling" animation with control over the duration and easing. Like I said, these are the limitations that exist within the Highcharts API; I cannot speak to the feasibility of coming up with some magical workaround via the jQuery UI or any other framework.
In summary:
no?
Unfortunately this option is not possible, but you can request your proposition on http://highcharts.uservoice.com/
For values of 0, Flot likes to draw a flat line where the bar would be. Is it possible to configure it to draw nothing?
In my application I solved this issue by setting yaxis min to a value greater than 0 and less than the resolution I was working with. Borders visible, flat line hidden.
var options = {
series: {
stack: 0,
lines: { show: false, fill: true, steps: false },
bars: { show: true, barWidth: 0.6 }
},
xaxis: {
mode: "time",
timeformat: "%H:%M"
},
yaxis: {
min: 0.5
},
selection: { mode: "x" },
grid: { hoverable: true }
};
You can set the value to null when it's zero and that will prevent it from showing and allow you to keep borders around other bars.
One solution: set the lineWidth of the bars to 0. This eliminates the border around the bars.
This comes at the cost of the nice visibility for small values Flot has. With borders, even when your chart has large values, 1 and 2 for example are distinct. Without borders, the small numbers can be hard to see, but this effect can be offset by sticking to darker fillColor values for your bars.