Am very new to sencha touch as my requirement is to get the bar with four color gradients. but as of now am possible to apply only two color gradients for the bar .
following is my code,
gradients:
[ {
'id': 'v-1',
'angle': 0,
stops: {
0: {
color: '#79bbff'
},
100: {
color: '#0d55a9'
}
}
}]
series:
[ {
type: 'bar',
renderer: function(sprite, storeItem, barAttr, i, store11) {
barAttr.fill = colors[i % colors.length];
return barAttr;
}
}]
Is it possible to apply more than two gradients for the single bar.Please help me regarding this.
Thanks in advance,
Naga
bug in the current release of sencha touch .... have posted a patch here
http://www.sencha.com/forum/showthread.php?162233-Bug-Fix-Charts-1.-Could-not-apply-gt-2-stops-to-gradient-and-angle-not-respected&p=692723#post692723
Related
I have a question about combining column and staked bar for react highchart,
it is similar to the answer of this link:
Highchart combination chart with stacked column
but I want to change the above column to stacked bar which is horizontal.
When I change the defaultColumnSeries to
var defaultColumnSeries = {
type: 'bar',
stacking: 'normal',
dataLabels: {
enabled: true,
style: {
fontSize: '9px'
}
},
showInLegend: false,
groupPadding: 0.1,
yAxis: 1,
xAxis: 1
}
then all the columns become horizontal also which is not what I want.
I want to keep the below columns vertical and the above stacked bar horizontal.
What should I do to achieve it?
Using bar series type enables chart.inverted option, which makes it impossible to use column and bar series types on the same chart. As a solution, you can create another chart and place it on top of the other.
Highcharts.chart('container', {
...
});
Highcharts.chart('container2', {
chart: {
height: 100,
backgroundColor: 'transparent'
},
title: {
text: ''
},
credits: {
enabled: false
},
yAxis: {
visible: false
},
xAxis: {
visible: false
},
...
});
Live demo: https://jsfiddle.net/BlackLabel/k3z5opvr/
API Reference: https://api.highcharts.com/highcharts/chart.inverted
Github issue: https://github.com/highcharts/highcharts/issues/13363
I am using React Apexcharts to create a radial chart. By default, the progress bar goes in a clockwise direction but I need it to go counter-clockwise. Is there any option property available I can use?
What my graph looks like now:
What I need it to look like (bar going in opposite direction):
My options object:
let options = {
colors: ["#857EFF"],
plotOptions: {
radialBar: {
hollow: {
margin: 0,
size: "70%",
background: "#293450"
},
track: {
dropShadow: {
enabled: true,
top: 2,
left: 0,
blur: 4,
opacity: 0.15,
}
},
dataLabels: {
name: {
offsetY: -10,
color: "#fff",
fontSize: "13px"
},
value: {
color: "#fff",
fontSize: "30px",
show: true
}
}
}
},
fill: {
type: "gradient",
gradient: {
shade: "dark",
type: "vertical",
gradientToColors: ["#05E996"],
stops: [0, 100]
}
},
stroke: {
lineCap: "round"
},
labels: ["Progress"]
}
Any help is appreciated, thank you!
I've been looking for an answer for this Problem without any success. Today i've successfully created a workaround.
The Apex Radialbar just hardcoded always goes clockwise, no matter what you do because it is always going from startAngle to endAngle using +1.
So using startAngle -360 and endAngle 0 will have no effect.
Essentially, you want to create the Radialbar and mirror it on Y axis and then remirror everyhting you want to keep normal, back to normal. However you need to transform the components usually back in place.
You can also try only selecting the Radialbar and only rotating that, however i find getting the other components back in the correct place using "transformX" is usually easier.
so lets say you want a Bar from -360 to 90 but counter-clockwise,
create a Radialbar from 0 to 270 and then use the following CSS transforms.
Here is the example Radialbar from the Angular Documentation with a counter-clockwise bar.
TIPP:
Use exact classifiers and unique, here in ng-deep with
counter-clockwise svg
Because once you use ng-deep you cannot unset it, unless you modify the document directly, so when you switch views you might have unwanted sideeffects.
Mirrored
Original
Change startAngle and endAngle options
https://apexcharts.com/docs/options/plotoptions/radialbar/
plotOptions: {
radialBar: {
startAngle: -360,
endAngle: 0,
...
I'm looking to do this same thing and after reading apexcharts docs as well as experimenting around with it I don't think it's currently possible.
I am using column charts given in antd chart library. I understand how customization works and how I can change the color of column giving the fill prop. However if I have two columns grouped together like in this example, how do I specify different colors for both? I also want to give some border radius to the columns, any chance I can do that too?
Here is the antd reference
https://charts.ant.design/zh-CN/demos/column/#%E5%88%86%E7%BB%84%E6%9F%B1%E7%8A%B6%E5%9B%BE
And the sandbox
https://codesandbox.io/s/5fshy
TIA
You can use the color and colorField options to set custom colors as defined in the API documentation https://charts.ant.design/demos/column/?type=api#color
working snippet:
var config = {
data: props.data,
xField: 'x',
yField: 'y',
seriesField: 'type',
isPercent: true,
isStack: true,
meta: {
value: {
min: 0,
max: 100,
},
},
label: {
position: 'middle',
content: function content(item) {
return ''.concat(item.y.toFixed(2), '%');
},
style: { fill: '#000' },
},
colorField: 'type', // or seriesField in some cases
color:['#19CDD7','#DDB27C'],
};
return <Column {...config} />;
}
For radius use the columnStyle parameter:
columnStyle: {
radius: [20, 20, 0, 0],
},
Is there any way to generate bar colours dynamically in ZingChart?
in screen-shot there is two colours generated in bar chart, i want to get list of colors used in bar chart.
html file
<zingchart id="timesheet-bar-chart" zc-values="barValues" zc- json="myObj"></zingchart>
controller
$scope.myObj = {
"type": "bar",
"plot":{
"stacked":true,
"stack-type":"normal" /* Optional specification */
},
"scale-x":{
"transform":{
"type":"date",
"all":"%d %M",
"item": {
"visible":false
}
},
"values":$scope.bar_x_axis,
},
};
and barValues is a list of integer values.
Since your question is asking how to get the bar colors, not set the bar colors. I thought my answer would be appropriate as well.
You can use the API to getobjectinfo from the chart.
demo here
$scope.myRender = {
events : {
complete : function(p) {
var info1 = zingchart.exec(p.id, 'getobjectinfo', {
object : 'plot',
plotindex: 0
});
var info2 = zingchart.exec(p.id, 'getobjectinfo', {
object : 'plot',
plotindex: 1
});
console.log(info1, info2);
}
}
}
If youre confused on the $scope.myRender variable you can read up more on the angular directive here.
You can set the colors like this,
$scope.myJson = {
'plot': {
'styles': ['#yellow', 'red', 'blue']
},
'scale-x': {
'values': ['white', 'red', 'pink']
},
'type': 'bar',
'series': [{
'text': 'Product History Color',
'values': [2, 6, 8]
}]
}
DEMO
You can specify the colors, fonts etc by yourself.
e.g.
scaleX: {
labels: ['Facebook','Apple', 'Microsoft', 'Intel','Google', 'Amazon'],
item: {
fontFamily: "Roboto",
fontSize: 14
},
lineColor: "#DDD",
tick:{
visible: false
}
},
Is it possible to add a custom point shape to a line chart?
Google's Customizing Points Documentation doesn't mention anything about adding shapes they don't already offer.
I did find this similar question with a good answer, but I don't think I can do that using angular-google-chart. Even if it is possible, I'm hoping there is a more strait forward solution.
I don't need to add a complex shape, I just need a hollow circle and an X.
I tried adding the hollow circle using stroke-color and stroke-width as a column style, but I can't even get that to work.
Here is a jsFiddle with a working hollow circle but I'm using the Javascript Literal way of adding data and can't get the following code to work:
chartData.data.cols = [
{
id: "someid",
label: "Some Label",
type: "number",
p: {
style: 'point {stroke-width: 4; stroke-color: #000000',
},
},
];
I'd rather add it to to options.series[0].strokeWidth but it doesn't look like that is an option.
So, if you can help with either hollow circle points or Xs that be awesome!
Basically: when you want to apply a custom style you must use a style-column, the style will be set via the value of the column.
Example using the object-literal:
google.setOnLoadCallback(drawChart);
function drawChart() {
var chartData = {
data: {
cols: [{
label: "X",
type: "number"
}, {
label: 'Y',
type: "number"
}, {
role: 'style',
type: "string"
}
],
rows: [{
c: [{
v: 1
}, {
v: 5
}, {
v: 'point { stroke-width: 4; fill-color: transparent; stroke-color: red;}'
}]
}, {
c: [{
v: 2
}, {
v: 1
}, {
v: 'point { stroke-width: 4; fill-color: transparent; stroke-color: red;}'
}]
}, {
c: [{
v: 3
}, {
v: 3
}, {
v: 'point { stroke-width: 4; fill-color: transparent; stroke-color: red;}'
}]
}]
}
};
var options = {
legend: 'none',
curveType: 'function',
pointSize: 7
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(new google.visualization.DataTable(chartData.data), options);
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
<div id="chart_div"></div>
If you're using multiple vaxes then add the column with role: 'style' immediately after the column you want to style.
Another solution:
set the style of the circles via CSS:
google.setOnLoadCallback(drawChart);
function drawChart() {
var chartData = {
data: {
cols: [{
label: "X",
type: "number"
}, {
label: 'Y',
type: "number"
}, {
label: 'Y',
type: "number"
}
],
rows: [
{c:[{v:1}, {v:5}, {v:4}]},
{c:[{v:2}, {v:1}, {v:2}]},
{c:[{v:3}, {v:3}, {v:5}]}
]
}
};
var options = {
curveType: 'function',
pointSize: 7,
series: {
//set unique colors for the series when you must set
//different points for mmultiple series
0: {
color: 'ff0000'
},
1: {
color: '#0000ff'
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(new google.visualization.DataTable(chartData.data), options);
}
#chart_div circle {
stroke-width: 4px !important;
fill: none !important;
}
#chart_div circle[fill="#ff0000"] {
stroke: #ff0000 !important;
}
#chart_div circle[fill="#0000ff"] {
stroke: #0000ff !important;
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
<div id="chart_div" ></div>
Dr. Molle's answer seemed to work for getting a hollow circle, although the point doesn't match the legend.
I figured out a workaround for an X shapped point. I used options.pointshape to give a star 4 sides, rotated it by 45 degrees and decreased the dent:
pointShape: {
type: 'star',
sides: 4,
dent: 0.1,
rotation: 45,
},
Hopefully there is a better way, but Dr. Molle's and this answer work for now.
For whoever is using Dr.Molle's brilliant CSS solution and is experiencing an issue where the second data series points disappear just make the second color the default color:
#chart_div circle {
stroke-width: 4px !important;
fill: #ffffff !important; // note that i'm not using transparent
stroke: #0000ff !important; // second color moved to be default
}
#chart_div circle[fill="#ff0000"] {
stroke: #ff0000 !important;
}
#chart_div circle[fill="#0000ff"] {
/*stroke: #0000ff !important;*/
}
**note: couldn't write this as a comment to Dr.Molle's answer due to not having enough reputation at the time.