I am having a trouble to customize the kendo chart in order that all of my data in the chart is shown correctly. As you can see on the picture bellow, the value of my data is cutted on half.
As the data is assigned dinamicaly, it's not possible to set the constant size of a chart in order to fix the problem.
Is there any option to set (f.e. css property) to fix this issue?
Or is there any way to manipulate the "max" property of a valueAxis to be always 10% bigger than the maximum loaded value.
I've already tried playing with margins and padding, or changing the width of a chart, but problem is still there.
Here is the photo:
One option is to increase the right margin of the plotArea:
plotArea: {
margin: {
right: 30
}
},
Another option is to change the label position
seriesDefaults: {
type: "bar",
labels: {
visible: true,
background: "transparent",
position: "insideEnd"
}
},
Related
Is there a way to style the cursorDelegate on a TextArea/TextInput so that it ends up taller and thicker than the default one?
With the following code, I can currently get one that has the following properties:
Thicker than normal, at 4px wide
Taller than the rest of the text, with bits sticking out above/below the line as wanted. BUT, this only works until the user moves the cursor. Then, the vertical size gets clipped again, and can't be reset.
TextArea {
id: editor
cursorDelegate: Rectangle {
width: 4
property int vpad: 4
y: editor.cursorRectangle.y - (vpad / 2)
height: editor.cursorRectangle.height + vpad
}
}
It looks like the y and height bindings are getting overwritten by whatever sets those automatically internally.
Trying to overwrite these again myself using a onCursorPositionChanged handler on the TextArea fails, as you cannot write to cursorDelegate.
Managed to find a solution. Instead of setting these values in the normal way, you need to set these on the change handlers for those properties.
TextArea {
id: editor
cursorDelegate: Rectangle {
width: 4
property int vpad: 4
onYChanged: editor.cursorRectangle.y - (vpad / 2)
onHeightChanged: editor.cursorRectangle.height + vpad
}
}
This seems to resist the widgets auto behaviour that was overwriting our values.
Above is a picture of my pie chart in Highcharts when it is loading.. the empty circle displays when the pie chart is loading, I would like the empty circle to not display when the pie chart is loading and only display the whole pie chart after it is done loading, Is there an option to do this?
Here is an example js fiddle
https://jsfiddle.net/gdm0wpey/
series: [
{
name: "Browsers",
colorByPoint: true,
}
],
We see that when the pie chart data is removed, the base empty pie still stays there. I believe that this is connected to getting the base empty pie to be removed when the chart is loading as well. I can't show a live demo of that because it requires loading data from an API
You can hide empty pie series by setting borderWidth to 0.
series: [{
borderWidth: 0,
...
}]
Live demo: https://jsfiddle.net/BlackLabel/4j7fa6d1/
API Reference: https://api.highcharts.com/highcharts/series.pie.borderWidth
Or use showLoading and hideLoading chart's methods:
chart.showLoading();
// async function
chart.series[0].setData([1, 2, 3]);
chart.hideLoading();
Live demo: https://jsfiddle.net/BlackLabel/kpbLr6n4/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#showLoading
One option to remove the border is to set the border width to 0 in the plotOptions for pie:
Highcharts.chart('container', {
/* ... options ... */
plotOptions: {
pie: {
borderWidth: 0
}
}
});
Other option could be:
Overwrite the class with custom css styles:
Example:
/* This is the css class name of the pie chart when has no data: */
.highcharts-empty-series {
stroke: #ffffff !important; /* the same color of the background in your jsfiddle example. */
}
Here is the modified jsfiddle.
Also, consider use the noData option - from the documentation:
noData
Options for displaying a message like "No data to display". This
feature requires the file no-data-to-display.js to be loaded in the
page. The actual text to display is set in the lang.noData option.
Requires
modules/no-data-to-display
Try it
Line chart with no-data module
Pie chart with no-data module
I'm using vis.js timeline and I'm trying to find a way to mark workhours (give them a different background). Using the backgrundareas with groups example I have managed to get my workhours colored for specific dates.
I do not want to use the standard blue color for background, so in order to avoid this I add a class workhours. Then I can set my custom color, but then the borders of the cells are hidden unless I also set a opacity less than 1.
I have a color scheme which I'm using, so setting opacity changes the color and my workhours does not look the same in the whole application.
I'm using this code
.vis-item.vis-background.workhours {
background: ##AFD9FE;
opacity: 0.75;
}
and where filterFromdate is my start date, durationDay is numbers of days in my timeline and startHour and endHour defines my working hours
for (i=0; i<durationDays; i++) {
items.add([
{
id: "W"+i,
start: moment(filterFromdate).add(i, 'days').hour(startHour).valueOf(),
end: moment(filterFromdate).add(i, 'days').hour(dayEndHour).valueOf(),
className : 'workhours',
type: "background"
}
]);
}
this give me
Can anyone tell me how to either get my class workhours to behave like a standard vis background class (like vis-today)?
or if there is another approach to handle background on specific hours (or days)?
Thanks to Issue 3773 I reliased that I could set the z-index, which did the trick.
So my css ended up being
.vis-item.vis-background.workhours {
background: #AFD9FE;
z-index: -1;
}
I am using Fullcalendar Scheduler, and the problem is when i have many resources, it becomes not good, like this:
The live demo with litle resources: http://fullcalendar.io/js/fullcalendar-scheduler-1.3.3/demos/vertical-resource-view.html
I have an idea, it's adding an horizontal scroll, but i don't know the way, can you guys help me out ?
Thank you very much and have a great day.
.fc-view-container {
overflow-x: scroll;
}
.fc-view.fc-agendaDay-view.fc-agenda-view{
width: 500%;
}
/* **For 2 day view** */
.fc-view.fc-agendaTwoDay-view.fc-agenda-view{
width: 500%;
}
Use the combination of this configure options :
dayMinWidth: 150,
stickyFooterScrollbar : true,
dayMinWidth : guarantees your horizontal titles are visible.
stickyFooterScrollbar : guarantees horizontal scrollbar is visible.
Paresh's answer works for views with many columns, but has the limitation that views with few columns will have very wide columns.
Fullcalendar's render algorithm calculates equal column widths based on the view width, and there doesn't appear to be a simple way of setting the column widths using CSS.
Instead we need to enable scrolling on the x-axis:
.fc-view-container {
overflow-x: scroll;
}
then use jQuery to calculate the overall width of the view. Here I am using a minimum column width of 100px:
var columnCount = $('.fc-agendaDay-view th.fc-resource-cell').length;
var viewWidth = $('.fc-view-container').width();
var minViewWidth = 18 + columnCount * 100;
if (minViewWidth > viewWidth) {
$('.fc-view.fc-agendaDay-view.fc-agenda-view').css('width', minViewWidth + 'px');
}
We only change the width of the view and enable scrolling if it exceeds the current width of the view. This has the effect of setting a minimum column size of 100px.
The jQuery needs to run after the calendar.render(); call.
I'm using Flot horizontal bar chart.
The labels of the bars have font-size: smaller - inherited from the containing <div class="flot-text"> which holds the labels.
This breaks the positioning of the labels:
[![Flot bar chart Broken labels][1]][1]
So I need to do this
$(".tagChart .flot-text").css("font-size", ""); // Flot uses "smaller" which breaks alignment.
Which is a bit hacky. This doesn't work:
yaxis: {
// Otherwise Flot uses "smaller" which breaks alignment.
//font: { size: "14px", color: "black" }, // doesn't work
},
How am I supposed to prevent that smaller from being added? Also, interesting thing is that it doesn't appear elsewhere in the page in different DOM/CSS context.
EDIT: It seems that it could have something in common with Bootstrap's CSS rule which is inherited by its content:
table { font-size: 12; }
Try to keep all the label in same width(display:inline-block). Use text align right to align it on the same line