I am trying to figure out how to make chartjs not cut off it's tooltips, but I can't seem to find a config option to fix this.
This is what I have tried so far:
<script>
$(document).ready(function() {
var doughnutData = [
{
value: 48.3,
color: "#81d7d8",
highlight: "#23c6c8",
label: "Accepted"
},
{
value: 20.7,
color: "#f58894",
highlight: "#d9534f",
label: "Denied"
},
{
value: 31,
color: "#f5c592",
highlight: "#f8ac59",
label: "Pending"
}
];
var doughnutOptions = {
segmentShowStroke: true,
segmentStrokeColor: "#fff",
segmentStrokeWidth: 2,
percentageInnerCutout: 45, // This is 0 for Pie charts
animationSteps: 100,
animationEasing: "easeOutBounce",
animateRotate: true,
animateScale: false,
fullWidth: true
};
var ctx = document.getElementById("doughnutChart").getContext("2d");
var DoughnutChart = new Chart(ctx).Doughnut(doughnutData, doughnutOptions);
});
</script>
In my HTML the respective section looks like this:
<div class="col-lg-3">
<div class="ibox float-e-margins">
<div class="ibox-content">
<canvas id="doughnutChart" width="95" height="95" style="width: 95px; height: 95px;"></canvas>
</div>
</div>
</div>
Anyone who could point me to what I am missing here?
Since you are using the legacy Chart.js v1.x, you don't have as many possibilities as in the v2.x.
One simple way to fix your problem is to edit the style of your tooltips in your options. This won't change your default 95px of height and width for your chart :
var doughnutOptions = {
// ...
fullWidth: true,
tooltipFontSize: 10
};
And will give this result.
Related
Hello I have the following design That I have to implement. I am using apexcharts as a chart library in my application .
I could not find any gauge/indicator related information of apexchart while googling and now
quite not sure weather it is possible to implement the chart as required design.
2 important elements on my design
custom indicator
rounded edges of the arc
Do you have any idea that could help me here ?
Thank You.
var options = {
series: [44, 55, 41, 17, 15],
chart: {
type: "donut"
},
plotOptions: {
pie: {
startAngle: -90,
endAngle: 90,
offsetY: 10
}
},
grid: {
padding: {
bottom: -80
}
},
responsive: [
{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: "bottom"
}
}
}
]
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
<div id="chart"></div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
there is one in Echarts i use it before
https://echarts.apache.org/examples/en/editor.html?c=gauge-progress
I don't want line in background of plotly area graph. My graph is coming like this.
I want to remove this lines from graph. But I didn't get any solution for it.
I referred this code.
And following is my code:
demo.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="myDiv" style="width: 480px; height: 400px;"><!-- Plotly chart will be drawn inside this DIV --></div>
<script>
var trace1 = {
x: ['2013-10-04 22:23:00', '2016-10-06 22:23:00', '2013-11-04 22:23:00', '2013-11-07 22:23:00','2013-12-04 22:23:00', '2013-12-08 22:23:00'],
y: [1, 3, 6,9, 4, 5],
fill: 'tozeroy',
fillcolor: 'red',
text: server1,
hoverinfo: "x+y+text",
name:"Server 1",
type: 'scatter',
mode:"markers",
marker:
{
size:5,
color:"gray"
},
uid:"c2e171"
};
var layout = {
margin: {
l: 35,
r: 40,
b: 50,
t: 10
},
legend: {
"orientation": "h"
},
yaxis : {
fixedrange: true
},
};
var data = [trace1];
Plotly.newPlot('myDiv', data,layout);
var plotDiv = document.getElementById('myDiv');
</script>
</body>
</html>
And when I'm expanding graph means dragging graph x axis date is hiding,
Please give me solution for it. I'm new with plotly.js
You can use showgrid:
xaxis: {
showgrid: false
},
yaxis: {
showgrid: false,
showline: true
}
More plot.ly layout reference: https://plot.ly/javascript/reference/#layout-xaxis
Angular JS chart is awesome, But i need to implement click event in the piechart which i have created.. Here is the coding..
This is the JavaScript Coding...
$scope.pied = [{
value: 4,
color: "#FF5A5E",
highlight: "#FF5A5E",
label: "Prospective"
}, {
value: 0,
color: "#46BFBD",
highlight: "#46BFBD",
label: "Pending"
}, {
value: 0,
color: "#FDB45C",
highlight: "#FDB45C",
label: "CallBacks"
}, {
value: 4,
color: "#e6e6fa",
highlight: "#e6e6fa",
label: "FollowUp"
}, {
value: 1,
color: "#cc5229",
highlight: "#cc5229",
label: "Not Interested"
}, {
value: 0,
color: "#556b2f",
highlight: "#556b2f",
label: "Close"
}]
var pieOptions = {
//Boolean - Whether we should show a stroke on each segment
segmentShowStroke: true,
//String - The colour of each segment stroke
segmentStrokeColor: "#fff",
//Number - The width of each segment stroke
segmentStrokeWidth: 2,
//Boolean - Whether we should animate the chart
animation: true,
//Number - Amount of animation steps
animationSteps: 100,
//String - Animation easing effect
animationEasing: "easeOutBounce",
//Boolean - Whether we animate the rotation of the Pie
animateRotate: true,
//Boolean - Whether we animate scaling the Pie from the centre
animateScale: false,
//Function - Will fire on animation completion.
onAnimationComplete: null
}
var ctx = document.getElementById("pieChart").getContext("2d");
var myPieChart = new Chart(ctx).Pie($scope.pied, pieOptions);
ctx.onclick = function(evt){
var activePoints = myPieChart.getPointsAtEvent(evt);
console.log("active: "+activePoints);
// => activePoints is an array of points on the canvas that are at the same position as the click event.
};
document.getElementById('js-legend').innerHTML = myPieChart.generateLegend();
This is the HTML Coding..
<canvas id="pieChart" width="440" height="200" ></canvas>
<div id="js-legend" class="chart-legend"></div>
This is the image of the above program.. i have wrote coding that when i click on The FollowUP it must the datas related to it.. But the click event is not working..??
Please see to the above code and picture and guide me to get the exact output what i expect. Thanks in advance guys...
I have Used angular-chart.js instead this chart.js Angular JS Documentation is here . Angular Chart is little bit easy than chart.js..
Thanks for the support guys.. :)
This is my chart flot options
var chartOptions = {
xaxis: {
min: 0,
max: result.length + 1,
ticks: ticks
},
grid: {
hoverable: true,
clickable: false,
borderWidth: 0
},
bars: {
show: true,
barWidth: 1,
//barWidth:null,
fill: true,
lineWidth: 1,
order: true,
lineWidth: 0,
fillColor: { colors: [{ opacity: 1 }, { opacity: 1 }] }
},
tooltip: true,
tooltipOpts: {
content: '%s: %y'
},
colors: App.chartColors
};
var holder = $('#vertical-chart');
if (holder.length) {
$.plot(holder, data, chartOptions);
}
I got exception:
invalid dimention for flot hieght =0
There is no problem with html because I can draw another chart using the same html
help please
Update
This is the HTML
<div style="width: 45%; height:300px; float: left; margin-left:5%">
<div id="vertical-chart" class="chart-holder" style="border:1px solid #D5D5D5; margin-top:2px">
<canvas class="overlay" width="479" height="265"></canvas>
</div>
</div>
This may fix your problem: Change the canvas class from overlay to flot-overlay.
The class name was changed due to a request here:
https://code.google.com/p/flot/issues/detail?id=540
You'll see the API change described in the second paragraph here:
https://code.google.com/p/flot/source/browse/trunk/NEWS.txt
Without this change, the canvas is being deleted during the plot call, leaving vertical-chart without a height.
If this doesn't fix your problem, it would be useful to see your data object.
I am trying to create a chart in dojo. The issue is, as soon as I try and add any data to the chart, the chart renders blank (no errors).
Code:
var cPosition
require(["dojox/charting/Chart","dojox/charting/themes/Claro", "dojox/charting/plot2d/Grid", "dojox/charting/axis2d/Default", "dojox/charting/plot2d/MarkersOnly",], function(Chart, theme, Grid, Default, MarkersOnly){
cPosition = new Chart("chartPosition");
cPosition.setTheme(theme);
cPosition.addAxis("x", {
min: -180,
max: 180,
majorTicks: true,
majorTick: {length:180},
minorTick:{length:5},
majorTickStep:180,
minorTickStep:20
});
cPosition.addAxis("y", {
min: -180,
max: 180,
vertical: true,
majorTicks: true,
majorTick: {length:180},
minorTick: {length:5},
majorTickStep:180,
minorTickStep:20
});
cPosition.addPlot("Grid", { type: Grid,
hMajorLines: true,
hMinorLines: true,
vMajorLines: true,
vMinorLines: true,
majorHLine: { color: "black", width: 2 },
majorVLine: { color: "black", width: 2 },
minorHLine: { color: "grey", width: 1 },
minorVLine: { color: "grey", width: 1 },
enableCache: true });
cPosition.addPlot("default", { type: MarkersOnly });
//cPosition.addSeries("series_markers", [{x:10,y:10}]);
cPosition.render();
});
If I uncomment the line:
cPosition.addSeries("series_markers", [{x:10,y:10}]);
The chart turns blank (absolutely nothing on it). If I comment the line, the grid displays correctly but, of course, no data.
What I am trying to accomplish is create an x,y grid that will display a marker that corresponds to the position of an object.