How can i use width and height for PrimeNg Chart?
<p-chart type="bar" width="400" height="400" [data]="data"></p-chart>
There is no effect when i use width and height.Please let me know how to use Chart of width and height.
https://www.reddit.com/r/webdev/comments/4gjuvp/chartjs_canvas_height_width_ignored/
According to that link you have to set two options for the chart:
<p-chart type="bar" width="400" height="400" [data]="data" [options]="options"></p-chart>
And in your Typescript Code:
options = {
responsive: false,
maintainAspectRatio: false
};
Looking over the source code, p-chart takes width and height as component inputs, so putting them in [] should do the trick:
<p-chart type="bar" [width]="400" [height]="400" [data]="data"></p-chart>
Related
I use ng2-charts and chartjs for angular9.
I draw a doughnut chart, and it will be shown line this:
But, I expected it will be like this:
The width of the line will smaller
How can I do that?
Thanks.
I think you can add the custom options to decrease the width of doughnut chart:
and all of the options is here https://www.chartjs.org/docs/latest/charts/doughnut.html
public DonutChartOptions: ChartOptions = {
options: {
cutoutPercentage: 80
}
};
I have a chart js bar chart that draws within the canvas:
<canvas id="chart" width="800" height="400"></canvas>
However I would like the chart to fit the size of the current window. I have tried:
<canvas id="chart" width="100%" height="400"></canvas>
but it does not like it. I could get the window width using window.innerWidth but is there any reason why the 100% does not work?
Please see the post: Chart.js canvas resize . There are actually two answers that are really good solutions here. You can use the chart options like below:
// Boolean - whether or not the chart should be responsive and resize when the browser does.
responsive: true,
// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
maintainAspectRatio: false,
or you can set the canvas width and height using client side code:
var ctx = document.getElementById("canvas").getContext("2d");
ctx.canvas.width = 300;
ctx.canvas.height = 300;
var myDoughnut = new Chart(ctx).Doughnut(doughnutData);
This post very effectively answers your question about why % values dont work: Canvas is stretched when using CSS but normal with "width" / "height" properties
After setting responsive and ratio options (check out related chartjs doc), use following css to fill 100% of the parent:
html
<div class="panel">
<div class="chart-container">
<canvas id="chart"></canvas>
</div>
</div>
scss:
.panel {
display: flex;
.chart-container {
position: relative;
flex-grow: 1;
min-height: 0;
}
}
I'm having some issues exporting my Charts to PDF.
I have this div
<div id="chart-area">
<button type="button" id="btnPrint_" onClick="Print1()">Print</button>
<?php echo '<h2 id="title">'.$_SESSION['team_name'].'</h2>'; ?>
<canvas id="myChart" width="800" height="400"></canvas>
<div id="legend"></div>
</div>
and I'm creating my chart using ChartJS
$( document ).ready(function(){
var helpers = Chart.helpers;
var canvas = document.getElementById('myChart');
var data = {
labels: unique_dates,
datasets: [
{
label: "Ticket Count",
fillColor: "rgba(107, 110, 111, 0.6)",
strokeColor: "rgba(107, 110, 111, 0.6)",
highlightFill: "rgba(107, 110, 111, 0.6)",
highlightStroke: "rgba(151,137,200,1)",
data: ticket_count
},
{
label: "Subsidy Count",
fillColor: "rgba(8, 126, 210,0.5)",
strokeColor: "rgba(8, 126, 210,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: subsidy_count
}
]
}
var bar = new Chart(canvas.getContext('2d')).Bar(data, {
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>kb",
animation: true,
});
//
var legendHolder = document.createElement('div');
legendHolder.innerHTML = bar.generateLegend();
document.getElementById('legend').appendChild(legendHolder.firstChild);
});
When I click the btnPrint_ Button I want to export my chart as PDF
like this
function Print1() {
var title = $("#title").text();
var doc = new jsPDF('l', 'mm',[210, 297]);
html2canvas($("#myChart"), {
onrendered: function(canvas) {
var imgData = canvas.toDataURL('image/png',1.0);
doc.text(130,15,title+" GT Log");
doc.addImage(imgData, 'PNG',20,30,0,130);
doc.addHTML(canvas);
doc.save(title+'gt_log.pdf');
}
});
}
The problem is that my chart is totally blurry in the pdf file.
Any idea how to fix this?
it's the first time that I'm using ChartJS and jsPDF so probably I'm doing something wrong.
Thanks!
The resolution comes from the Canvas size. The more you increase your Canvas (width and height), the better will be the resolution when downloading your PDF.
However, you probably don't want to increase the canvas size too much, so, one trick you could use is to create a hidden Canvas, with a higher width and height, use it to print the chart and create the PDF, getting a better PDF quality.
Here is a fiddle demonstrating this, with an option to download a PDF created from the original canvas/chart, and another option to download a new PDF from the hidden canvas/chart. You can see how the quality increase quite a bit when comparing both results.
https://jsfiddle.net/crabbly/kL68ey5z/
I don't think this is the best solution, however, it is the only way I could come up to increase the quality of my PDF chart files. I'm currently playing around both libraries, specially how jsPDF treats the w and h arguments when creating the docs.
Also, Chart.js does come with a built in function to extract an image form the chart (.toBase64Image()), however, the quality seems to be worse when I tested.
Since a few versions Chart.js has the parameter devicePixelRatio.
By default, the canvas is rendered in the DPI number by monitor, so 96 or Retina - not ideal for a printout, but perfect for the screen.
If you increase this value, more pixels are created. Expand the value so that you can export the chart in print quality as a Base64 image. The value does not affect the display of the chart on the monitor.
In my case, I set the value to 1.5.
options:{
devicePixelRatio: 1.5
}
Documentation: https://www.chartjs.org/docs/3.0.2/configuration/device-pixel-ratio.html
Works wonderfully ...
I've been working on a project trying to produce graphs with chartjs and then printing them using Chrome's print to PDF functionality, and I found that the chartjs graphs look poor. After reading various threads both on stackoverflow and github I developed one solution that worked well enough for me.
In my particular case I need the graphs at a fixed size and I can't have them be responsive because I need them to fit within the printed page correctly. I use style tags to set the size:
<canvas style="width: 300px; height: 300px" />
I've found that if you set responsive: false in the chart and then use the style tags like that, Chartjs won't mess with the size of the chart. Using any other method like setting width or height (not the style width or height) or using css classes will not set it properly. Chartjs only seems to work when I set the element's inline style tag for this.
Anyway, the trick that worked for me in getting better PDF output was to have Chartjs render a larger chart and then scaling it down to a smaller size so it fits on my page correctly.
Let's say for some reason we want a 300x300 pixel chart and that it looks poor when we print it to PDF. We need to have Chartjs draw this chart into a larger chart and then resize it down to 300x300. In my own project I am having Chartjs draw it 2x as large. So for this example I would make a canvas element that is 600x600 as follows:
<canvas style="width: 600px; height: 600px;" class="graph" />
At the same time I have a "graph" css class with height and width set to 300px. The chart will not render at 300px because of the inline style however.
You can then make the chart as you normally would, but immediately after the line of code that makes the chart, you remove the inline style tag from the chart. I found that when you do this, chartjs will draw the chart to the larger
600x600 size but then the chart instantly gets resized to 300x300. Here is an example of what the code looks like:
var ctx = canvas.getContext('2d'); var mychart = new Chart( ctx ,{ ....
}); canvas.removeAttribute("style");
The canvas.removeAttribute removes the inline style tag, so then the css class
takes effect and instantly causes the canvas to re-render at the smaller size. There is no flash or any indication that this has happened, yet I've found that you get a much higher quality looking chart.
There is one other issue with this. You will have to design your chart for the larger 600x600 size for example in order to get it to look right. When you draw the chart at a larger size, the lines and fonts don't get resized so everything looks really tiny. I had to set my chart manually to the larger size to design it and figure out good fonts and line sizes for the graph first, and then do the resize trick here.
I have also found that simply using the smaller sized chart and making thicker lines or larger fonts does not seem to have the same effect as sizing everything up first, and then rendering it as a smaller size.
the vertical scroll-bar on my table hovers over my data. I cannot seem to move the vertical scroll-bar nor can I change the width of the table. I even tried left aligning the text on my 2nd column but nothing happens.
This is my table:
I have to scroll across to see all my data:
Is there a way to see the full width of my table and not have the vertical scroll bar hover over my 2nd column?
this is the code:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", { packages: ["table"] });
google.setOnLoadCallback(drawTable);
function drawTable() {
var data = google.visualization.arrayToDataTable([
['Researcher Name', 'Number of Submissions'],
#Html.Raw(rows)]);
var options = {
title: ''
};
var dashboard = new google.visualization.Dashboard(document.querySelector('#dashboard'));
var stringFilter = new google.visualization.ControlWrapper({
controlType: 'StringFilter',
containerId: 'string_filter_div',
options: {
filterColumnIndex: 0
}
});
var table = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'table_div',
options: {
showRowNumber: false
}
});
dashboard.bind([stringFilter], [table]);
dashboard.draw(data);
}
google.load('visualization', '1', { packages: ['controls'], callback: drawTable });
</script>
<div id="dashboard">
<div id="string_filter_div"></div>
<div style="height:450px" id="table_div"></div>
</div>
I was getting exactly the same problem as you and ended up solving it by adding paging options to the table. Now I never get a vertical scroll bar.
page: 'enable',
pageSize: 27
The table chart usually does a good job with just the defaults.
Try removing style="height:450px" from your div.
To get the table headings to wrap, you can assign a css class name to headerCell, it can be blank.
cssClassNames: {headerCell: 'googleHeaderCell'}
Add this css class somewhere on your page...
.googleHeaderCell {}
Otherwise, you should be able to set a distinct height and width, directly in your options. Just remember to remove it from the div, as mentioned previously. Unless other content on the page is crowding the table...
options = {
cssClassNames: {headerCell: 'googleHeaderCell'}, // be sure to add css
height: 600, // no px needed
width: 800
};
For the width of the table, you can assign width either in the div itself or in the table option like:
options = {
width: 800
};
always try to keep the height:auto in the div section, so that height of the table can get the default table content. If you are getting overflow in the scrollbar and try to get rid of it, you can use a CSS
divElement(id/class){
overflow:hidden;// for both horizontal and vertical scrolls
or
overflow-x:hidden;// for horizontal scroll
or
overflow-y:hidden;// for vertical scroll
}
To keep the text left or right aligned inside the table cell you can use CSS in the table option itself:
.align-text{ //class name
text-align:left/right;}
var cssClass= {
'tableCell': 'align-text',
};
/**** table option ****/
options = {
cssClassNames: cssClass,
width: 800};
I have a Google chart that is set to 500px by 500px, yet returns 400px by 200px. I have looked at the div, and it shows 500x500. I have no reason for why the chart comes back at 400x200. the div shows 500x500, but the SVG rectangle box shows 400x200, making all of the images smaller.
Is there a setting I don't know?
<div class="span5">
<div id="qual_div" style="border:1px black solid;margin:0px;padding:0px;height:500px;width:500px"></div>
</div>
<script type="text/javascript">
var data, options, chart;
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
data = google.visualization.arrayToDataTable([
['Qual', 'Stat'],
['Patient Satisfaction', {{ $stats->attributes['sa_ptsatisfaction'] }}],
['Medical Knowledge', {{ $stats->attributes['sa_medknowledge'] }}],
['ER Procedural Skills', {{ $stats->attributes['sa_erprocskills'] }}],
['Nurse Relationship Skills', {{ $stats->attributes['sa_nrsrltnshpskls'] }}],
['Speed', {{ $stats->attributes['sa_speed'] }}],
['Compassion', {{ $stats->attributes['sa_compassion'] }}],
['EMR Utilization Skills', {{ $stats->attributes['sa_emr'] }}],
['Profession Teamwork Skills', {{ $stats->attributes['sa_proftmwrkskills'] }}]
]);
options = {
title: 'My Daily Activities'
,chartArea:{left:0,top:0,width:"100%",height:"100%"}
};
chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
function adjustChart(nm, vl) {
for (var r=0; r<data.D.length; r++) {
if (data.D[r].c[0].v == nm) {
data.D[r].c[1].v = parseInt(vl);
break;
}
}
chart.draw(data, options);
}
</script>
There are several ways to set the size of a chart.
The first is to set the size of the element that contains it. The chart will default to the width and height of the containing element (see Google Visualization documentation for default values of height/width).
The second is to not define the actual size of the element, and instead set the height/width of the chart to 500px each manually by adding those to your options:
options = {
title: 'My Daily Activities'
,chartArea:{left:0,top:0,width:"100%",height:"100%"}
,height: 500
,width: 500
};
What you are actually doing in your code is setting the size of the chart plot itself (not of the overall chart element with the axes, labels, and legend). This will cause the chart plot area to become 500px by 500px if you point to the appropriate div as pointed out by #Dr.Molle in the comments.
Assuming you don't want that, your new options would be:
options = {
title: 'My Daily Activities'
,height: 500
,width: 500
};
So setting the height and width as in jmac's answer works, but if you want it responsive there is some additional things I had to do.
But just to back up a second the reason I am having this problem in the 1st place is:
The div that this chart is displaying in is not visible when the page loads.
As Seen here the hidden Chart Width is Wrong 400 by 200: jsfiddle.net/muc7ejn3/6/
As Seen here the hidden Chart Width is Correct: jsfiddle.net/muc7ejn3/7/
Another way to do it is just to Un-hide the Chart right before chart.draw() is called, then Hide it again, something like:
tempShowChart();
chart.draw(view, options);
hideChartAgain();
This doesn't handle window being resized.
I have the same case that the rendered graph has a size of 400 x 200px
After being rendered the svg is wrapped inside 3 divs
<div id="gantt-chart" class="svelte-ql38wl">
<div style="position: relative; width: 400px; height: 200px;">
<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;">
<svg width="400" height="200"><defs></defs><g><rect x="0" y="0" width="400" height="200" fill="#ffffff"></svg>
</div>
</div>
</div>
own container set with chart = new google.visualization.Gantt(document.getElementById('gantt-chart'));
generated outer wrapper div - width & height set > where? seems to be synced with the svg size
generated inner wrapper div - chart area?
svg
The inner wrapper div looks like the chart area. Unfortunately changing the values in the options has no effet - always stays 'left: 0px; top: 0px; width: 100%; height: 100%;'
NOTICE I'm drawing a Google Gantt Chart - looks like not all charts have the same possible settings. I find the chartArea option under e.g. 'Column Charts', but it's not listed with 'Gantt Charts'
The main chart documentation says
You can specify the chart size in two places:
Specifying the size in HTML - A chart can take a few seconds to load
and render. If you have the chart container already sized in HTML, the
page layout won't jump around when the chart is loaded.
Specifying the size as a chart option - If the chart size is in the JavaScript, you
can copy and paste, or serialize, save, and restore the JavaScript and
have the chart resized consistently.
If you don't specify a chart size either in the HTML or as an option, the chart might not be rendered properly.
Since it looks like the chart size can only be set as a number for pixels (with the gantt chart again - I saw other examples where it seemed to be possible to set percentage...) in my case these settings helped
set css of container div + generated children
programmatically set height of chart via js
#gantt-chart {
width: 100%;
height: 100%;
display: flex;
overflow: auto;
}
#gantt-chart div {
margin: auto; /* centers chart inside container div with display:flex*/
}
let trackHeight = 30
let options = {
height: dataTable.getNumberOfRows() * trackHeight + 50
// width adaps to container div with 100% width
}