I can't don't find the property to modify the size of the label font.
My labels are not clearly displayed in front of the bars and some of them is missing.
I tried with the property below but nothing changed.
vAxis:{titleTextStyle: { color: '#000', fontSize: 8, bold: true, italic: false }}
see the config options for the Timeline, there is no vAxis.
use instead...
timeline:{rowLabelStyle: { color: '#000', fontSize: 8, bold: true, italic: false }}
Related
Is there a away to add an extra label at the bottom if a pie graph like this:
Yes, you can do it as follows:
options: {
legend: {
display: true,
title: {
display: true,
text: 'Custom Chart Title',
position: 'bottom'
}
}
You can also find some more details on the official documentation, here:
Chart JS Legend Official Documentation
I am using Doughnut chart of chart.js in a react js application. I would need the same look and feel for the legend than illustrated by:.
I have gone through the Chart.js documentation but I am helpless!
You have to add this at options, see next:
options: {
legend: {
display: true,
position: 'bottom',
labels: {
boxWidth: 10
}
}
}
https://www.chartjs.org/docs/latest/configuration/legend.html#legend-label-configuration here you can see all options what you can add to labels, see padding also, default is 10 you need only add boxWidth.
So I am trying to display a nice chart using Chart.js inside a Vue.js component... Should not be so complicated but I am hitting a wall there.
Here is my component code (syntax is based on Vue.js webpack boilerplate)
<template>
<canvas v-el:canvas style="width: 100%; height: 200px"></canvas>
</template>
<script>
import Chart from 'chart.js'
export default {
compiled: function () {
// fetch canvas DOM element
let canvas = this.$els.canvas
// init chart.js
let chart = new Chart(canvas, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
})
console.log(chart)
}
}
</script>
I simplified the component as much as I could, and used data from the doc example (will bind real data using props later).
So I keep getting this error in the console :
Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
I looked it up, it seems that this has something to do with the variable passed to getComputedStyle used in Vue.js.
My best guess would be that this.$els.canvas does not return the right object. But if I output it in the console using console.log it seems right.
console.log(canvas)
// outputs <canvas style="width: 300px; height: 150px;"></canvas>
console.log(canvas.tagName)
// outputs CANVAS
console.log(canvas.style.height)
// outputs 200px
Hmmm this is actually weird and could be helpful : did you notice that I set the canvas style.height in the template, but if I do console.log(canvas) I see height: 150px but if console.log(canvas.style.height) 2 lines below, I get 200px as an output ?!! WTF is going on ?.. Vue is messing with my head right now
Link to jsFiddle for you to play with (check out the result in the console)
https://jsfiddle.net/kartsims/g8s12yd2/3/#&togetherjs=CQrzT996AR
I figured out why and will let you know, just in case someone happens to be in the same position :
I couldn't get this to work inside a vue component displayed by Vue Router... I figured that it was because I should have used ready hook instead of compiled... At compiled, the DOM is not fully ready yet.
I'm using the latest chartJS and attempting to create a pie or doughnut chart. This seems like it should be relatively simple to me, but whenever the chart is created the top is cutoff like the image below. I've tried many things to fix this, and searched around with no luck. Has anyone run into this before? Is ChartJS no longer supported in most browsers?
I've seen other pie charts in JSfiddle that people have working, copying the exact same code into new files results in the same chopped off top graphs.
Other graphs work such as line/bar.
Edit: made some progress by changing the chart to load using windows.load. It will now display correctly when the page is resized at all, but will display the same way below initially.
Here is the HTML and JS code.
<div class="container-graph-window">
<canvas id="pieChart" width="435" height="435"></canvas>
<script>
pieChart();
</script>
</div> <!-- End continer-graph-window-->
/////////////////////////////////////////////JS CODE
function pieChart() {
var doughnutData = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
},
{
value: 40,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Grey"
},
{
value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Dark Grey"
}
];
var ctx = document.getElementById("pieChart").getContext("2d");
window.pieChart = new Chart(ctx).Doughnut(doughnutData, {responsive : true});
} //end pie chart
Note: I must pass data into the JS function and use it to create the graph.
SOLVED: Update all of your Chart.js files if you run into this issue to the latest version.
I am using a jQuery UI Dialog to show a simple loader when the user presses a certain button (to prevent the user interacting with the page). The button fires an AJAX request which updates a certain part of the website (I.e. the footer).
Problem 1 - Incorrect height on first show
My first problem is that the first time the Dialog is displayed it's height is 51px, not 94px as declared. In fact I've discovered that it's always 43px less on first display, no matter what I set the height to, and despite the fact that I have the minHeight and maxHeight parameters set.
Problem 2 - Vertical centreing is off if the page is scrolled
Next, I've noticed that as I scroll down the page, the Dialog is displayed further down the page also. My positional target is window (the default), so this should not be happening.
Does anybody know how to fix these problems? Thanks.
JavaScript
$('#loading-dialog').dialog({
autoOpen: false,
closeOnEscape: false,
draggable: false,
height: 94,
maxHeight: 94,
minHeight: 94,
modal: true,
resizable: false,
width: 350,
open: function(event, ui){
$(this).closest('.ui-dialog').css({ // Remove the borders and padding
'background-image': 'none',
'border': 'none',
'padding': '0'
});
$(this).closest('.ui-dialog').children('.ui-dialog-titlebar').css('display', 'none');
$(this).closest('.ui-dialog').children('.ui-dialog-buttonpane').css('display', 'none');
}
});
/** Show the AJAX loader */
$('#loading-dialog').dialog('open');
/** Hide the AJAX loader */
$('#loading-dialog').dialog('close');
HTML
<div id="loading-dialog">
<div id="loading-dialog-inside">
<span id="custom-admin-preview-spinner"> </span>
<h2>Generating preview...</h2>
</div>
</div>
CSS
#loading-dialog{
background-color: #FFFFFF;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13);
display: none;
text-align: center;
}
#loading-dialog-inside{
display: inline-block;
margin: 13px auto;
}
#loading-dialog-inside h2{
display: inline-block;
vertical-align: middle;
}
#custom-admin-preview-spinner{
background-image: url('../ajax-spinner.gif');
display: inline-block;
height: 48px;
margin: 0 20px 0 0;
vertical-align: middle;
width: 48px;
}
Dialog height incorrect on first show
As noted in my question, the height of the Dialog was always incorrect on the first show. To fix this I implicitly declared the height that I required for the Dialog content container in the open function -
$(this).closest('.ui-dialog').children('.ui-dialog-content').css('height', '80px');
As the dialog will always be the same height, it's fine in this instance. However, it's no good for users who wish to have a variable-height Dialog. Therefore if anyone knows a more definitive answer, I'd appreciate you posting it.
Vertical position off centre
The next part of my question focused on the Dialog becoming off-centre (vertically) when it was shown, if the webpage was scrolled vertically.
To fix this I made use of the using parameter of the position property. -
using: function(target, element){
/** Set the 'left' and 'top' values correctly so that the dialog is displayed in the centre of the screen */
target.left = Math.ceil(($(window.top).width() / 2) - (element.element.width / 2));
target.top = Math.ceil(($(window.top).height() / 2) - (element.element.height / 2));
/** Update the CSS of the target element */
$(this).closest('.ui-dialog').css(target);
}
Before discovering the answer I first logged the values of target and element (I.e. console.log(target)). This allowed me to see that target.top was being incorrectly calculated. What I mean by that is that if my target is window, top should always be 0. However, target.top was instead being calculated as the relative percentage of the defined height that I vertically scrolled.
For example, if height is 200 and I scrolled 75% of the way down the page, target.top was being set to 150. This in turn skewed the calculation of element.element.top, meaning it was pushed down the page by that amount.
The full solution
Should you wish to use this solution, note that the HTML and CSS from the question remain as they were.
$('#loading-dialog').dialog({
autoOpen: false,
closeOnEscape: false,
draggable: false,
height: 94,
hide: 400,
maxHeight: 94,
minHeight: 94,
modal: true,
position: {
my: 'center',
at: 'center',
of: window,
collision: 'none',
using: function(target, element){
/** Set the 'left' and 'top' values correctly so that the dialog is displayed in the centre of the screen */
target.left = Math.ceil(($(window.top).width() / 2) - (element.element.width / 2));
target.top = Math.ceil(($(window.top).height() / 2) - (element.element.height / 2));
/** Update the CSS of the target element */
$(this).closest('.ui-dialog').css(target);
}
},
resizable: false,
show: 400,
width: 350,
open: function(event, ui){
/** Style the dialog box */
$(this).closest('.ui-dialog').css({ // Remove the borders and padding
'background-image': 'none',
'border': 'none',
'padding': '0',
'position': 'fixed'
});
$(this).closest('.ui-dialog').children('.ui-dialog-content').css('height', '80px');
$(this).closest('.ui-dialog').children('.ui-dialog-titlebar').css('display', 'none');
$(this).closest('.ui-dialog').children('.ui-dialog-buttonpane').css('display', 'none');
/** Style the overlay */
$('.ui-widget-overlay').css('background-image', 'none');
}
});