I'm trying to align the title to the left instead of the center (shown in the image).
I know this is possible on chartJS v3.0.0-alpha.2, but reactchartjs only goes up to 2.9.30 as far as I know.
Does anyone know how to achieve this in reactchartjs?
I thought it would be something like:
options={{
title: {
position: 'top',
align: 'left',
},
}}
Any help would be appreciated.
You should use the align parameter. This sets the alignment of the title. Your options are:
start
center
end
Your align: 'left' isn't one of the above and will not have any effect. Setting align: 'start' however will give you exactly what you want:
The full code looks like this:
<Chart
type='line'
data={dat}
options={{
plugins: {
title: {
display: true,
align: 'start',
text: 'Bitcoin Mining Difficulty'
}
}
}} />
Let me also mention that you should not confuse that with position: 'left'. position moves the whole title into one of top, left, bottom, right area of the chart. An example with a combination of position: 'left' and align: start:
The Chart.js Plugin Core API offers a range of hooks that may be used for performing custom code. You can use the afterDraw hook to draw the title yourself directly on the canvas using CanvasRenderingContext2D.fillText().
In React, you can register the plugin as follows:
componentWillMount() {
Chart.pluginService.register({
afterDraw: chart => {
let ctx = chart.chart.ctx;
ctx.save();
let xAxis = chart.scales['x-axis-0'];
ctx.textAlign = "left";
ctx.font = "14px Arial";
ctx.fillStyle = "black";
ctx.fillText("Title", xAxis.left, 10);
ctx.restore();
}
});
}
You'll also have to define some extra padding at the top of the chart to make sure, the title appears on the canvas.
options: {
layout: {
padding: {
top: 20
}
},
...
Please take a look at this StackBlitz and see how it works.
Related
I want to create a feedback form using extjs. How to align the button at side of screen. Kinda like the one in the photo. It is snippet of dashboard
This is a floating button. Adjust the position and shape.
var body = Ext.getBody();
var button1 = Ext.widget('button', {
text: 'Edit',
handler: function (button) {
console.log("button push");
},
floating: true,
renderTo: body,
style: 'position: absolute; bottom: 20px; right: 20px;'
});
I would recommend you to use a border layout. define region:"east" like this.
set east region opacity and modify CSS if needed.
I want to adjust the position of the floater for a particular step, I was trying to do:
floaterProps: {
styles: {
tooltip: {
top: -200
},
arrow: {
top:-200
}
}
But it is not working!
Is this the wrong way?
You need to use position: absolute in your tooltip and then adjust the position with top, bottom, left, right properties. more about positioning on MDN documentation.
tooltip: {
position: absolute,
top: 20px,
left: 10px,
}
If you are trying to use multi-tooltips in your application, you can also adjust their position in the Z axis by adding z-index property. more information on MDN documentation.
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
I know how to centered it by use this option:
title: {
text: "This is title",
align: "center",
verticalAlign: "middle",
},
it works fine , but when there is a legend aligned in right or left , it will not perfectly displayed in the center , to add a x position to adjust it is ok ,but not responsive. when you change the window size , it will has some offsets.
here is the demo:
https://stackblitz.com/edit/react-highchart-jjzjx118
I tried use load/redraw to adjust it , but I don't know why it not work when I bind redraw function to react component, I will do some further action in it so I can't define it when I create the option.
You can position a title in a render callback function:
chart: {
events: {
render: function() {
var seriesElPos = this.seriesGroup.getBBox();
this.title.attr({
x: seriesElPos.width / 2 + seriesElPos.x
});
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4760/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
https://api.highcharts.com/highcharts/chart.events.render
I have implemented a scatterplot using react-plotly.js I would like the chart to re-size itself when the page layout changes. But currently, the layout of the chart doesn't change by itself. If I explicitly perform some function on the chart which forces the chart to redraw itself then only the chart width changes.
I applied useResizeHandler property and have set autosize to true. But that doesn't make any difference either.
<Plot
useResizeHandler
style={{ width: '100%' }}
data={chartData}
onClick={(data) => this.handlePlotClick(data)}
type={'scatter'}
layout={this.layout} />
const layout = {
autosize: true,
dragmode: true,
margin: {
l: 5,
r: 5,
t: 10,
b: 10,
pad: 0,
autoexpand: true
},
hovermode: 'closest',
hoverlabel: {
bgcolor: 'rgba(0,0,0,1)',
bordercolor: 'rgba(200,200,200,1)'
},
height: '650',
yaxis: {
visible: false
},
xaxis: {
autorange: false,
showline: true,
fixedrange: false, // true disables range selection on main graph
rangeslider: {
range: this.state.sliderRange,
visible: true,
borderwidth: 1,
bordercolor: '#000'
}
}
};
}
As you can see in the screenshot above, the div.svg-container has same width as the main-svg. But it still leaves white space on the right. I am unable to debug why it would behave that way. If I explicitly perform zoom on the chart that will redraw the plot then it will behave correctly. But I would like it to automatically resize when the page layout changes.
I was stuck on this problem too. Try window.dispatchEvent(new Event('resize')) from http://codrate.com/questions/how-can-trigger-the-window-resize-event-manually-in-javascript
I was calling resizeHandler when my chart is resized by dragging.
resizeHandler = () => {
this.child.resizeHandler();
window.dispatchEvent(new Event('resize'));
}
The charts always autoscales when the chart is resized, so I basically trigger the window resize when my chart size is changed. So for you, when you detect the page layout changes you can trigger the window resize.