I am using Extjs Charts and specifically line series to acheive my req.
I have a requirement of coloring different parts of a sprite ( for a single series ) with different colors based on a value of particular attribute.
For example i have 2 Services, Service1 and Service2 represented on Yaxis and the X-axis is the Numeric axis from 0 - 12.
I want to color Service1 Green from 0 -1 ( of x-axis ) and red from 1- 2 ( of x-axis )
I have tried using the renderer attribute for a sprite, but its called only once when a sprite is rendered as a whole, but i want to color parts of the sprite.
Is that possible using extjs charts. If so how can i achieve that.
{
type: 'line',
xField: 'hour',
yField: 'srvdata',
showMarkers: false,
style: {
stroke: 'green',
'stroke-width': 2,
fill: 'green',
//opacity: 0.2
},
/*renderer: function(sprite, record, attr, index, store) {
console.log(record);
return Ext.apply(sprite, {
fill: 'red',
stroke: 'red'
});
}*/
},
One thing for sure, you cannot change the line color in this way.
renderer: function(sprite, record, attr, index, store)
{
// By changing sprite.fill or stroke, you are just changing the color of your point
};
Not sure how exactly to change line's color, I am stuck with that problem too. But I know that surface : Ext.draw.Surface needs to be changed. Like try to add sprites via chart.draw.Surface.add(sprite) function.
Related
I am implementing this chart using antd chart:
https://charts.ant.design/en/examples/column/percent#basic.
I need to change the colors. How do I change each of the 3 colors within the bar?
It's very easy, just add a color configuration -
color: ['#d62728', '#2ca02c', '#000000'],
You can add as many colors. Order is preserved from top to bottom. A single color would mean all stacks would have the same color. You can also return a function with additional logic -
color: ({ type }) => {
if(type === 'some condition'){
return '#2ca02c';
}
return '#d62728';
}
I want to change the font size of the floating labels of input fields in the React lib MUI v5.
I looked this up a year ago when we were still on version 4, and back then the calculation of the cover area behind the label when "floating" seemed to be hard coded, which made it difficult to change it properly with ease.
Is there a proper solution now in v5 that makes for simple adjustments to the floating labels of input fields? A change to fontSize needs to be reflected in the behavior of the label while floating, by also adjusting the white cover area behind the label.
Unfortunately, while there are ways to change the text size of the label, there is no easy way to also adjust the "notch" size when using variant: outline.
Here's what I would do:
Set the font size for the OutlinedInput's notchedOutline class (This sets the width of the notch):
MuiOutlinedInput: {
styleOverrides: {
notchedOutline: {
fontSize: '2em'
}
}
},
Set the font size for the MuiInputLabel's &.MuiInputLabel-shrink class to match (This sets the shrunken text size):
MuiInputLabel: {
styleOverrides: {
outlined: {
'&.MuiInputLabel-shrink': {
fontSize: '2em',
},
}
}
},
3). (Optional) Also change the transform property on the MuiInputLabel's &.MuiInputLabel-shrink class (this can center the text in the outline line, you'll have to experiment with this and pick a number that works for your font size.):
MuiInputLabel: {
styleOverrides: {
outlined: {
'&.MuiInputLabel-shrink': {
fontSize: '2em',
transform: 'translate(14px, -19px) scale(0.75)'
},
}
}
},
Note: This is all done with style overrides inside your theme.js (docs: https://mui.com/customization/theme-components/#global-style-overrides)
I am trying to have stacked bar with different color as below.
I could achive bar as below however looking for -
1. label under each block and count.
2. On click on one of the block, color for rest of the blocks should be changed (should be same as hover behaviour)
Any suggestion and help would be appreciated.
You can use stacked bar chart with enabled data labels:
plotOptions: {
bar: {
stacking: 'normal',
dataLabels: {
color: 'black',
enabled: true,
y: 80
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/wg46umjp/
API Reference: https://api.highcharts.com/highcharts/plotOptions.bar.dataLabels
Just started using progressbarwidget, I want the text from my textTpl to be center aligned within the progress bar at all times regardless of what percentage the bar is at, when I mean centered I mean the center of the progress bar and not center of the progress value. See fiddle below and attached image
https://fiddle.sencha.com/#fiddle/1dm7
I seen a reference on another thread to set position : relative, this does set the text to the center of the bar but doing so means the bar does not show the progress anymore. I see when the progress bar is created it has 2 divs, containing the following classes, x-progress-text and x-progress-bar, both contain the text value.
Thanks in advance
You can extend ProgressBarWidget, and override the template, like:
Ext.define('Fiddle.view.ProgressBarWidget', {
extend: 'Ext.ProgressBarWidget',
xtype: 'fiddle-progressbarwidget',
template: [{
reference: 'backgroundEl'
}, {
reference: 'barEl'
}, {
reference: 'textEl',
style: {
left: 0,
right: 0
}
}],
});
Working example: https://fiddle.sencha.com/#fiddle/1dn4
The definitive solution is to add an onResize handler on the progress bar container:
onResize: function () {
var me = this,
progressBar = me.down('progressbarwidget');
// Set text width to element width so that it can be centered
progressBar.setWidth(progressBar.el.getWidth());
}
This idea is copied from what happens in Ext.grid.column.Widget.onResize().
The solution from user CD.. doesn't work (nor does the one in user2751034 comment)
in the case you have two-color-text, like in Classic theme:
even if you reproduce the template in Sencha sources (with textEl children of barEl):
I am trying to work with nvd3 lineWithFocusChart for time series data. But surprisingly y axis ticks are appearing as 000.00. The json data is in correct format as given in nvd3 website. I have placed my reference plunker at http://plnkr.co/edit/QwMbTL4co0wMVKaQurxq?p=preview.
In order to sort the time series data, I have used the following function. With this, data is displayed properly except y-axis ticks issue. However tool tip is appearing fine with its correct values. What shall I do, to fix the appearance of y-axis ticks as 000.00
angular.forEach($scope.data, function(
series, index) {
series.values.sort(function(a, b) {
return a.x - b.x;
});
});
Your chart width is hiding the values.
Add a width : 700,
And change the margins
margin : {
top: 20,
right: 20,
bottom: 60,
left: 100
},
UPDATE : You could also completely remove width and the margin , by default it will take the div size and re-sieze automatically.
Hope it helps
You just need to not format the Y axis :
yAxis: {
axisLabel: 'Y Axis',
tickFormat: function(d){
return d;
},
rotateYLabel: false
},
Updated plunker.