in my extjs I have a xtype label and am just trying to use cls to change font color but its not working. can you see what I am doing wrong?
layout: 'column',
items: [
{
columnWidth: 0.5,
xtype: 'label',
cls: 'myLabelCRM',
text: 'Account Data1'
},
--scss
.myLabelCRM .x-component-default {
color: red;
}
Try using userCls or componentCls instead of cls. These might be more direct to the component. It is not included in their documentation that you also need to add the generated component classes to your SCSS, but if you want to know what classes to add just inspect the element and get the classes from there.
Related
I'm importing a csv file using Highcharts cvsURL for a line chart. I'm using styledMode and I defined the default colors. Highcharts is using my stylesheet. Is there an easy way to tell each series which color to use?
I have lots of lines, so highcharts cycles through its 10 default colors. I need one of the colors to only be assigned to 2 specific series though.
Here is my code so far:
Highcharts.chart('container', {
chart: {
type: 'line',
styledMode: true //this totally separates the design from the svg.
},
data: {
itemDelimiter: ',',
csvURL: 'http://deq.at.utah.gov/wp-content/themes/deq/parts/charts/Ozone-4th-Highest-8hr-Front.csv'
},
title: {
text: 'Ozone 4th Highest 8-hr Concentration Wasatch Front'
},
yAxis: {
title: {
text: '(Ozone PPM)'
}
}
});
I think the API said something about assigning classes to a series. Maybe that would work because I could make custom CSS for only those series, but I can't see how to do that using csvURL.
You can define color or className for series in this way:
data: {
csvURL: '...'
},
series: [{
color: '#00c735'
}, {
color: '#c4392d'
}]
Live demo: https://jsfiddle.net/BlackLabel/kj9udgat/1/
API Reference:
https://api.highcharts.com/highcharts/series.line.className
https://api.highcharts.com/highcharts/series.line.color
import BalloonEditor from '#ckeditor/ckeditor5-editor-balloon/src/ballooneditor';
import Essentials from '#ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '#ckeditor/ckeditor5-paragraph/src/paragraph';
import Bold from '#ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '#ckeditor/ckeditor5-basic-styles/src/italic';
BalloonEditor
.create( elem, {
plugins: [ Markdown, Essentials, Paragraph, Bold, Italic ],
toolbar: [ 'bold' ]
})
.then((editor) => {
....
})
.catch( error => {
console.error( error );
} );
I tried to use attachPlaceholder from https://ckeditor.com/docs/ckeditor5/latest/api/module_engine_view_placeholder.html#static-function-attachPlaceholder
import { attachPlaceholder } from "#ckeditor/ckeditor5-engine/src/view/placeholder";
Could you show me simple example how to use this method (attachPlaceholder) or how to do it.
In CKEditor-5 you can add placeholder like
<ckeditor [config]="{ placeholder:'Placeholder Text', toolbar: [ 'bold', 'italic', 'bulletedList' ] }">
</ckeditor>
See docs
I assume that you want to add a placeholder to the entire editor, so that when it's empty you can display something like "Type here...".
Unfortunately, the attachPlaceholder() function doesn't yet support setting placeholder for the editor's main editable. For now, it's used in cases like image captions:
There's a ticket to implement configurable editor's placeholders: https://github.com/ckeditor/ckeditor5/issues/479.
And there's a 3rd party addon which adds a placeholder in a simpler way: https://github.com/alexeckermann/ckeditor5-emptyness.
Plugin URL : https://github.com/alexeckermann/ckeditor5-emptyness
Simply build your editor with this plugin and you will get access to a isEmpty observable attribute (care of Observable) on your editor instance. Additionaly, the plugin will add a ck-editor__is-empty class name on the editor element when is is empty.
The origin use case was for the application to observe the attribute and know when the editor enters or exits an empty state. From there the application applies an attribute to the editors HTML element so that a CSS based placeholder can be applied — using CSS's ::before rules to inject phantom content without disturbing CKEditor's actual content.
import BalloonEditorBase from '#ckeditor/ckeditor5-editor-
balloon/src/ballooneditor';
import Emptyness from 'ckeditor5-emptyness/src/emptyness';
// .. all your other imports here
export default class MyEditor extends BalloonEditorBase { }
MyEditor.build = {
// ... all your other configs here
plugins: [
// ... all your other plugins here
Emptyness
]
};
CSS
.ck-editor__is-empty .ck-content.ck-editor__editable::before,
.ck-editor__is-empty.ck-content.ck-editor__editable::before {
content: 'The editor is empty';
position: absolute;
display: block;
margin: var(--ck-spacing-large) 0;
color: #aaa;
}
http://jsfiddle.net/7rLnwdxu/1/
here is the code.
I want to make all the labels behave just like the Word1_Word2 one (stay in one line). Even when there is (space) or - between them.
Is it possible?
Thanks!
You can use the labels' style object to pass css to control this
labels: {
style: {
whiteSpace: 'nowrap'
}
}
Updated fiddle:
http://jsfiddle.net/jlbriggs/7rLnwdxu/2/
EDIT
In order to 1) accommodate more complex requirements of the labels that might arise, and 2) be more inline with the upcoming Highcharts 5 release, which will separate style and content, you can do this by
1) setting useHTML: true in the axis label properties
2) assigning a common label class to the html element that will contain your labels, and
3) use external CSS to specify all of the required styling.
Example, Chart code:
labels: {
useHTML: true,
formatter: function() {
return '<div class="category-label">'+this.value+'</div>'
}
}
CSS:
.category-label {
white-space: nowrap;
cursor: pointer;
font-weight: bold;
}
Updated fiddle:
http://jsfiddle.net/jlbriggs/7rLnwdxu/6/
While trying to use https://github.com/blacklabel/grouped_categories/ i managed to get it working with an output as shown below
Is there a way that the following options can be modified
1. Removing the grids (I could manually change the stroke-width of those elements in the html to 0 to remove the grids, Is there a property / any other way available to do this?)
2. spacing between the categories
3. shifting the entire category table, so that i can insert a custom axis above it?
As you can see in the Grouped Categories plug-in documentation, you can use the groupedOptions property to apply your styles :
xAxis: {
labels: {
groupedOptions: [{
style: {
color: 'red' // set red font for labels in 1st-Level
}
}, {
rotation: -45, // rotate labels for a 2nd-level
align: 'right'
}],
rotation: 0 // 0-level options aren't changed, use them as always
},
categories: /* Your grouped categories */
}
You can therefore style almost everything you want of the xAxis.
EDIT
This will only allow you to modify the labels style. Sorry.
I need to know if it's possible to add some text (note/detail) on a specific point, in addition to the tooltip.
I use HighCharts Version 3.0.9.
Actually I use a click event on a points to show a popup detail in html . But i want to know if there is a native solution with HighCharts.
Like :
[
{
x: 11,
y: 11,
note: {
text: "Some text",
}
},
{
x: 16,
y: 17
}
]
Sure, it's possible. You have two options:
write your own tooltip.formatter, to get that value
use tooltip.pointFormat to create pattern for points
Second example (easier): http://jsfiddle.net/mPb4A/
tooltip: {
pointFormat: '{series.name}: <b>{point.y}: {point.options.note.text}</b><br/>'
},
Only limitation of second solution is that each point requires note property, otherwise you will get error in JS saying that Cannot read property 'text' of undefined.