I'm new one of echarts, I need to set the text in centre of donuts chart. I tried and google it no use, I tried it by html also but I cant able to achieve it. Please any one suggest me, How can I resolved it. Thanks in advance.
In options I add the total in title but I need to show that one into centre.
var myChart = echarts.init(document.getElementById('pieChart1'));
var idx = 1;
pieChartOption = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
title: {
text: "Total "+10+"%",
left: 'center'
},
series: [
{
name: 'Test one',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: true,
label: {
show: true,
color: '#000',
fontSize: '80',
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: 10, name: 'Success', itemStyle : {normal : {label : { show : false},labelLine : { show : false}, color: '#5E50A1'}}},
{value: 20, name:'Failed', itemStyle : {normal : {label : { show : false},labelLine : { show : false}, color: '#FFB200'}}},
{value: 30,name:'Onprocess', itemStyle : {normal : {label : { show : false},labelLine : { show : false}, color: '#FF434F'}}}
]
}
]
}
myChart.setOption(pieChartOption);
<html lang="en">
<head>
<meta charset="utf-8">
<title>Using ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小的Dom-->
<div id="pieChart1" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
</body>
<!--引入echarts. Using echarts-all.js for convenience -->
<!-- CDN is taken from https://cdnjs.com/libraries/echarts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/2.2.7/echarts-all.js"></script>
</html>
As far as I understand, you do not plan to place labels in the center, only the total, right? In this case the most simple option it is a markPoint (see live example):
series: [{
// ...
markPoint: {
tooltip: { show: false },
label: {
show: true,
formatter: '{b}',
color: 'black',
fontSize: 20,
},
data: [{
name: 'Total 10%',
value: '-',
symbol: 'circle',
itemStyle: { color: 'transparent' },
x: '50%',
y: '50%',
}],
},
// ...
}]
P.S. Library that you included in example is very strange (copyrights?, binary data?) and distort default behaviour. Please don't use them, take the any pack from the repo instead https://www.jsdelivr.com/package/npm/echarts?path=dist
You can use the graphic property, like this:
https://jsfiddle.net/motz75an/
graphic: {
elements: [{
type: 'text',
left: 'center',
top: 'middle',
z: 999,
style: {
text: `Total 10%`,
textAlign: 'center',
fontSize: 26,
}
}]
},
Related
I am building an echarts scatter graph that contains 6 points. I would like to manually assign a label to each point, like I did with the label of X and Y axis.
Is there a way to achieve this? I searched in Apache Echarts docs but I did not find any useful setting for assigning a label to "data" values.
Here is the source code of my graph:
option = {
xAxis: {
data: ['Low', 'Med', 'High'],
name: "Value",
},
yAxis: {
min: '5',
name: "Score",
},
series: [
{
type: 'scatter',
symbolSize: 20,
data: [
[2,9.8],
[1,8.8],
[2,5.9],
[1,9.8],
[1,10.0],
[3,9.8],
[2,10.0],
[1,9.8],
[2,5.9],
[1,9.8]
],
label: {
show: true,
position: 'right',
color: "black",
fontSize: 16,
},
}
],
grid:{
show: true,
backgroundColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(255, 102, 102)'
},
{
offset: 1,
color: 'rgb(153, 255, 153)'
}])
},
};
You could specify the labels as an additional value in the data array:
data: [
[ 2, 9.8, "label1" ],
[ 1, 8.8, "label2" ],
...
Then use a formatter function in your label definition, to select the third element of the data array as the label:
label: {
...
formatter: function(d) {
return d.data[2];
}
I also found this solution, working as well as Chris one:
series: [
{
type: 'scatter',
symbolSize: 15,
data: [
{value: [2,9.8] , name: 'value1'},
{value: [1,8.8] , name: 'value2'},
{value: [2,5.9] , name: 'value3'},
],
label: {
show: true,
position: 'right',
formatter: params => params.name,
color: "black",
fontSize: 16,
},
In the example below the y-axis crosses at 1, rather than 0. Is there a way to achieve this in echarts?
It seems to me, literally, you can't do this with basic bar chart because it will break the coordinate system and result will be anything but not a bar chart.
If you need only visual like on attached picture then you can hide xAxis and draw its surrogate with markLine but you will have the troubles with bar positioning (that will fix with stack and transparent bars, see below).
If you need real chart with responsive, zoomable and other opts then in the Echarts you can use custom series for build own chart type (see example).
Example how to make picture like attached:
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip: {},
xAxis: {
data: ['Category-1', 'Category-2', 'Category-3', 'Category-4'],
show: true,
axisLine: {
show: true,
lineStyle: {
opacity: 0
}
},
axisTick: {
show: false,
}
},
yAxis: {
max: 4,
min: -1
},
series: [{
name: 'Series-1',
type: 'bar',
stack: 'group',
data: [1, 1, -3],
color: 'rgba(0,0,0, 0)',
}, {
name: 'Series-2',
type: 'bar',
stack: 'group',
data: [{
value: 1,
itemStyle: {
color: 'red'
}
}, {
value: 2,
itemStyle: {
color: 'green'
}
}, {
value: 1,
itemStyle: {
color: 'orange'
}
}],
markLine: {
symbol: "none",
data: [{
silent: false,
yAxis: 1,
lineStyle: {
color: "#000",
width: 1,
type: "solid"
}
}, ],
label: {
show: false,
}
},
}]
};
myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts#4.8.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
P.S. If this not a secret, why you need it?
I am using Highcharts, but my question is in general. I want to know which chart is a perfect match to show change in values between 2 dates.
E.g The lending rate e.g
29-Aug : 21.2
30-Aug : 21.3
The change is 0.1 million.
Which chart type should i choose to show this little difference clearly noticeable .?
If you're comparing two dates/values, I would recommend using a bar chart. (If you're comparing values over months or years, I would suggest using a line or area chart.) You can better emphasize the difference between the two lending rate values by specifying the minimum, maximum, and step scale values so that the 0.1 million difference can be clearly illustrated. See the below demo:
var myConfig = {
type: 'bar',
title: {
text: 'Lending Rate',
fontFamily: 'Georgia'
},
utc: true,
timezone: 0,
scaleX: {
transform: {
type: 'date',
all: '%M %d, %Y'
},
step: 86400000,
item: {
fontSize: 10
}
},
scaleY: {
values: '21.1:21.4:0.1',
format: '%vM',
decimals: 1,
item: {
fontSize: 10
},
guide: {
lineStyle: 'dotted'
}
},
plot: {
barWidth: '50%',
borderWidth: 1,
borderColor: 'gray',
backgroundColor: '#99ccff',
valueBox: {
text: '%v million',
fontSize: 12,
fontColor: 'gray',
fontWeight: 'normal'
},
tooltip: {
text: '%v million'
}
},
series: [
{
values: [
[1472428800000, 21.2],
[1472515200000, 21.3],
]
}
]
};
zingchart.render({
id : 'myChart',
data : myConfig,
height: 400,
width: 600
});
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
<div id='myChart'></div>
For more on scale customization and formatting, see this X/Y-Axis Scales Tutorial. The value boxes and tooltips can also be used to provide further information about the node values.
Hope that helps. I'm a member of the ZingChart team, and happy to answer further questions.
A simple bar chart with data labels to indicate the respective values would be helpful to show users there is a very small change in value.
See the code snippet below. I modified one of the basic Highcharts demos for a bar chart with your example values.
I hope this is helpful for you!
$(function () {
$('#container').highcharts({
chart: { type: 'bar' },
title: { text: 'Sample Chart' },
xAxis: {
categories: ['29-Aug','30-Aug'],
title: { text: null }
},
yAxis: { min: 0 },
tooltip: { valueSuffix: ' million' },
plotOptions: {
bar: {
dataLabels: {
crop: false,
overflow: 'none',
enabled: true,
style: { fontSize: '18px' }
}
}
},
legend: { enabled: false },
credits: { enabled: false },
series: [{
name: 'Sample Series',
data: [21.2,21.3]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width: 450px; height: 250px; margin: 0 auto"></div>
I am using Telerik charts in my project. I am able to change the color of charts but not the style. What i mean by style is - there appears a embossed effect over all the charts(First Image). What i need to apply is flat colors(Second Image). How can i remove gradient effect over charts in all my Kendo charts?
Thanks in advance.
You have to apply Overlay effect. See this Kendo Document
Apply none gradient option and available gradient options are :
roundedBevel (This is the default gradient option)
sharpBevel
none
function createChart() {
$("#chart").kendoChart({
title: {
position: "bottom",
text: "Share of Internet Population Growth, 2007 - 2012"
},
legend: { visible: false },
chartArea: { background: "" },
seriesDefaults: {
labels: {
visible: true, background: "transparent", template: "#= category #: \n #= value#%"
}
},
series: [{
type: "pie",
overlay: { gradient: "none" },
startAngle: 150,
data: [{ category: "Asia", value: 53.8, color: "#9de219" },
{ category: "Europe", value: 16.1, color: "#90cc38" },
{ category: "Latin America", value: 11.3, color: "#068c35" },
{ category: "Africa", value: 9.6, color: "#006634" },
{ category: "Middle East", value: 5.2, color: "#004d38" },
{ category: "North America", value: 3.6, color: "#033939" }]
}],
tooltip: { visible: true, format: "{0}%" }
});
}
$(document).ready(createChart);
<link rel="stylesheet" type="text/css" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.common-material.min.css" />
<link rel="stylesheet" type="text/css" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2016.1.226/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
<div id="chart" ></div>
Please try with the below code snippet. To remove gradient effect you have to set 'overlay: null' in chart.
<div id="chart"></div>
<script>
var data = [
{
"source": "Hydro",
"percentage": 22,
"explode": true
},
{
"source": "Solar",
"percentage": 2
},
{
"source": "Nuclear",
"percentage": 49
},
{
"source": "Wind",
"percentage": 27
}
];
$(document).ready(function () {
$("#chart").kendoChart({
title: {
text: "Break-up of Spain Electricity Production for 2008"
},
legend: {
position: "bottom"
},
dataSource: {
data: data
},
seriesDefaults: {
overlay: {
gradient: null
}
},
series: [{
type: "pie",
field: "percentage",
categoryField: "source",
explodeField: "explode"
}],
seriesColors: ["#03a9f4", "#ff9800", "#fad84a", "#4caf50"],
tooltip: {
visible: true,
template: "${ category } - ${ value }%"
}
});
});
</script>
Let me know if any concern.
the store works fine for the rest of the app but im not able to use that data and plot that data in the graph.
i have done some basic work with the little knowledge i have with charts.
i tried out with other examples which work but im not able to figure out the problem with this.
the console says:Uncaught TypeError: Cannot read property '1' of undefined
i have installed ruby,compass and sass
view:
Ext.define('CSBApp.view.graph', {
extend: 'Ext.chart.CartesianChart',
requires: [
'Ext.TitleBar',
'Ext.chart.CartesianChart',
'Ext.chart.series.Line',
'Ext.chart.axis.Numeric',
'Ext.chart.axis.Category',
'Ext.draw.sprite.Circle',
],
xtype: 'graph',
config: {
flex: 1,
xtype: 'chart',
store: 'mystore',
cls: 'chart',
innerPadding: 10,
animate: true,
series: [
{
type: 'line',
xField: 'date',
yField: 'amount',
title: 'Expenses',
style: {
stroke: '#003366',
lineWidth: 3
},
marker: {
type: 'circle',
stroke: '#003366',
radius: 5,
lineWidth: 3
}
}
],
axes: [
{
type: 'numeric',
position: 'left',
title: {
fontSize: 15,
text: 'Amount'
},
grid: {
even: {
fill: '#f9f9f9'
}
}
},
{
type: 'numeric',
position: 'bottom',
title: {
fontSize: 15,
text: 'date'
},
grid: {
even: {
fill: '#f9f9f9'
}
}
}
]
}
});
modal:
Ext.define('CSBApp.model.expensemodel',{
extend: 'Ext.data.Model',
config: {
identifier:{
type:'uuid'
},
fields: [
{
name:'desc',
type:'string'
},
{
name: 'amount',
type:'number'
},
{
name: 'date',
type:'date',
defaultformat: 'Y-m-d'
},
],
// autoLoad : true
}
});
store:
Ext.define('CSBApp.store.mystore',{
extend : 'Ext.data.Store',
config : {
model : 'CSBApp.model.expensemodel',
storeId : 'mysqlstore',
proxy : {
type : 'sql',
id : 'mystore',
reader: {
type: "sql"
}
},
autoLoad : true
}
});
i have kind of figured it out.
the basic problem resides in the view and how it calls the store.
so the app seems to work fine with the sql store.
the main factor is that the 'requires' files have to be correct.
here is the view:
Ext.define('CSBApp.view.graph', {
extend: 'Ext.chart.CartesianChart',
xtype: 'graph',
requires: [
'Ext.chart.series.Line',
'Ext.chart.axis.Numeric',
'Ext.chart.axis.Category',
'Ext.chart.CartesianChart',
'Ext.chart.axis.layout.CombineDuplicate',
'Ext.chart.axis.segmenter.Names'
],
config: {
store:'mysqlstore' ,
width : '100%',
layout:'fit',
axes: [{
type: 'numeric',
position: 'left',
title: {
text: 'Sample Values',
fontSize: 15
},
minimum:0,
fields: 'amount'
},
{
type: 'category',
position: 'bottom',
title: {
text: 'Sample Values',
fontSize: 15
},
fields: 'date',
minimum:0,
}],
series: [{
type: 'line',
xField: 'date',
yField: 'amount',
minimum:0,
style: {
stroke: '#003366',
lineWidth: 3
},
marker: {
type: 'circle',
stroke: '#003366',
radius: 5,
lineWidth: 3,
}
}
}]
}
});
this is pretty correct if you get the store rite.