Anyone have an example of how to set the background to appear as a gradient in Rgraph? Something like this :
http://support.softwarefx.com/JavaAPI/CfxJava65_api/SoftwareFX/ChartFX/images/GradientBackgroundObject.png
Thanks
This was answered in the RGraph forum today:
[Formerly there was just a link, but here's some sample code instead]
new RGraph.Bar({
id: 'cvs',
data: [6,8,6],
options: {
colors: ['#888'],
backgroundColor: 'Gradient(white:purple)',
backgroundGrid: false,
marginInner: 80
}
}).draw();
Related
Hi everyone, i'm getting a trouble with customizing TooltipMarker in AntV Ant Design Charts with Line Shape. I have already read many documents and find any solution but none of them can help me to solve my problem.
It is my config about Line Shape:
const data = [
264, 417, 438, 887, 309, 397,
];
const config = {
height: 60,
autoFit: false,
data,
smooth: true,
tooltip: {
showMarkers: true,
marker: {
},
}
};
<TinyLine {...config} />
I have already known that showMarker can be show a marker wheater or not, but i dont know how to cutomize marker
I need to customize from to ( the circle in the line )
I hope someone help me with this problem. Thanks for reading my questions. Have a nice working days.
Is it anyhow possible to set the label into the bar chart?
Like this example:
I couldnt find an example on the official page: Official example page
//EDIT
Later I had other problems, but I was able to solve them by switching to Nivo Charts. Nivo Charts
You could do this using label options in this way:
options: {
scales: {
xAxes: [
{
ticks: {
autoSkip: false,
maxRotation: 90,
minRotation: 90,
padding: -110
}
}
]
}
}
The result is:
This is a codesandbox example.
You can use the LabelList component with a custom render, here is the link of the documentation:
https://recharts.org/en-US/api/LabelList
also you can use the position property to center it inside the bar , here is an example of a customized LabelList :
https://recharts.org/en-US/examples/BarChartWithMinHeight
enter image description here
Trying to use Quill in my project. I'm using Bootstrap class 'row' with two columns. Right hand side column has Quill, everything works fine except this equation box (see in the image). Can anybody help?
I solved this using bounds. Here is the code snippet:
let quill = new Quill('#editor-container', {
modules: {
formula: true,
syntax: true,
toolbar: '#toolbarOptions'
},
placeholder: 'Compose your question here...',
theme: 'snow',
bounds: '#editor-container'
});
I am using rGraph to draw the chart. it is working fine for the first time. when trying to generate the graph with different input data for the second time, without refreshing the page. The graph is generating fine, but the x-axis title is disappearing. can anyone help me with this?
FYI: I am making that div empty, before generating the graph.
Attaching image:
1:
In the first image, you can see the Date.
Here you don't see the Date. when I change the input data and tried to generate the chart.
if(document.getElementById(chartID)){
RG.ObjectRegistry.Remove(document.getElementById(chartID));
}
var barGraph = new RGraph.Bar({
id: chartID,
data: chartData,
options: {
variant: '3d',
variantThreedAngle: 0.05,
colorsStroke: 'rgba(0,0,0,0)',
colors: chartColorArr,
marginTop: 35,
marginLeft: 45,
marginRight: 15,
marginBottom: 85,
xaxisLabels: x_axis_label_Arr,
shadowColor:'#ccc',
shadowOffsetx: 3,
backgroundGridColor: '#eee',
xaxisScaleZerostart: true,
axesColor: '#f2f2f2',
//yaxisScaleUnitsPost: 'H',
//title: 'User Sessions',
//key: [legendsTitle],
keyShadow: true,
keyShadowColor: '#ccc',
keyShadowOffsety: 0,
keyShadowOffsetx: 3,
keyShadowBlur: 15,
variantThreedXaxis : true,
variantThreedYaxis : true,
bevelled : false,
axes : true,
tooltips: chartTooltipArr,
tooltipsEvent : 'onmousemove',
xaxisTitle : **'Date',**
yaxisTitle : yAxisTitle,
xaxisTitleSize : legendFontSize,
yaxisTitleSize : legendFontSize,
xaxisLabelsSize : legendFontSize,
yaxisLabelsSize : legendFontSize,
yaxisTitlePos : 0.1,
colorsSequential : true,
}
});
barGraph.draw();
Thanks
By the looks of the 3D style and some other cues, you're using quite an old version. Here's two modern-style 3D charts:
https://www.rgraph.net/demos/bar-3d-effect-multi-row.html
https://www.rgraph.net/demos/bar-ajax.html
There's more examples in the download archive which are worth looking at.
As for the problem with your chart, I think the easiest solution would be to set the textAccessible option to false:
textAccessible: false,
I'm using the Sencha Touch 2.1 with Charts 1.1 to display some data.
I have a pie chart depicted below:
I want the labels to stay where they are now , but I want them to be horizontal (not rotated).
extend: 'Ext.chart.PolarChart',
requires: [
'Ext.chart.axis.Numeric',
'Ext.chart.axis.Category',
'Ext.chart.series.Pie',
'Charting.store.charts.perStore',
'Ext.chart.interactions.Rotate'
],
config: {
colors: ["#6295C7", "#CCCCC", "#FFFFF"],
store: 'chrtProduct',
// centered:true,
// innerPadding:20,
series: [{
type: 'pie',
labelField: 'verdeling',
label:{
/*display:'middle',
orientation:'horizontal',*/
field:'patVerdeling',
font: '1em Trade Gothic LT Std Bold',
contrast:true,
disableCallout:true
},
xField: 'patVerdeling'
//,rotation:90
}]
//,interactions: ['rotate']
The following code doesn't seem to do anything when uncommented.
display:'middle',
orientation:'horizontal',
Ok, I'm not sure whether this is the best way or not but it works for me, so after spending some time digging into the sencha chart library, the solution is easier then what I expected.
Just comment this line in PieSlice.js located at touch/src/chart/series/sprite/PieSlice.js of your app project:
labelCfg.rotationRads = midAngle + Math.atan2(surfaceMatrix.y(1, 0) - surfaceMatrix.y(0, 0), surfaceMatrix.x(1, 0) - surfaceMatrix.x(0, 0));
This line perform as the key role to rotate the label of your pie chart.