I want to remove horizontal Gridlines from background of the chart. I am able to remove vertical gridlines successfully.
majorGridLines: { visible: false} hides gridlines for y axes.
If I use same code to hide xAxes gridlines, it wont hide it.
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/bar-charts/multiple-axes">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content wide">
<div id="chart"></div>
</div>
<script>
function createChart() {
$("#chart").kendoChart({
majorGridLines: {
visible: false,
},
legend: {
position: "bottom"
},
series: [ {
type: "column",
data: [2989, 270, 420, 890, 910, 1394, 1444],
stack: true,
name: "Room Revenue",
color: "#4472c3",
majorGridLines: {
visible: false,
},
}, {
type: "line",
data: [23, 5, 6, 22, 20, 16, 40],
name: "Room Sold",
color: "#12ccbe",
axis: "l100km",
majorGridLines: {
visible: false,
},
}],
valueAxes: [{
title: { text: "miles" },
min: 0,
max: 4000,
visible: false,
}, {
// name: "km",
// title: { text: "km" },
min: 0,
max: 161,
majorUnit: 32,
visible: false
}, {
// name: "mpg",
// title: { text: "miles per gallon" },
// color: "#ec5e0a"
visible: false
}, {
name: "l100km",
// title: { text: "liters per 100km" },
color: "#4e4141",
visible: false
}],
majorGridLines: {
visible: false,
},
categoryAxis: {
categories: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
majorGridLines: {
visible: false,
},
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
</div>
</body>
</html>
You just have the majorGridLine setting in the wrong place. Put it in the valueAxis:
function createChart() {
$("#chart").kendoChart({
legend: {
position: "bottom"
},
series: [ {
type: "column",
data: [2989, 270, 420, 890, 910, 1394, 1444],
stack: true,
name: "Room Revenue",
color: "#4472c3",
}, {
type: "line",
data: [23, 5, 6, 22, 20, 16, 40],
name: "Room Sold",
color: "#12ccbe",
axis: "l100km",
}],
valueAxes: [{
title: { text: "miles" },
min: 0,
max: 4000,
visible: false,
majorGridLines: {
visible: false,
},
}, {
// name: "km",
// title: { text: "km" },
min: 0,
max: 161,
majorUnit: 32,
visible: false,
majorGridLines: {
visible: false,
},
}, {
// name: "mpg",
// title: { text: "miles per gallon" },
// color: "#ec5e0a"
visible: false,
majorGridLines: {
visible: false,
},
}, {
name: "l100km",
// title: { text: "liters per 100km" },
color: "#4e4141",
visible: false,
majorGridLines: {
visible: false,
},
}],
categoryAxis: {
categories: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
majorGridLines: {
visible: false,
},
}
});
}
DEMO
did you try using below?
yAxis: {
majorGridLines: {
color: "#aa00bb",
width: 3,
visible: false
}
}
Related
Click here for demo - https://dojo.telerik.com/#rikinshah/EQiMupoG
I have lots of elements for navigation in headers and icon buttons in footer. all of them are using svg > path elements.
I want to change color for all path elements except Kendo Chart which also contains path elements.
In css I use this to make all to use same color :
path {
fill: #4b4c4c
}
but this also changes color for Kendo chart background.
I tried using :not selector for div ID to fill path for kendo and also tried
chartArea: {
background: "#4b4c4c",
},
path: {
fill: "#4b4c4c"},
fill: {
color: "4b4c4c"}
none of this changes path for svg element in kendo graph.
<div id="kendoChart" class="demo-section k-content wide" style="margin-left: -3px;">
<div id="chart"></div>
</div>
function createChart() {
$("#chart").kendoChart({
theme: "flat",
chartArea: {
background: "transparent",
},
legendItemClick: function (e) {
e.preventDefault();
},
seriesDefaults: {
type: "column",
width: 90,
gap: 1,
},
legend: {
position: "bottom",
spacing: 15,
labels: {
font: "12px sans-serif",
color: "#7F7F7F"
},
},
series: [{
data: [parseFloat(($('#room-revenue1').text()).replace(/,/g, "")),
parseFloat(($('#room-revenue2').text()).replace(/,/g, "")),
parseFloat(($('#room-revenue3').text()).replace(/,/g, "")),
parseFloat(($('#room-revenue4').text()).replace(/,/g, "")),
parseFloat(($('#room-revenue5').text()).replace(/,/g, "")),
parseFloat(($('#room-revenue6').text()).replace(/,/g, "")),
parseFloat(($('#room-revenue7').text()).replace(/,/g, "")), ],
name: "Room Revenue",
color: "#4472c3",
width: 500,
tooltip: {
visible: true,
template: "#= series.name #: #= kendo.format('{0:C2}',value) #",
font: "12px sans-serif",
},
}, {
type: "line",
data: [$('#rooms-sold1').text(),
$('#rooms-sold2').text(),
$('#rooms-sold3').text(),
$('#rooms-sold4').text(),
$('#rooms-sold5').text(),
$('#rooms-sold6').text(),
$('#rooms-sold7').text()],
name: "Room Sold",
color: "#12ccbe",
axis: "Rooms Sold",
width: 2,
markers: { visible: true },
tooltip: {
visible: true,
template: "#= series.name #: #= value #",
font: "12px sans-serif",
},
}],
render: function (e) {
var el = e.sender.element;
el.find("text:contains(Room Revenue)")
.parent()
.prev("path")
.attr("stroke-width", 3);
el.find("text:contains(Room Sold)")
.parent()
.prev("path")
.attr("stroke-width", 0);
},
valueAxes: [
{
visible: false,
majorGridLines: {
visible: true,
width: 0.5,
dashType: "solid",
color: "#ededed"
}
},
{
name: "Rooms Sold",
color: "#4e4141",
visible: false,
line: { visible: false },
majorGridLines: {
visible: false
},
}],
categoryAxis: {
categories: [($('#date1').text()).substring(0, 3),
($('#date2').text()).substring(0, 3),
($('#date3').text()).substring(0, 3),
($('#date4').text()).substring(0, 3),
($('#date5').text()).substring(0, 3),
($('#date6').text()).substring(0, 3),
($('#date7').text()).substring(0, 3)],
labels: {
font: "12px sans-serif",
color: "#7F7F7F"
},
majorGridLines: {
visible: false,
},
},
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart(), 400);
I want to keep kendo chart background color / path fill color unchanged.
I have a multiselect dropDownList and a chart,i want my chart to by dynamic to plot more based on my multiselect dropdownlist,but i have no idea, I would appreciate if you give me a hint by a demo or an example.because in the following code,i have a chart which works only based normal dropdownlist not the multiplechioce,
Here is Multiselect:
$('#multiselect').kendoMultiSelect({
dataTextField: "Text",
dataValueField: "Text",
valuePrimitive: true,
dataSource: result.list_of_parks,
})
here is the chart:
function createChart(data, data_wind) {
$("#topMonth").kendoChart({
series: [{
data: data,
type: "column",
axis: "l100km",
field: "productionvalue",
categoryField: "name",
color: "#228B22"
},
{
axis: "ava",
data: data_wind,
type: "line",
field: "windvalue",
categoryField: "name",
color: "#007eff",
},
],
valueAxes: [
{
name: "l100km",
title: { text: "Production (MW/H)" },
// min: 0,
// max: 2000000,
// majorUnit: 200000,
majorGridLines: {
visible: false
},
minorGridLines: {
visible: false
},
},
{
name: "ava",
title: { text: "Averge Wind Speed(KM/H)" },
min: 0,
// max: 20,
majorUnit: 1,
majorGridLines: {
visible: false
},
minorGridLines: {
visible: false
},
}
],
categoryAxis: {
majorGridLines: {
visible: false
}
,
labels: {
padding: {
left: -20,
buttom: 0
},
rotation: 340
},
axisCrossingValues: [0, 20],
},
tooltip: {
visible: true,
// majorUnit:10,
template: " #= value #"
},
});
$(window).on("resize", function () {
kendo.resize($(".chart-wrapper"));
});
}
}
});
});
I need some help to set the width of the bars in kendo bar charts when the number of bars reduces.
Here is the jsFiddle link i am working on: http://jsfiddle.net/An59E/44/
In this example, there are 2 kendo bar charts, 1 has 6 bars and the other has 12 bars.
In the second graph the bars width is fine. Now when i remove 2 bars i need the same width of bars, instead the default behavior of the kendo is to resize bars. by setting the spacing and the gap values, the bars should resize. In this example, i have set the spacing and gaps value in series defaults attribute but it doesn't look like its working. Now the question is , how to change the width of the bars?
HMTL code:
<div id="chart1">
</div>
<div id="chart2">
</div>
JS code:
var series1= [70, 60, 40];
var series2= [-50, 40, 20];
var series3= [60, 60, -90, 60, 10, 50];
var series4= [60, 20, 20, 50, 40, 10];
$("#chart1").kendoChart({
seriesDefaults:
{
type: "column",
stack: true,
width:2,
gap: 50,
},
series:
[
{
data: series1,
color: "#00CC00",
negativeColor: "#CC0000",
spacing: 0
},
{
data: series2,
color: "#CCCCCC"
}
],
plotArea:
{
border:
{
color: "#CCCCCC",
width: 1
}
},
chartArea:
{
border:
{
color: "#CCCCCC",
width: 1
},
height: 300
},
categoryAxis:
{
pane: "top-pane",
color: "#0099FF",
majorGridLines:
{
visible: true,
},
line:
{
width: 3,
},
plotBands:
[
{from: 0, to:1, color: "#CCCCCC"},
],
},
seriesDefaults:
{
type: "column",
labels:
{
visible: true,
color: "green"
},
},
valueAxis:
{
title:
{
text: "A"
},
majorGridLines:
{
visible: false
},
labels:
{
visible: false,
},
line:
{
visible: false
}
},
tooltip: {
visible: true,
/*format: "{0}"*/
template: "Institutional Results:#=value#<br/>Institutional Target:#=value#<br/>"
}
});
$("#chart2").kendoChart({
series:
[
{
data: series3,
color: "#00CC00",
negativeColor: "#CC0000",
spacing: 0
},
{
data: series4,
color: "#CCCCCC"
}
],
plotArea:
{
border:
{
color: "#CCCCCC",
width: 1
}
},
chartArea:
{
border:
{
color: "#CCCCCC",
width: 1
},
height: 300,
},
categoryAxis:
{
pane: "top-pane",
color: "#0099FF",
majorGridLines:
{
visible: true,
},
line:
{
width: 3,
},
plotBands:
[
{from: 0, to:1, color: "#333333"},
],
/*categories: [2005, 2006, 2007, 2008, 2009, 2010],
labels:
{
margin:
{
top: 100,
}
},*/
},
seriesDefaults:
{
type: "column",
labels:
{
visible: true,
color: "green"
},
},
valueAxis:
{
title:
{
text: "O"
},
majorGridLines:
{
visible: false
},
labels:
{
visible: false,
},
line:
{
visible: false
}
},
tooltip: {
visible: true,
/*format: "{0}"*/
template: "Institutional Results:#=value#<br/>Institutional Target:#=value#<br/>"
}
});
Thanks.
just replace below code snippet in javascript and you are done!
seriesDefaults:
{
type: "column",
labels:
{
visible: true,
color: "green"
},
gap: 5,
},
In above code I have added gap value to define gap of bars which leads to make them thin which you want.
Please refer to below js fiddle.
http://jsfiddle.net/An59E/134/
Please let me know if you face any difficulty to implement the same.
I have a bar chart with 2 panes. I want to add plot bands in both the panes but with different color. How can this be done?
And i want to display the categories labels at the bottom of the graph. how can this be done?
Here is the jsfiddle example: http://jsfiddle.net/An59E/27/
HTML code:
<div id="chart"></div>
JS code:
var series1= [70, 60, 40, 90, -10, 50];
var series2= [-50, 40, 20, -80, 70, 80];
var series3= [70, 60, -40, 90, 10, 50];
var series4= [-50, 40, 20, -80, 70, 80];
$("#chart").kendoChart({
series:
[
{
data: series1,
color: "#00CC00",
negativeColor: "#CC0000"
},
{
data: series2,
color: "#CCCCCC"
},
{
data: series3,
axis: "bottom" ,
color: "#00CC00",
negativeColor: "#CC0000"
},
{
data: series4,
axis: "bottom" ,
color: "#CCCCCC"
}
],
categoryAxis:
[
{
pane: "top-pane",
color: "#0099FF",
majorGridLines:
{
visible: true,
},
line: {
width: 3,
},
plotBands:
[
{from: 0, to:1, color: "#CCCCCC"},
]
},
{
pane: "bottom-pane",
color: "#0099FF",
majorGridLines:
{
visible: true
},
line: {
width: 3,
},
labels:
{
margin:
{
top: 80,
bottom: 0
}
},
categories: [2005, 2006, 2007, 2008, 2009],
}
],
seriesDefaults:
{
type: "column",
labels:
{
visible: true,
color: "green"
},
},
valueAxis: [
{
pane: "top-pane",
title:
{
text: "Availability"
},
majorGridLines:
{
visible: false
},
labels:
{
visible: false,
},
line:
{
visible: false
}
},
{
pane: "bottom-pane",
name: "bottom",
title:
{
text: "Occupancy"
},
majorGridLines:
{
visible: false
},
labels:
{
visible: false,
},
line:
{
visible: false
}
}
],
panes:
[
{
name: "top-pane",
border: {
color: "#C0C0C0",
width: 1
},
},
{
name: "bottom-pane",
border: {
color: "#C0C0C0",
width: 1
}
}
],
tooltip: {
visible: true,
format: "{0}"
}
});
Thanks.
To add plot bands in both the panes:
plotBands: [
{
from: 95,
to: 100,
color: "#2082c8"
//color: "url(#pattern2)",
},
{
from: 125,
to: 130,
color: "#c82020"
}
How to change the color of bars in the negative axis? currently the bar has green color. How would i change the color to red? Here is the link for the jsfiddle: http://jsfiddle.net/ZPUr4/160/
Html code:
<div id="example" class="k-content">
<div id="chart"></div>
</div>
JavaScript code:
function createChart() {
$("#chart").kendoChart({
title: {
text: "Site Visitors"
},
legend: {
position: "bottom"
},
seriesDefaults: {
type: "column",
labels: {
visible: true,
background: "transparent",
}
},
series: [{
name: "Total Visits",
data: series1,
gap: 1.0,
spacing: 0,
} ],
valueAxis: {
min: -200000,
max: 200000,
axisCrossingValue: 50000,
line: {
visible: true
},
title: {
text: "Availability"
},
minorGridLines: {
visible: false,
},
color: 'blue'
},
categoryAxis: {
color: "blue",
width: 25,
majorGridLines: {
visible: false,
position: "bottom"
},
line: {
width: 3,
}
},
tooltip: {
visible: true,
format: "{0}"
}
});
}
var series1=[56000, -63000, 74000, 91000, 117000, 158000];
$(document).ready(function () {
createChart();
$("#example").bind("kendo:skinChange", createChart);
var chart = $("#chart").data("kendoChart"),
firstSeries = chart.options.series;
});
Thanks!
The color option of the series can be set as a function:
series: [{
name: "Total Visits",
data: series1,
gap: 1.0,
spacing: 0,
color: function(data) {
if (data.value < 0) {
return "green";
}
}
}
The Kendo UI version in your jsfiddle however is too old (from 2012) and doesn't support this. You should upgrade to a more recent one.
Here is the updated fiddle: http://jsfiddle.net/ZPUr4/166/