I am using RGraph in Angular7 and i want to apply space between bar and it's label
Looking at the style of the chart you might need to upgrade and then you could add the property yaxisLabelsOffsetx to your configuration. Here's an example:
new RGraph.HBar({
id:'cvs',
data: [8,4,6,3],
options: {
marginInner: 10,
variant: '3d',
xaxis: false,
yaxis: false,
labelsAbove: true,
labelsAboveOffsetx: 10,
yaxisLabels: ['Jimmy','James','Tabatha','Richard']
}
}).draw();
And a codepen of the example is here:
https://codepen.io/rgraph/pen/mdReQmm
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 have a Line Chart with chart.js and one of the lines has to fill the background delimited with another line. It works well, but how can I do it to see chart axes when the background is filled ??
Here is an example of what I currently have: codeSandBox
From playing around with it, most of your options are not being recognized at all.
I played with the colors, layouts, displaying things, etc., and nothing made a difference. The only thing that's making a difference is the responsive key.
Normally, the way you would change the way the lines would be displayed is like this:
const options = {
legend: { display: false },
title: { display: true, text: "Line Chart" },
scales: {
yAxes: [{
gridLines: {
z: 99
},
ticks: {
beginAtZero: true
}
}]
},
xAxes: [{
gridLines: {
z: 99
}
}],
responsive: true
};
In your options object, under the scales key, under each axis, you can set the z-index of the gridlines. This set of options should work, according to this.
However, because your options aren't being recognized, none of the options here are even taking effect in the first place.
I haven't used Chart.js in react so I can't really help you more than that, in this aspect.
However, what I can say does work, is in line 10 in your sample code in the sandbox, I changed the hex value to rgba:
backgroundColor: "rgba(235, 245, 251, 0.5)",
It's the same color, only a little lighter, but what is most important is you can see the grid lines.
https://i.stack.imgur.com/VQ7v3.png
My advice is if you're only using React for this chart, don't. It seems to be making things harder.
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],
},
I have created a bar chart with rangeslider using react-plotly.js. I want to enable drag and zoom feature on chart area as provided by the library. But that feature is not working for me. The fixedRange attribute of layout is not true. The cursor changes to the double arrow cursor but when I perform drag action, nothing happens. The area selected is not highlighted and not even zoomed in. But when I double click, the area get zoomed out.
My layout settings looks like:
const layout = {
title: this.state.chartTitle,
autosize: true,
dragmode: false,
// showlegend: true,
margin: {
r: 0,
t: 50,
b: 100,
pad: 0,
autoexpand: true
},
scrollZoom: true,
hoverlabel: {
bgcolor: 'rgba(0,0,0,1)',
bordercolor: 'rgba(200,200,200,1)'
},
width: this.state.layoutWidth,
height: '750',
yaxis: {
title: this.state.yaxisTitle,
type: 'linear',
showgrid: true
},
xaxis: {
title: this.props.intl.formatMessage(messages.xAxisTitle),
type: this.state.xaxisType,
autorange: false,
showgrid: false,
range: this.state.axisRange,
rangeslider: {
visible: true,
range: this.state.sliderRange
}
}
I even tried scrollZoom attribute but that doesn't work either. The version of plotly.js and react-plotly.js that I am using is :
"plotly.js": "^1.41.3",
"react-plotly.js": "^2.2.0",
"react-plotlyjs": "^0.4.4",
Am I suppose to also add some css settings to it ? Please help.
Instead of putting
scrollZoom: true to layout, please try to put it into the config tree, like:
const Plot = createPlotlyComponent(Plotly);
ReactDOM.render(
React.createElement(Plot, {
data: [...],
layout: {...},
config: {
scrollZoom: true,
}
}),
document.getElementById('root')
);
I want to use KendoUI Line Graph for Angular which is not displaying X Axis Label. I tried editing the existing example where the code is as follows:
k-series="[
{ field: 'nuclear', name: 'Nuclear electricity' },
{ field: 'hydro', name: 'Hydro electricity' },
{ field: 'wind', name: 'Wind electricity' }
]
I tries changing the code as shown in some other angular chart example by KendoUI as
k-series="[{ xField: 'price', yField: 'performance' }]"
k-x-axis="{
max: 1000,
labels: { format: '${0}' },
title: { text: 'Price' }
}"
k-y-axis="{
min: 80,
labels: { format: '{0}%' },
title: { text: 'Performance Ratio' }
But it seems if your chart type is line, it doesn't recognizes k-x-axis and k-y-axis .
k-series-defaults="{ type: 'line'}"
Please provide help as how I can show x-axis values:
Link to their Angular Line Chart is as follows:
To see the information about this chart, please see
http://demos.telerik.com/kendo-ui/line-charts/angular
For Editing : http://dojo.telerik.com/iVOxo
Scatter charts, such as scatterLine use the axes configured in xAxis and yAxis. Arrays are accepted when defining multiple axes.
In your example the series type is set to line. This series type uses the categoryAxis and valueAxis. Therefore the axis configuration, as it is, will be ignored.
You should remove the field: '...' bindings and change the series type to scatterLine
k-series-defaults="{ type: 'scatterLine'}"
I hope this helps.