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
Related
I have a bar chart that always shows 4 bars. The bars are coloured dynamically. It looks like the coloured box takes its colour from the first data. I would like to use the colour from the 4th (last) data value. Maybe the options:plugins:legend:label:sort function helps but I don't understand what it does.
options
const options = {
scales: {
x: {
grid: {
display: false,
color: 'rgba(0,0,0)'
}
},
y: {
display: false,
min: 0,
max: 4
},
},
plugins: {
legend: {
position: 'bottom'
}
}
}
So I don't know if I can change the data that the box color comes from, or if there is a config option somewhere where I can change it manually.
You can use the generateLabels function as described here.
Please take a look at below runnable sample code and see how it works.
new Chart('myChart', {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{
label: 'My Dataset',
data: [300, 50, 100],
backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
}]
},
options: {
responsive: false,
plugins: {
legend: {
labels: {
generateLabels: chart => {
let ds = chart.data.datasets[0];
let color = ds.backgroundColor[ds.backgroundColor.length - 1];
return [{
datasetIndex: 0,
text: ds.label,
fillStyle: color,
strokeStyle: color
}];
}
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="myChart" height="180"></canvas>
Following up with #uminder's answer, if you want to keep the hide/show chart and the line-through style after clicking on the legend, you can add the following line:
options: {
responsive: false,
plugins: {
legend: {
labels: {
generateLabels: chart => {
let ds = chart.data.datasets[0];
let color = ds.backgroundColor[ds.backgroundColor.length - 1];
return [{
datasetIndex: 0,
text: ds.label,
fillStyle: color,
strokeStyle: color,
+ hidden: !chart.isDatasetVisible(0)
}];
}
}
}
}
}
I am using line-apex Charts in ReactJs. If there is no data available then legend for Y-Axis is invisible. And if data is available they will show up. I want legend to be displayed even if there is no data in series.
Alternatives I tried out: If there is no data in DB, send seriesData with 0 Values, it will show the point on the graph with 0 value and legend will be available. But, I want to get rid of that point.
getOptions() {
return {
chart: {
height: 200,
type: "line",
stacked: false,
},
colors: this.themes[this.props.theme],
dataLabels: {
enabled: false,
},
stroke: {
width: [3.5, 3.5],
},
xaxis: {
categories: this.props.xCategories,
labels: {
style: {
color: "#263238",
},
},
},
yaxis: [
{
axisTicks: {
show: true,
},
axisBorder: {
show: false,
},
labels: {
style: {
colors: this.themes[this.props.theme][0],
fontWeight: "bold",
},
},
tooltip: {
enabled: false,
}
},
{
seriesName: "Revenue",
opposite: false,
axisTicks: {
show: true,
},
axisBorder: {
show: false,
},
labels: {
style: {
colors: this.themes[this.props.theme][1],
fontWeight: "bold",
},
},
},
],
legend: {
position: "top",
horizontalAlign: "left",
offsetX: -15,
fontWeight: "bold",
}
}
}
And below is the render method:
render() {
return (
<div>
<Chart
options={this.getOptions()}
series={this.props.seriesData}
type='line'
/>
</div>
);
}
There are a few properties that determine whether the legend should be shown in different circumstances. There's information available in the ApexCharts documentation, but here's an overview:
showForSingleSeries
default: false
This will determine if the legend should be shown even if there is just one series being displayed on the graph.
showForNullSeries
default: true
This will determine whether series that contain only null values are hidden.
showForZeroSeries
default: true
This will determine whether series that contain only zero values are hidden.
In your case, you'll want to make sure first of all that the showForSingleSeries is set to true to ensure that the legend is always shown. Secondly, rather than returning a series that contains a zero value, you can return either an empty array or an array containing null elements.
Finally, in order for the legend to show up when using your code, I had to add a series property to the options object. This is because the legend won't display unless it has any series names to show - it doesn't know the names of the series you'll be providing it with unless you specify it.
var options = {
...
series: [
{
name: "Revenue",
data: []
}
]
...
}
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 a React HorizontalBar component being used like so:
<div>
<HorizontalBar data={myData} options={myOptions} height={80} />
</div>
The options supplied are:
{
title: {
display: true,
text: 'My Title',
},
tooltips: { enabled: false },
hover: { mode: null },
legend: { display: false },
responsive: true,
maintainAspectRatio: false,
layout: {
padding: {
left: 10,
right: 10,
top: 0,
bottom: 0,
},
},
animation: {
duration: 0,
},
scales: {
xAxes: [
{
position: 'top',
gridLines: {
display: false,
},
ticks: {
beginAtZero: false,
min: 0,
max: 100,
sampleSize: 2,
callback: function (value: number, index: any, values: any) {
if (value == 0 || value == 100) {
return value;
}
return '';
},
},
stacked: true,
},
],
yAxes: [{ stacked: true }],
},
};
Currently, this is what it looks like. I've added a background color on the canvas to show you what is going on:
Several things are wrong here that I would like some help on:
I cannot figure out why there is some mysterious padding on the left side of my canvas.
I would like to compress the distance between the gradient bar and the title but nothing I've tried in regards to adding padding options to the title attribute seem to work.
Finally, there is actually supposed to be a data label that is clipped because the size of the canvas. If I adjust the height attribute of the HorizontalBar to 140, it reveals:
Basically, what I want is that data label to be shown without everything so vertically stretched out (and without the y-axis line that has appeared in the second photo).
I want it to look something like this:
How do I achieve that?
Edit: I figured out the y-axis line display issue. I just have to add gridLines: { display: false } to my yAxes option and that removes it.
Title has its own padding, defaulting to 10.
yAxis can be hidden totally to remove the space (display: false).
tickMarkLength can be set to a negative number for xAxis grid lines to move those labels closer.
You should add padding to the bottom for the data label.
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')
);