Here is the link for kendo UI bar chart: http://jsfiddle.net/nayanakalkur/ZPUr4/119/
In the fiddle example, X-axis is at '0'. How can i move the axis up or down the Y axis?
Suppose i want have the X-axis at 'y' value 10? How can this be done?
Code for the same:
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
}, {
name: "Unique visitors",
data: series2,
gap: 1.0
}],
valueAxis: {
line: {
visible: false
},
title: {
text: "Availability"
}
},
categoryAxis: {
majorGridLines: {
visible: true,
position: "bottom"
}
},
tooltip: {
visible: true,
format: "{0}"
}
});
}
var series1=[56000, 63000, 74000, 91000, 117000, 158000];
var series2= [-52000, 34000, 23000, -98000, 67000, 83000];
$(document).ready(function () {
createChart();
$("#example").bind("kendo:skinChange", createChart);
var chart = $("#chart").data("kendoChart"),
firstSeries = chart.options.series;
});
Thanks in advance.
Set valueAxis.min to 10:
valueAxis: {
min: 10,
line: {
visible: false
},
title: {
text: "Availability"
}
},
Your JSFiddle modified in here: http://jsfiddle.net/OnaBai/ZPUr4/120/
EDIT: If you want that the axis crosses at one specific value, then set valueAxis.axisCrossingValue to the value.
Example:
valueAxis: {
axisCrossingValue: -50000,
line: { visible: false },
title: { text: "Availability" },
},
And the JSFiddle modified http://jsfiddle.net/OnaBai/ZPUr4/126/
Related
I am using apex bar chart in which i want to show values on the bar vertically but it shows horizontally.
I search alot to show value vertically but not find any solution. Please help me to solve this issue. I also share the code.
Here is The script of graph:
<script type="text/javascript">
$(document).ready(function() {
// custom datalabelBar
var options = {
chart: {
height: 350,
type: 'bar',
toolbar: {
show: true
}
},
plotOptions: {
bar: {
horizontal: false,
dataLabels: {
position: 'top',
},
}
},
dataLabels: {
enabled: true,
position: 'top',
formatter: function (val) {
return val ;
},
horizontal: true,
offsetX: 0,
style: {
fontSize: '10px',
colors: ['#000']
}
},
stroke: {
show: false,
width: 1,
colors: ['#fff'],
lineCap: 'round',
curve: 'smooth',
},
series: [{
name: 'Packing',
data: <?php echo json_encode($wd_packing) ?>
}, {
name: 'Dispatch',
data: <?php echo json_encode($wd_dispatch) ?>
},
{
name: 'Remaning',
data: <?php echo json_encode($wd_reaming) ?>
}],
xaxis: {
categories: <?php echo json_encode($wd_week) ?>,
},
}
var chart = new ApexCharts(
document.querySelector("#weekly_dispatch_graph"),
options
);
chart.render();
});
Here is the screenshot of graph:
Please Help me to solve this issue. Thanks in advance.
It is possible! Your question is about dataLabels. ApexCharts give us a common dataLabels option and a dataLabels option depended on chart type. There are options.dataLabels and options.plotOptions.bar.dataLabels respectively.
In the first one you can play with offsetY and in the second one you can configure this labels orientation and their position.
Try to play with this values, good luck :)
var options = {
chart: {
type: 'bar'
},
series: [{
name: 'Packing',
data: [300000, 300000, 500000, 800000]
}, {
name: 'Dispatch',
data: [46577, 296948, 153120, 0]
},
{
name: 'Remaning',
data: [252962, 2382, 235143, 800000]
}
],
xaxis: {
categories: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
},
plotOptions: {
bar: {
dataLabels: {
orientation: 'vertical',
position: 'center' // bottom/center/top
}
}
},
dataLabels: {
style: {
colors: ['#000000']
},
offsetY: 15, // play with this value
},
}
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
<div id="chart"></div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts#3.18.1/dist/apexcharts.min.js"></script>
dataLabels: {
position: 'top',
enabled: true,
textAnchor: 'start',
style: {
fontSize: '10pt',
colors: ['#000']
},
offsetX: 0,
horizontal: true,
dropShadow: {
enabled: false
}
},
Note the offsetX: 0 and horizontal: true.
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"));
});
}
}
});
});
In the example: http://jsbin.com/AreqameT/1/edit Can the labels below the bar chart made clickable in kendo charts?
The text "Sales and Contracting" and other labels should be made clickable. Can this be done?
JS code:
$("#chart").kendoChart({
legend: {
position: "bottom"
},
seriesDefaults: {
labels:{
visible:true,
template: '#=kendo.format("{0:0}", value)#'
}
},
series: [
{
type: "verticalBullet",
currentField: "score",
targetField: "average",
labels: {
visible: true,
template: '#alert(1)#"'
},
target: {
color: "transparent",
border: {
width: 2,
dashType: "dot",
color: "#444"
},
line: {
width: 0
}
},
data: [
{
score: 93.7,
average: 65.2
}, {
score: 80.2,
average: 22.2
}, {
score: 60.8,
average: 35.2
}, {
score: 82.1,
average: 45.2
}, {
score: 74.2,
average: 55.2
}
]
}
],
categoryAxis: {
labels: { rotation: -45 },
categories: ["Sales & Contracting", "Implementation & Training", "Functionality & Upgrades", "Service & Support", "General"],
line: {
visible: false
},
color: "#444",
axisCrossingValue: [0, 0, 100, 100]
},
tooltip: {
visible: false
}
}).data("kendoChart");
HTML code:
<body>
<div id="chart"></div>
</body>
Thanks in advance.
Using a newer version of Kendo (your jsBin uses a 2013 version... update to 2014.2) you can use categoryAxis.labels.template to add a link to your labels.
categoryAxis: {
labels: {
rotation: -45,
template: '<a xlink:href="http://www.google.com">#: value #</a>'
},
(note the addition of xlink: in the tag)
To better explain, the labels are actually part of an SVG image, not plain HTML. However, SVG supports links: http://www.w3.org/TR/SVG/linking.html#Links
For some reason the older 2013 version of Kendo seem to remove the link from the template though. I tried it with 2014.2.716 and it seemed to work.
Your Jsbin eg not working. Attach a event axisLabelClick or legendItemClick
axisLabelClick: function(e) {
console.log(e.axis.type, e.value);
}
legendItemClick: function(e) {
console.log(e.axis.type, e.value);
}
this might work
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/
Is there a possibility to add notes on the categoryAxis in a Kendo Chart.
As seen in the documentation it should be possible, but even after setting every single option i dont see any notes. I couldn't find any example of somebody doing that. Has anybody managed or used this feature?
my try on jsFiddle
categoryAxis: {
field: "age",
justified: true,
majorGridLines: {
visible: false
},
minorGridLines: {
visible: false
},
min: 10,
max: 30,
labels: {
step: 5
},
notes: {
data: [{
value: { age: 15 },
position: "top",
icon: {
visible: true,
size: 16,
type: "circle",
background: "#585858",
border: {
color: "#FFFFFF"
}
},
line: {
length: 16
},
label: {
visible: false,
text: " "
}
}]
}
}
Thank you
The value property for notes on the categoryAxis appears to represent each category value.
Here's an example notes configuration:
notes: {
label: {
template: "Value: #: value #"
},
icon: {
visible: true,
size: 16,
type: "circle",
background: "#585858",
border: {
color: "#FFFFFF"
}
},
line: {
length: 16
},
data: [{ value: 1}, { value: 5 },{ value: 10 }, { value: 15 }, { value: 20 }]
}
Check out this updated fiddle.