Im trying to make my Pie Chart fully responsive so it can be viewed on smaller devices. Im using the latest Highcharts version (Version 5) to draw the charts.
I have used the below code to give the chart a maximum and minimum width so the chart doest expand or shrink too too much
JS Code
responsive: {
rules: [{
condition: {
maxWidth: 500,
minWidth: 100
},
chartOptions: {
legend: {
enabled: true
}
}
}]
},
But unfortunately this doesnt seems to be working. The max and minimum width is not being applied to the chart.
Also how can i set the font size in the legend and chart (both percentage and the center text) dynamically (smaller) when its viewed on small screens. Now the font size remains the same on smaller screens which takes up lots of space and breaks the chart
I have setuped a demo over here https://jsfiddle.net/livewirerules/6wu282fu/11/
Any help will be appreciated
I answer this for upcoming referee
as of Highcharts 5, you have an ability to change font size with a dynamic value with em numbers eg: 1em
you can see it in action here :
[http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/highcharts/css/em/][1]
Related
I am making a HighCharts pie chart with a responsive legend, the legend should work on mobile views as well as tablet, pc, etc.
Here is sort of a link to my issue on js fiddle https://jsfiddle.net/sg657bpz/1/
And here are the styles
legend: {
align: 'center',
layout: 'horizontal',
width: 600,
x: 100,
itemMarginTop: 1,
itemDistance: 10,
itemWidth: 170,
},
Basically right now, the legend will just kind of cut the words out of the label when we go to mobile view..
I would like the legend to dynamically shrink in size kind of like how flexbox does, depending on how large your viewport is, so that It fits within the chart and keeps the same structure of having 3 columns and two rows.
How can I add this responsive functionality? In the responsive attribute, it only lets me set one value of either min width or max width, so I cannot do CSS like media queries. Also to create this two row funcitonality, I have to set the width to different numbers, and just kind've guess that It will go on two rows, is there a way to implement this feature easier?
Thank you for the help
Zooming with a zoomType of 'x' in a Highcharts chart, seems to only crop the data area between given coordinate stops. Is there a way to zoom in and still have all data available through scrolling?
{
chart: {
borderWidth: 0,
zoomType: "x",
scrollablePlotArea: {
scrollPositionX: 1,
minWidth: 1057
}
}
}
https://jsfiddle.net/OysteinAmundsen/4x7yzu68/3/
The fiddle above is set to a minimum width of 1057px, while the max-width of the container is 800px. This forces a horizontal scrollbar. If you zoom in on the data, notice that the available scrolling area does not change. This means that the data is not zoomed, it is cropped and stretched to fill the area.
I know there are events I can hook on to - the redraw event seems a likely candidate. Perhaps I can adjust the minWidth and cancel the crop-zoom, or is there a config I'm missing wihch whould do what I want?
The simplest solution is to use scrollbar feature from Highstock:
scrollbar: {
enabled: true
}
Live demo: https://jsfiddle.net/BlackLabel/be5wvg9q/
API Reference: https://api.highcharts.com/highstock/scrollbar
I am using the horizontal bar chart from chartjs. Right now my Chart seems to be very big, and the space between the ticks on the xAxis is very high. ( I attached picture of that), can anyone tell me how to reduce this space and scale the chart in total better?
My css properties:
#myChart {
width: 90% !important;
height: 100% !important;
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
padding-bottom: 5%;
}
My chart options:
modelChart = new Chart(ctx, {
type: 'horizontalBar',
data: data,
options: {
scales: {
yAxes: [{
ticks: {
suggestedMin: 0,
fontSize: 18
}
}],
xAxes: [{
ticks: {
autoSkip: false,
fontSize: 18,
beginAtZero: true
}
}]
},
legend: {
display: false
},
tooltips: {
footerFontSize: 22,
bodyFontSize: 22,
titleFontSize: 18
},
hover: {
animationDuration: 0
}
}
});
If you post your corresponding HTML then I can confirm this, but is #myChart the id of your canvas element or of a div that contains your canvas element?
Chart.js will render the chart such that it fully fills the parent of the canvas element. Even if you set a width property on a canvas element it will still not affect the chart size.
Checkout this codepen example that demonstrates the difference. At the top is a chart contained by a div whose width is set to 40%. At the bottom is the same chart but the canvas element's width is set to 40%. Notice that the second chart still fills the entire window.
So long story short, you should wrap your canvas element in a div and set the div's desired size accordingly to actually change the size of your chart.
Now, let me address your question about changing the space between ticks in your X axis. There is not really a way to truly do this like I think you are wanting to do, because chart.js determines the tick placement by dividing the width of the chart by the number of tick steps (e.g. it always uses the full width of the chart equally).
So one way to decrease the space between ticks is to simply add more ticks (by changing the tick stepSize using the stepSize and fixedStepSize properties). Obviously, in this case, the chart size has not changed. You are just showing more ticks, so the space between them has decreased.
If you want to truly change the distance between ticks, then the only way is to decrease the width of the chart. But by default, the height of the chart will decrease along with the width because the maintainAspectRatio property is defaulted to true.
So if you want a narrower chart (but still want the chart to be large) then I would advise you to set the maintainAspectRatio property to false and manually set the height and width of your chart's parent div.
Checkout this codepen that gives an example of each of the tick spacing concepts that I discussed.
The first chart is the baseline, the second chart adds more ticks (thus decreasing the tick spacing), and the third chart changes the aspect ratio so the chart is still large but narrower (therefore the distance between ticks is reduced).
Try using chartArea: {width: '30%'}. Adjust percentage as per requirement. It will compress the width of the chart. Just a thought !!!! I used in horizontal bar graphs to adjust my graph size.
I am using Chart.js as my charting library. I have created horizontalBar chart.
I need to set the width of individual bar in the chart.
I did not found anything specific in chartjs documentation but while looking at source code I found the option barThickness which is setting the fixed bar width
But as number of rows increase, instead of increasing the height of the chart, the bar are colliding with each other. Please check fiddle for example:
https://jsfiddle.net/orhp0zLg/
Is there any way we can increase the height of the chart instead of letting the bars collide with each other?
The barThickness property is a fixed width, as you noticed in your issue.
However, you have an other property called barPercentage which is a multiplier of the max width of your bars.
You should set berPercentage to a value (let's say 0.95) and you'll always have the same format, no matter how many bars you have :
options: {
scales: {
yAxes: [{
barPercentage: 0.95,
}]
}
}
Here is your updated fiddle with the fix and here are the results with first 7 values and then 12 :
I'm attempting to use a highcharts in conjunction with Bootstrap. The pie chart is placed inside a column of 6 for example, so it takes up half the page. What has been happening is the datalabels are too long and so are being cropped out of the containing div.
A fix that has been proposed for this is to set a width on the datalabels.
like so:
pie: {
size: '60%',
allowPointSelect: true,
dataLabels: {
style:{
width:100
color:'black'
}
}
}
}
This works flawlessly for Chrome and mozilla, the width is set and the position of the datalabel changes so its all drawn closer to the pie chart. But when testing in IE8, (and I have to account for it unfortunately) the width is set, but it appears that the position of the datalabel is not changing, so I get even less of the data label visible on the screen.
I'll try get a jsfiddle or a screenshot up shortly so you can see what I mean, but initially I was just seeing if anyone had come across this issue before, or if there's a simple fix I am just missing.
Jsfiddle
I've commented out the width in the plot options so you can see what's happening.
When I uncomment the width, it renders perfectly in Chrome and mozilla. But in IE8, the position of the label doesn't change, so the left labels end up far away from the pie chart and still cropped.