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
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
In this fiddle what I'm after is giving all the 0s in the YAxis a grey colour without affecting the numbers that are bigger than 0. The issue here is that they are contained in the same SVG tag: <tspan>3000</tspan>. Is there a way I can target a particular text value inside a tag using css? i.e.
tspan[0]{
color: #808080;
}
Or is there a way I can do that using Highcharts' yAxis.labels.formatter ?
This is totally hacky, but I got it to work. Under yaxis:
labels: {
formatter: function () {
var label = this.axis.defaultLabelFormatter.call(this);
label = label.replace(/(0+$)/,'<span style="color: #ccc;">$1</span>');
return label;
}
},
I have a bar chart and I can change default color value of tick labels by the the css:
.axis {
-fx-tick-label-fill: rgb(255,0,255);
}
However, it gives the same color to all labels in the chart as you guess.
I want to be able to give different colors to different labels. Is there a way of doing this?
Yes, use the ID instead of the class.
You can add it directly in your FXML file with fx:id attribute or in your Java code with yourLabel.setID(String id).
And then, in your CSS:
#label1 {
-fx-tick-label-fill: rgb(255,0,255);
}
#label2 {
-fx-tick-label-fill: rgb(255,255,255);
}
Hope it helps
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"
}
},