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.
Related
I try to implement flutter chart with high_chart: ^2.0.3 library.
When come to the implement the navigator its not showing on the chart. I enable the navigator but
Chart only show like this.
navigator: {
enabled: true
},
What i looking for get like this.
I add the chart data string like this.
final String _chartData = '''{
chart: {
type: 'spline'
},
title: {
text: 'Snow depth at Vikjafjellet, Norway'
},
subtitle: {
text: 'Irregular time data in Highcharts JS'
},
navigator: {
enabled: true
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Snow depth (m)'
},
min: 0
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
},
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
series: [{
name: 'Winter 2007-2008',
data: [
[Date.UTC(1970, 9, 27), 0 ],
//data
]
}, {
name: 'Winter 2008-2009',
data: [
[Date.UTC(1971, 5, 7), 0 ]//data
]
}, {
name: 'Winter 2009-2010',
data: [
[Date.UTC(1970, 9, 9), 0 ],
//data
]
}],
}''';
Also i add this for the index.html file
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
Full source code Here..
You need to load Highstock only, Highcharts is already included in Highstock:
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/series-label.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<script src="https://code.highcharts.com/stock/modules/accessibility.js"></script>
Live demo: http://jsfiddle.net/BlackLabel/hnxvqpyj/
Docs: https://www.highcharts.com/docs/stock/understanding-highcharts-stock
I'm using Chart.js to create a bar char, I have to display the percentage on each bar, so I found the chartjs-plugin-datalabels, but I can't make it work, the documentation and the examples are not clear for me.
This is What I got:
HTML:
<canvas id="bar-chart" width="800" height="450"></canvas>
Javascript:
// Bar chart
var valuedata= [2478,5267,734,784,433];
var valuelabel=["Africa", "Asia", "Europe", "Latin America", "North America"];
var myBarChart = new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
labels: valuelabel,
datasets: [
{
label: "Population (millions)",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: valuedata,
}
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'Predicted world population (millions) in 2050'
},
scales: {
xAxes: [{
gridLines: {
display:false
}
}],
yAxes: [{
gridLines: {
display:false,
drawBorder: false
},
ticks: {
display: false
}
}]
},
plugins: {
datalabels: {
color: 'white',
display: function(context) {
console.log("Algo: "+context);
return context.dataset.data[context.dataIndex] > 15;
},
font: {
weight: 'bold'
},
formatter: function(value, context) {
return context.dataIndex + ': ' + Math.round(value*100) + '%';
}
}
}
}
});
myBarChart.update();
Supposedly, from what I get, the "plugin" inside option is the one that let the values to be display, but as I shown in my code above, doesn't work for me, surely I'm missing something but I don't know what, can somebody help me?
Thanks.
Fiddle:
https://jsfiddle.net/s64bq4sw/16/
It was because of the version of the Chartjs I was using, this plugin requieres 2.7.0 or later.
I've got follow chart, wich I made with DevExtreme charts:
// Add your javascript here
$(function() {
var dataSource = [{
argument: '15.06.2016',
sys: 160,
dia: 90
}, {
argument: '16.06.2016',
sys: 170,
dia: 95
}, {
argument: '17.06.2016',
sys: 152,
dia: 91
}];
$("#chartContainer").dxChart({
dataSource: dataSource,
commonSeriesSettings: {
label: {
visible: false,
connector: {
visible: false
}
},
argumentField: "argument",
},
tooltip: {
enabled: true,
customizeTooltip: function(obj) {
return {
text: obj.value + " mmHg"
}
}
},
legend: {
verticalAlignment: "top",
horizontalAlignment: "right"
},
title: {
text: "Hugo Amacher | 15.08.1977 (M)",
subtitle: {
enabled: true,
text: "Ich bin ein Untertitel..."
}
},
export: {
enabled: true,
printingEnabled: true
},
zoomingMode: "all",
scrollingMode: "all",
series: [{
name: "Blutdruck systolisch",
type: "scatter",
valueField: "sys",
axis: "sysAxe",
point: {
color: "black",
symbol: "triangleDown"
}
}, {
name: "Blutdruck diastolisch",
type: "scatter",
valueField: "dia",
axis: "diaAxe",
point: {
color: "black",
symbol: "triangleUp"
}
}],
valueAxis: [{
name: "sysAxe",
title: "Blutdruck systolisch",
position: "left",
max: 170,
min: 140,
label: {
customizeText: function(value) {
return value.value + " mmHg"
}
}
}, {
name: "diaAxe",
title: "Blutdruck diastolisch",
position: "left",
max: 99,
min: 90,
label: {
customizeText: function(value) {
return value.value + " mmHg"
}
}
}]
});
});
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script src="http://cdn3.devexpress.com/jslib/15.2.5/js/dx.chartjs.js"></script>
<div id="chartContainer" style="width:100%; height: 440px"></div>
I've got two different y-axis (systolic and diastolic blood pressure) with two different ranges (sys= 140-170 and dia= 90-99). When you measure the blood pressure of a human, you have to place the systolic value in one scale and the diastolic value in a second. This are two different values but they are still together. And the medical persons must see this, with a vertical connection between the two values something like this:
So they can see fast enough which measured blood pressure values are together and what is the value of each. For us "normal" users this is a little bit confusing, but for the medical persons, doctor and the healthcare it's simply logical. So this is a chart for the healthcare. Is it possible to connect two different points of two series with each other like in the picture?
Thanks and cheers.
This worked for me:
$(function() {
var dataSource = [{
argument: '15.06.2016',
sys: 160,
dia: 90
}, {
argument: '16.06.2016',
sys: 170,
dia: 95
}, {
argument: '17.06.2016',
sys: 152,
dia: 91
}];
$(".chartContainer").dxChart({
dataSource: dataSource,
commonSeriesSettings: {
label: {
visible: false,
connector: {
visible: false
}
},
argumentField: "argument",
},
tooltip: {
enabled: true,
customizeTooltip: function(obj) {
return {
text: obj.highValueText + "/" + obj.lowValueText + " mmHg"
}
}
},
legend: {
visible: false,
verticalAlignment: "top",
horizontalAlignment: "right"
},
title: {
text: "Hugo Amacher | 15.08.1977 (M)",
subtitle: {
enabled: true,
text: "Ich bin ein Untertitel..."
}
},
zoomingMode: "all",
scrollingMode: "all",
series: [{
type: "stock",
lowValueField: "dia",
closeValueField: "dia",
openValueField: "sys",
highValueField: "sys",
}],
valueAxis: [{
name: "bdAxe",
title: "Blutdruck",
position: "left",
label: {
customizeText: function(value) {
return value.value + " mmHg"
}
}
}]
});
});
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script src="http://cdn3.devexpress.com/jslib/15.2.5/js/dx.chartjs.js"></script>
<div class="chartContainer" style="width:100%; height: 440px"></div>
I used the stock chart for this: http://js.devexpress.com/Documentation/ApiReference/Data_Visualization_Widgets/dxChart/Series_Types/StockSeries/?search=stock&version=16_1&approach=Knockout
Thanks & Cheers.
I'm not able to hide rounded circle for the line chart in Kendo ui. I do want to show tooltip value but want to hide circle.
below example is from demo site: http://demos.kendoui.com/dataviz/line-charts/index.html
Even, I don't know what do they call it so that I can find in the document here: http://docs.kendoui.com/api/dataviz/chart
According to the docs, you can set series.markers.visible to false:
http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-series.markers.visible
Additionally you can change their size and shape.
Please try with the below code snippet. Let me know if any concern.
<style>
#chart circle {
display: none !important;
}
</style>
<script>
function createChart() {
$("#chart").kendoChart({
title: {
text: "Gross domestic product growth /GDP annual %/"
},
legend: {
position: "bottom"
},
chartArea: {
background: ""
},
seriesDefaults: {
type: "line"
},
series: [{
name: "India",
data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
}, {
name: "World",
data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
}, {
name: "Russian Federation",
data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3]
}, {
name: "Haiti",
data: [-0.253, 0.362, -3.519, 1.799, 2.252, 3.343, 0.843, 2.877, -5.416, 5.590]
}],
valueAxis: {
labels: {
format: "{0}%"
},
line: {
visible: false
},
axisCrossingValue: -10
},
categoryAxis: {
categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
majorGridLines: {
visible: false
}
},
tooltip: {
visible: false
}
});
}
$(document).ready(createChart);
</script>
I'm creating a pie chart in highcharts.
Does anybody know how to set data labels in two lines?
I'm finding this problem when the data labels are too long.
http://jsfiddle.net/larrytron/fSjnD/
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
maxStaggerLines:1,
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
},
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox jandler glander gramenauer gramen', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
You can simply set width for dataLabels, see: http://jsfiddle.net/Fusher/fSjnD/1/
style: {
width: '100px'
}
You can simply insert in the data labels:
data: [
['Firefox jandler glander <br><b>gramenauer gramen</b>', 45.0],
Note, for some reason, the second line loses the bold formatting unless you addit back in using tags.
http://jsfiddle.net/ZMLSW/