I am using primeng pie chart , line chart , bar chart in my application. I was able to change the width and height before updating the primeng version to "primeng": "^5.2.0-rc.1".
It was working fine in the earlier version. After updating the version, width and height of these charts are not working. Can you please help me resolve this issue?
html:
<p-chart type="pie" [data]="piedata" [width]="600" [height]="600" [options]="pieOptions"></p-chart>
component.ts
this.piedata = {
labels: this.chartGroupList,
datasets: [{
data: this.itemCountList,
backgroundColor:this.itemColorList,
hoverBackgroundColor:this.itemColorList
}]
};
pieOptions = {
responsive: false,
maintainAspectRatio: false,
};
It worked after removing the [options].
<p-chart type="pie" width="550px" height="550px" [data]="piedata"></p-chart>
Related
Could someone please help me to put a text inside a Donut Chart in NativeScript? I use Nativescript-Vue with standard plugin nativescript-ui-chart. In the documentation there is an example of a Donut Chart with a text inside, like a calculated value from the series. I cannot find a way to build the same of any live example of it.
Example: Text inside Donut Chart
Here is my code of Donut Chart:
<RadPieChart allowAnimation="true" row="1" column="0" height="200">
<DonutSeries v-tkPieSeries
seriesName="chartExample"
selectionMode="DataPoint"
expandRadius="0.4"
outerRadiusFactor="1"
innerRadiusFactor="0.6"
valueProperty="value"
legendLabel="name"
showLabels="false"
:items="chartItems" />
</RadPieChart>
<script>
export default {
props: {
chartData: {
type: Object,
required: false,
default: undefined
},
},
computed: {
chartItems() {
return [ { name: 'front', value: this.chartData.front }, { name: 'front left', value: 100 - this.chartData.front } ]
}
}
</script>
You can use a GridLayout to stack things on the z index, and put your text either to the front or behind the pie chart.
GridLayout stacks its contents by the order it is defined - the one towards the bottom of the layout will be stacked higher. For example, in the code below, since Label is defined after RadPieChart, it will be positioned above the chart.
<GridLayout rows="auto" columns="auto">
<RadPieChart allowAnimation="true" row="1" column="0" height="200">
<DonutSeries v-tkPieSeries
seriesName="chartExample"
selectionMode="DataPoint"
expandRadius="0.4"
outerRadiusFactor="1"
innerRadiusFactor="0.6"
valueProperty="value"
legendLabel="name"
showLabels="false"
:items="chartItems" />
</RadPieChart>
<!-- whatever text you want to put inside the chart -->
<Label text="Your text here"></Label>
</GridLayout>
I am working on a dual-y axis line chart and am trying to show the data in x axis in reverse order.
The direction attribute dont seem to be working for me.
original - https://jsfiddle.net/api/post/library/pure/
here is my change - https://jsfiddle.net/3m8vjows/
I have tried to give the direction to the x axis as below. But is not working.
var materialOptions = {
chart: {
title: 'Average Temperatures and Daylight in Iceland Throughout the Year'
},
width: 900,
height: 500,
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {axis: 'Temps'},
1: {axis: 'Daylight'}
},
axes: {
// Adds labels to each axis; they don't have to match the axis names.
y: {
Temps: {label: 'Temps (Celsius)'},
Daylight: {label: 'Daylight'}
},
x:{direction:'-1'}
}
};
the following config option is not supported by material charts
{hAxis,vAxis,hAxes.*,vAxes.*}.direction
there are several options material charts do not support,
see --> Tracking Issue for Material Chart Feature Parity
material = google.charts.Line & packages: ['line']
classic = google.visualization.LineChart & packages: ['corechart']
there is an option you can use to make classic charts look similar to material
theme: 'material'
if you choose to use classic instead...
I have created a bar chart using google charts, this is a CORE Chart
I have tried getting the bar chart to change colours and adding an additional tooltip information to it, so that the tooltip shows a bit more information
I have gone through the google documentation and i cant see what i am doing wrong
For easy reading this is the output of my code on the source
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var exams = [["Date", "Score",({type: 'string', role: 'tooltip'})], ["18 Oct", 39,"TEST"], ["26 Oct", 20,"TEST"], ["26 Oct", 0,"TEST"], ["27 Oct", 0,"TEST"], ["27 Oct", 0,"TEST"]];
if(exams.length > 1){
var data = google.visualization.arrayToDataTable(exams);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1]);
var options = {
title: "Results",
width: 1170,
height: 700,
bar: {groupWidth: "95%"},
legend: { position: "none" }
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
}
else{
$("#columnchart_values").html('No Data found to show graph');
}
}
This is the google documentation i have been following, its slightly different
to mine as i am getting my data from a database, but it should give the same output.
I have gone through many examples and i am replicating them as close as possible and just not having any luck
https://developers.google.com/chart/interactive/docs/customizing_tooltip_content
I also have the exact same problem with color, i cant get colors on bar charts to change both having the same problem that it just doesn't do anything
Am i missing something??
the tooltip column is not being included in the data view.
view.setColumns([0, 1]);
to add the tooltip...
view.setColumns([0, 1, 2]);
How to add values(space) from the right side
like here
enter image description here
my code here
https://jsfiddle.net/ruit/esv6t6f2/
You can add an attribute 'spacingRight' like this in your chart array:
// Create the chart
chart = $('#container').highcharts('StockChart', {
chart: {
spacingRight: 100,
Can I create these types of charts using Google charts where I can set the target at top also.
Are these charts bar type. I didn't find anything which can make bar charts like this or is this a completely different chart type.
Edit
I found the solution at Google Chart Tools - How to create stacked bar chart. These are stacked bar charts. but still I didn't find how to put target at the top
Use a ComboChart, and set the series.<series index>.type option to 'bars' for the "Pending", "Loss", and "Won" series. Set the series.<series index>.type to 'steppedArea' and series.<series index>.opacity to 0 for the "Target" series. Set the connectSteps option to false. Here's one way to do it, assuming your data is in the order "Won", "Loss", "Pending", "Target":
var chart = new google.visualization.ComboChart(document.querySelector('#chart_div'));
chart.draw(data, {
height: 400,
width: 600,
isStacked: true,
connectSteps: false,
series: {
0: {
// Won
type: 'bars'
},
1: {
// Loss
type: 'bars'
},
2: {
// Pending
type: 'bars'
},
3: {
// Target
type: 'steppedArea',
areaOpacity: 0
}
}
});