I have a data of voltages from last one month. The zingchart grapht y-axis is inconsistent. What might be the issue?
Chart image
Submitting Requests
In the future we suggest adding a chart JSON to your question so we can create a demo for your solution. You can read more about gettin your chart JSON here.
Solution
You have series values input as Strings. You can do two things.
make the values Numbers and NOT Strings
Keep the values as Strings and add zingchart.QUOTEDVALUES = true before the zingchart.render method. This tells ZingChart you intentionally set Strings for values. There are benefits and use cases for using String values so the default is to have this turned set to false.
Demo here: https://app.zingsoft.com/demos/embed/OIJAJIA7
// window.onload event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
// Javascript code to execute after DOM content
// full ZingChart schema can be found here:
// https://www.zingchart.com/docs/api/json-configuration/
let chartConfig = {
gui: {
contextMenu: {
button: {
visible: false
}
}
},
globals: {
shadow: false,
fontFamily: 'Helvetica'
},
type: 'area',
legend: {
layout: 'x4',
marker: {
borderRadius: '50px',
borderColor: 'transparent'
},
item: {
fontColor: 'white'
},
backgroundColor: 'transparent',
borderColor: 'transparent'
},
tooltip: {
visible: false
},
plot: {
aspect: 'spline',
marker: {
visible: false
},
lineWidth: '2px'
},
// values are strings
series: [{
text: 'Cell Two (V) Optimum 8V',
backgroundColor1: '#77d9f8',
values: ['0.286907020873', '0.300569259962', '0.300569259962', '0.286907020873','0.286957020873' ],
backgroundColor2: '#272822',
lineColor: '#40beeb',
palette: 1
}],
backgroundColor: '#434343',
scaleX: {
transform: {
type: 'date'
},
values: ['2019/08/05 10:27', '2019/08/05 10:42', '2019/08/05 10:55', '2019/08/05 10:58', '2019/08/05 11:01'],
zooming: true,
tick: {
lineColor: 'white',
lineWidth: '1px'
},
item: {
fontColor: 'white'
},
guide: {
visible: false
},
maxItems: 8,
lineColor: 'white',
lineWidth: '1px'
},
scaleY: {
tick: {
lineColor: 'white',
lineWidth: '1px'
},
guide: {
lineStyle: 'solid',
lineColor: '#626262'
},
item: {
visible: true,
fontColor: 'white'
},
lineColor: 'white',
lineWidth: '1px'
},
crosshairX: {
scaleLabel: {
backgroundColor: '#fff',
fontColor: 'black'
},
plotLabel: {
_text: 'Number of hits : %v',
backgroundColor: '#434343',
fontColor: '#FFF'
}
}
};
zingchart.QUOTEDVALUES = true;
zingchart.render({
id: 'myChart',
width: '100%',
height: '100%',
data: chartConfig
});
});
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.chart--container {
min-height: 150px;
width: 100%;
height: 100%;
}
.zc-ref {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<!-- CHART CONTAINER -->
<div id="myChart" class="chart--container">
<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
</div>
</body>
</html>
Related
Chart.js doughnut text visibility. Tell me how to make it so that when the values intersect, the text comes out and changes its position.
const myChart = new Chart(canvas,
{
type: 'doughnut',
data: {
labels: dataNameDB,
datasets: [{
data: dataCountDB,
backgroundColor: backgroundColor,
borderWidth: 0,
}],
},
plugins: [ChartDataLabels, DoughnutLabel],
options: {
cutout: 340,
responsive: true,
animation: false,
plugins: {
legend: {
display: false,
},
datalabels: {
formatter: (val, ctx) => {
return Math.round((ctx.chart.data.datasets[0].data[ctx.dataIndex] * 100) / summChart()) + "%";
},
display: (val,ctx) =>{
return 'auto';
},
clamp: true,
clip: true,
anchor: 'center',
align: 'center',
offset: 1,
font: {
size: 65,
weight: 'bold',
color: '000000'
},
color: '000000',
labels: {
value: {
color: '#000000'
}
}
},
doughnutlabel: {
labels: [{
text: summChart,
font: {
size: 140,
weight: 'bold',
color: '000000'
}
}]
}
}
}
},
);
Now it outputs something like this, but I need it to be like this:
Although the documentation says that display 'auto' is responsible for this, how to catch it when the text is hidden in order to move it?
How can I change the x and y co-ordinates of text in react-google-charts?
vAxis: {
textStyle: {
fontSize: 12,
color: "#232323",
marginRight: 10,
},
},
hAxis: {
textStyle: {
slantedTextAngle: 90
},
}
{
legend: { position: "bottom" },
colors: ["#01B8FF", "#EB6F33", "#03C895"],
chartArea: { width: "40%", height: "70%" },
isStacked: true,
bar: {groupWidth: '30'},
vAxis: {
textStyle: {
fontSize: 12,
color: "#232323",
},
},
};
This properties can be used to create a horizontal stacked chart.
I am trying to use google react pie chart however I am having a hard time position the title.
Here is my code:
const pieOptions = {
title: 'my awesome chart',
pieHole: 0.6,
slices: [
{
color: '#00a3e0',
},
{
color: '#f2a900',
},
{
color: 'F16A21',
},
{
color: '#e9a227',
},
],
legend: {
position: 'right',
alignment: 'center',
textStyle: {
color: '233238',
fontSize: 14,
},
},
tooltip: {
showColorCode: true,
},
// chartArea: {
// left: 0,
// top: 0,
// width: '100%',
// height: '70%',
// },
fontName: 'Roboto',
fontSize: 20,
}
<Chart
chartType="PieChart"
data={[
['Item', 'Numbers'],
['Item 1', 5000],
['Item 2', 20000],
['Item 3', 6000],
]}
options={pieOptions}
graph_id="PieChart"
width={'100%'}
height={'220px'}
legend_toggle
/>
Here is what I get:
My desired result is to put the title above the legend but I am clueless how to do so.
Here is a link to the npm package I am using:
https://github.com/RakanNimer/react-google-charts#donut-chart
https://github.com/rakannimer/react-google-charts/blob/master/sandboxes/pie-chart/index.js
It doesn't seem that there is a way to position the title. You'll have to set titlePosition: 'none' and create a title separately and style it how you want instead.
Read more at the docs.
I am trying to create a graph using ChartJS2 in one of our application; where we are using AngularJS 1.x along with RequireJS. So for that we have used ChartJs 2.7.0
When I try to implement our requirement, I'm facing an abnormal issue where
When I define x axes type as linear then the annotation(vertical line) doesn't get displayed on the graph, as displayed in the attached image: when type: 'linear'
And When I comment the line axes(X) type as linear then only annotation(vertical line) gets displayed but the graph doesn't get displayed at all as shown in the attached image: when commented the line type: 'linear'
My HTML Code is as follows:
<canvas style='height: 350px; width: 400px;' id="line" class="chart chart-line" chart-data="ourFixData.data"
chart-labels="ourFixData.labels" chart-series="ourFixData.series" chart-options="ourFixData.options" chart-colors="ourFixData.colors"
chart-dataset-override="ourFixData.datasetOverride"></canvas>
And my controller code is as follows:
'use strict';
define(['app'], function (app) {
app.register.controller("demoCtrl", function ($scope) {
$scope.data = [];
$scope.ourFixData = {};
$scope.ourFixData.lineAtPoint = 2.20;
$scope.ourFixData.colors = ['#399c5f', '#399c5f', '#399c5f'];
$scope.ourFixData.labels = [0, 0.5, 1.5, 2.5, 5, 7.5, 12.5, 17.5, 27.5];
$scope.ourFixData.series = ['Invites Available'];
var dashArr = [,,,,4,5,6,7,8];
var mainArr = [0,1,2,3,4,,,,];
$scope.ourFixData.data = [
dashArr,
mainArr
];
$scope.ourFixData.onClick = function (points, evt) {
console.log(points, evt);
};
$scope.ourFixData.datasetOverride = [
{
data: dashArr,
borderColor: '#399c5f',
borderDash: [2,4],
borderWidth: 2,
pointBackgroundColor : '#399c5f',
fill: false
}, {
data: mainArr,
borderColor: '#399c5f',
borderWidth: 2,
pointBackgroundColor : '#399c5f',
fill: false
}
];
$scope.ourFixData.options = {
title: {
fontFamily: "Open Sans",
text: "Invite Graph"
},
scales: {
xAxes: [
{
id: 'x-axis-0',
display: true,
// ***** This is where I'm facing issues
type: 'linear', // When commented annotation doesn't get displayed
position: 'bottom',
scaleLabel: {
fontFamily: "Open Sans",
display: true,
labelString: 'Turn-Over in Lakh Rupees'
}
}
],
yAxes: [
{
id: 'y-axis-0',
display: true,
position: 'left',
scaleLabel: {
fontFamily: "Open Sans",
display: true,
labelString: 'Invites Available'
}
}
]
},
annotation: {
drawTime: 'afterDatasetsDraw',
annotations: [
{
type: 'line',
id: 'hline',
mode: 'vertical',
scaleID: 'x-axis-0',
value: $scope.ourFixData.lineAtPoint, // data-value at which the line is drawn
borderWidth: 1,
borderColor: 'blue',
borderDash: [4,5],
display: true,
title: "Current",
enabled: true,
label: {
fontFamily: "Open Sans",
backgroundColor: "blue",
content: $scope.ourFixData.lineAtPoint + " Lacks",
enabled: true,
position: 'top'
}
}
]
}
};
});
});
Any kind of help would be appreciated. Thanks in advance.
I'm not able to align the text to center.
HTML code
<zingchart id="ring" zc-json="data" ></zingchart>
zingchart json data
$scope.data = {
globals: {
shadow: false,
fontFamily: "Verdana",
fontWeight: "100"
},
type: "ring",
backgroundColor: "#fff",
legend: {
layout: "x5",
position: "50%",
borderColor: "transparent",
marker: {
borderRadius: 10,
borderColor: "transparent"
}
},
tooltip: {
text: "%v $"
},
plot: {
refAngle: "-90",
borderWidth: "0px",
valueBox: {
placement: "in",
text: "%npv %",
"font-color":"black",
fontSize: "15px",
textAlpha: 1,
}
},
series: [{
text: "Total Billed",
values: $scope.billedHours,
backgroundColor: "#97c563",
}, {
text: "Total Budget",
values: $scope.projectRevenue,
backgroundColor: "#f7d347",
}]
};
I'm using this Libary for the very first time, tried different options but nothing happend.
need help from experts, please suggest something.
thanks in advance.
I tried this in my project and this should do the trick, just replace your legend property with this.
If I am right you can also use layout: "center"
legend: {
layout: "2x2", //this should center it on mid
position: "50%",
borderColor: "transparent",
marker: {
borderRadius: 10,
borderColor: "transparent"
}
},
To align the legend center you can use the attribute align:center. We have extensive documentation at the following links:
Legend Tutorial
Legend JSON Docs
var myConfig = {
type: 'pie',
plot: {
layout: 'auto'
},
legend: {
layout: "x5",
align: 'center',
borderColor: "transparent",
marker: {
borderRadius: 10,
borderColor: "transparent"
}
},
series: [
{
values: [35]
},
{
values: [25]
},
{
values: [15]
},
{
values: [45]
},
{
values: [75]
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
height:100%;
width:100%;
min-height:150px;
}
.zc-ref {
display:none;
}
<!DOCTYPE html>
<html>
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
</body>
</html>