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>
Related
How do I have insert text within the stacked sections of a highcharts stacked bar graph ( https://www.highcharts.com/demo/bar-stacked ).
My graph will really only have two columns, and they'll have the y-axis reversed and displayed as so: https://jsfiddle.net/ogjz9ra0/
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Bananas']
},
colors: ['#1b98ee', '#1366a6'],
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
},
legend: {
reversed: true,
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [4726.78]
}, {
name: 'Brian',
data: [4250.00],
}]
});
What I'd like is to be able to inject text into each of the columns.
https://drive.google.com/file/d/1CDttfeB9mqI5r9voYalsLtEeH0OSs3Ey/view?usp=sharing
I'm still relatively new to HighCharts, so any help would be appreciated.
Thank you all so much again!
I did some googling, and most of the results talk about having the text render inside the bar for non-stacked bar charts. Note that the placing for the problem I'm trying to solve is in the center.
You can use datalabels documentation like this :
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true,
formatter: function() {
// console.log(this) // uncomment this line to see all params available
return 'custom text here'
}
}
}
},
Fiddle
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 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.
I am working on Kendo UI charts.
I want to develop simple chart that allows me to select area and zoom in selected part of the chart.
I could not find it in Kendo UI charts, however its already available in high chart. please have a look here.
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) {
$('#container').highcharts({
chart: {
zoomType: 'x'
},
title: {
text: 'USD to EUR exchange rate over time'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
data: data
}]
});
});
});
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
I want to know, Can I do the same "select on drag" and "zoom selected area" of the chart?
Thank you
Looks like it is planned for the upcoming Q3 release:
http://www.telerik.com/support/whats-new/kendo-ui/roadmap
Chart
The Chart will add the highly anticipated scrolling & zooming
functionality. Users will be able to scroll and zoom on both desktop
and mobile devices—with mouse region selection and pinch gestures
respectively.
Is there a way funnel chart will redraw like pie chart does, when a segment is removed?
Similar to this question redraw pie chart in highchart
http://jsfiddle.net/2Me2z/
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
plotOptions: {
pie: {
showInLegend: true
}
},
legend: {
enabled: true
},
series: [{
data: [20, 30, 30, 20]
}]
});
// button handler
$('#button').click(function() {
var series = chart.series[0];
if (series.data.length) {
chart.series[0].data[0].remove();
}
});
});
So click on any slice in legend will cause the chart to redraw and the remaining slices will take up 100%
Wonder if the same thing can be done for a funnel chart
http://jsfiddle.net/YUL5c/2/
$(function () {
var chart;
$(document).ready(function () {
// Build the chart
$('#container').highcharts({
chart: {
type: 'funnel',
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: {
series: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.01]
]
}]
});
});
});
Currently the segment just disaapear. But the chart does not redraw
Unfortunately this animation is not supported, but I advice to post your request on the uservoice website
point.visible flag is ignored in funnel code.
If adding the check back to the drawing logic things just work magically. Even for the animation.
Not sure if it is a bug or ignored by intention