when I click on pyramid chart then it will be expand, how to disable expand area of pyramid chart.
You need to set explodeOnClick to false to disable exploding of sections in CanvasJS funnel / pyramid chart. Setting interactivityEnabled property to false, as mentioned by user14299292 will remove complete interactivity of chart - doesn't show toolTip aswell. Below is an example.
var chart = new CanvasJS.Chart("chartContainer", {
data: [{
type: "pyramid",
explodeOnClick: false, //**Change it to true
dataPoints: [
{ y: 10, indexLabel:"Research & Design" },
{ y: 12, indexLabel:"Manufacturing" },
{ y: 8, indexLabel:"Marketing" },
{ y: 8, indexLabel: "Shipping" },
{ y: 15, indexLabel:"Retail" }
]
}]
});
chart.render();
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
try this
var chart = new CanvasJS.Chart("container",
{
.
.
interactivityEnabled: false,
.
.
});
chart.render();
Related
I am trying to add basic interactivity to my AMCHARTS 5 labels. Take this chart as an example:
I need to be able to click on the names at the left of the chart. That is actually yAxis because I use an inverted chart.
In the function that creates the series, I placed this code:
series.columns.template.events.once("click", function(ev) {
console.log("Clicked on a column", ev.target);
});
And it makes my bars to be clickable. I don't know how to refer to the labels on the left.
Labels as interactive elements in amCharts 5 are tricky. Basically, it's super hard to determine hover/click over just text because it's impossible to completely eradicate antialising, and the actual colored area is super tiny.
Therefore, if we need tooltip to be interactive - have a hover tooltip or handle click events - we need to add a background to it.
The background does not necessarily have to be visible: we can just set its fillOpacity: 0 to make it completely transparent.
Source: Labels – amCharts 5 Documentation
After the declaration and initialization of your yAxis, you can put this piece of code:
yAxis.get("renderer").labels.template.setup = target => {
target.setAll({
cursorOverStyle: "pointer",
background: am5.Rectangle.new(root, {
fill: am5.color(0x000000),
fillOpacity: 0
})
});
};
yAxis.get("renderer").labels.template.events.on("click", e => {
console.log(e.target.dataItem.dataContext.category);
});
Full example:
am5.ready(() => {
let root = am5.Root.new("chartdiv");
let chart = root.container.children.push(am5xy.XYChart.new(root, {}));
let data = [{
category: "Category 1",
value: 10
}, {
category: "Category 2",
value: 20
}, {
category: "Category 3",
value: 15
}];
let yAxis = chart.yAxes.push(am5xy.CategoryAxis.new(root, {
categoryField: "category",
renderer: am5xy.AxisRendererY.new(root, {
inversed: true,
cellStartLocation: 0.1,
cellEndLocation: 0.9
})
}));
yAxis.data.setAll(data);
yAxis.get("renderer").labels.template.setup = target => {
target.setAll({
cursorOverStyle: "pointer",
background: am5.Rectangle.new(root, {
fill: am5.color(0x000000),
fillOpacity: 0
})
});
};
yAxis.get("renderer").labels.template.events.on("click", e => {
console.log(e.target.dataItem.dataContext.category);
});
let xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, {
min: 0,
renderer: am5xy.AxisRendererX.new(root, {})
}));
let series = chart.series.push(am5xy.ColumnSeries.new(root, {
name: "Series",
xAxis: xAxis,
yAxis: yAxis,
valueXField: "value",
categoryYField: "category"
}));
series.data.setAll(data);
});
#chartdiv {
width: 100%;
height: 350px;
}
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<div id="chartdiv"></div>
I am using the new amcharts5 and I cannot seem to change my pie chart "slice" and label to a pure number despite referencing my old code and other links.
Basically my code and chart loads, but the issue is my values is depicted in percentages instead of numbers. This is my code below where I tried to address this.
Any assistance will be appreciated.
// Set data
series.data.setAll([
{ value: Type[0], category: "Type 1" },
{ value: Type[1], category: "Type 2" },
{ value: Type[2], category: "Type 3" },
]);
// Create legend
var legend = chart.children.push(am5.Legend.new(root, {
centerX: am5.percent(50),
x: am5.percent(50),
marginTop: 15,
marginBottom: 15
}));
legend.labels.template.text = "{category}: {value.value}";
legend.slices.template.tooltipText = "{category}: {value.value}";
chart.legend.valueLabels.template.text = "{value.value}";
legend.data.setAll(series.dataItems);
Regards
v5 is completely different from v4, API-wise. In order to configure the pie chart's legend, you have to set it inside the series as documented here:
let series = chart.series.push(
am5percent.PieSeries.new(root, {
name: "Series",
categoryField: "country",
valueField: "sales",
legendLabelText: "{category}",
legendValueText: "{value}"
})
);
Tooltips need to be set on the slices using set or setAll (see the settings documentation for more info):
series.slices.template.set('tooltipText', '{category}: {value}');
Similarly for the slice labels, set the text property using the above functions:
series.labels.template.set('text', '{category}: {value}');
Demo:
var root = am5.Root.new("chartdiv");
root.setThemes([
am5themes_Animated.new(root)
]);
var chart = root.container.children.push(
am5percent.PieChart.new(root, {
layout: root.verticalLayout
})
);
var data = [{
country: "France",
sales: 100000
}, {
country: "Spain",
sales: 160000
}, {
country: "United Kingdom",
sales: 80000
}];
var series = chart.series.push(
am5percent.PieSeries.new(root, {
name: "Series",
valueField: "sales",
categoryField: "country",
legendLabelText: "{category}",
legendValueText: "{value}"
})
);
series.slices.template.set('tooltipText', '{category}: {value}');
series.labels.template.set('text', '{category}: {value}');
series.data.setAll(data);
var legend = chart.children.push(am5.Legend.new(root, {
centerX: am5.percent(50),
x: am5.percent(50),
marginTop: 15,
marginBottom: 15
}));
legend.data.setAll(series.dataItems);
#chartdiv {
width: 100%;
height: 500px;
}
<script src="//cdn.amcharts.com/lib/5/index.js"></script>
<script src="//cdn.amcharts.com/lib/5/percent.js"></script>
<script src="//cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<div id="chartdiv"></div>
Help me, please.
How to change the labels to the image (icon) in bar chart.js ?
I mean, change from this
change labels: "LifeWall_files/logo.png","Bodily Functions","Sleep"
to this
bottom icons
The easiest way to do this would be to get a font that includes these icons and then set the font family for the ticks
...
options: {
scales: {
xAxes: [{
ticks: {
fontFamily: 'FontAwesome'
}
}]
}
}
};
and then specify the appropriate character codes in your labels
labels: ["\uf24e", "\uf1b9", "\uf242", "\uf0fc", "\uf236"],
With the FontAwesome CSS, the above would give you
The Plugin Core API offers a range of hooks that may be used for performing custom code. You can use the afterDraw hook to draw images (icons) instead of tick labels directly on the canvas using CanvasRenderingContext2D.
You'll also have to instruct Chart.js not to display the default tick labels. This can be done through the following definition inside the chart options.
scales: {
xAxes: [{
ticks: {
display: false
}
}],
Further you need to define some padding at the bottom of the chart, otherwise you'll see only part of the images.
layout: {
padding: {
bottom: 30
}
},
Please have a look at the runnable code snippet below.
const labels = ['red vans', 'blue vans', 'green vans', 'gray vans'];
const images = ['https://i.stack.imgur.com/2RAv2.png', 'https://i.stack.imgur.com/Tq5DA.png', 'https://i.stack.imgur.com/3KRtW.png', 'https://i.stack.imgur.com/iLyVi.png'];
const values = [48, 56, 33, 44];
new Chart(document.getElementById("myChart"), {
type: "bar",
plugins: [{
afterDraw: chart => {
var ctx = chart.chart.ctx;
var xAxis = chart.scales['x-axis-0'];
var yAxis = chart.scales['y-axis-0'];
xAxis.ticks.forEach((value, index) => {
var x = xAxis.getPixelForTick(index);
var image = new Image();
image.src = images[index],
ctx.drawImage(image, x - 12, yAxis.bottom + 10);
});
}
}],
data: {
labels: labels,
datasets: [{
label: 'My Dataset',
data: values,
backgroundColor: ['red', 'blue', 'green', 'lightgray']
}]
},
options: {
responsive: true,
layout: {
padding: {
bottom: 30
}
},
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
ticks: {
display: false
}
}],
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>
I'm creating a pie chart using nvd3 and angular-nvd3. I've got my legend displayed but it's in a row across the top.
I'd like to display it in a column down the left side.
I found http://embed.plnkr.co/TJqjjkHaD2S0VjsGmN3c/preview but when I use the options found in the .js file then all that does is change the look of the legend, not the placement.
The css file is empty and there doesn't seem to be inline css in the html. So I'm unsure how they placed the position of the legend on the right in a column.
I do see legendPosition: 'right' but when I use legendPosition: 'left' then the entire pie chart disappears.
So at the least how do I display in a column, and it would be great if I could change it to the left.
Options object:
$scope.patientsChart = {
chart: {
type: 'pieChart',
height: 500,
x: function (d) {
var PatientStatuses = ["Unknown", "Green- Healthy", "Yellow - Fair", "Red - Unhealthy"];
return PatientStatuses[d.Key -1];
},
y: function (d) { return d.Value.length; },
showLabels: true,
duration: 500,
labelThreshold: 0.01,
labelSunbeamLayout: true,
showLegend: false,
legend: {
margin: {
top: 5,
right: 35,
bottom: 5,
left: 0
}
},
pie: {
dispatch: {
//elementClick: function (e) { console.log(e) }
}
},
color: function (d) {
var colors = ['#4066b9', '#009446', '#eba323', '#ee2726'];
return colors[d.Key - 1];
}
}
};
Directive for angular-nvd3:
<nvd3 options="FEV1Chart" data="patients"></nvd3>
If you want to rotateLabels in xAxis just add "rotateLabels: -45"
For example,
xAxis: {
axisLabel: 'Hours',
axisLabelDistance: 20,
showMaxMin: false,
rotateLabels: -45
},
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