I am using kaktana-react-lightweight-charts, everything works perfectly until I got e.timeScale(...).unsubscribeVisibleTimeRangeChange is not a function error, as I did not implement it in my code. I do not know why I need this?.. The scenario was, At first my chart will displayed nicely as I wanted, then when I click at other data, it should display new data with same chart but instead I get this error. So I think I will implement unsubscribeVisibleTimeRangeChange function but dont know how..
<Chart
lineSeries={this.getChartData1("line", mainData)}
options={optionMaster}
autoWidth
height={indexMode ? 320 : 240}
onCrosshairMove={(e) => this.createLineChart(e, mainData)}
onClick={(e) => this.openWindow(e, mainData)}
( ....unsubscriberVisibleTimeRangeChange..how to call from here?...)
/>
This is my options
optionMaster: {
alignLabels: true,
localization: {
dateFormat: "dd MMM 'yy",
},
handleScroll: {
mouseWheel: false,
pressedMouseMove: false,
horzTouchDrag: false,
vertTouchDrag: false,
},
handleScale: {
axisPressedMouseMove: false,
mouseWheel: false,
pinch: false,
},
priceScale: {
position: "left",
autoScale: true,
invertScale: true,
alignLabels: false,
borderVisible: false,
borderColor: "#555ffd",
scaleMargins: {
top: 0.3,
bottom: 0.25,
},
},
timeScale: {
fixLeftEdge: true,
lockVisibleTimeRangeOnResize: true,
},
},
Related
I'd like to use this prop to insert some paragraph. I've tried triggering some "Space" event but it changes anything.
Here's my code:
<Editor
editorState={editorState}
toolbarClassName={style.toolBarStyle}
wrapperClassName='wrapperClassName'
editorClassName={style.editorInputArea}
toolbar={{
options: [
"inline",
"fontSize",
"list",
"textAlign",
"image",
"link",
"history",
],
fontSize: {
inDropdow: false,
options: [14, 16, 18, 24, 30, 36],
},
inline: {
inDropdown: false,
options: ["bold", "italic", "underline"],
},
list: {
inDropdown: false,
options: ["unordered", "ordered", "indent", "outdent"],
},
textAlign: { inDropdown: true },
link: {
inDropdown: false,
showOpenOptionOnHover: true,
defaultTargetOption: "_self",
options: ["link", "unlink"],
linkCallback: undefined,
},
history: { inDropdown: false },
image: {
uploadCallback: uploadCallback,
alignmentEnabled: true,
previewImage: true,
inputAccept: "image/gif,image/jpeg,image/jpg,image/png,image/svg",
},
}}
onEditorStateChange={(newState) => {
setEditorState(newState);
// console.log(draftToHtml(convertToRaw(newState.getCurrentContent())));
}}
onTab={
(e) => {
e.preventDefault();
const { target } = e;
target.dispatchEvent(
new KeyboardEvent("keydown", {
code: "Space",
key: " ",
keyCode: 32,
cancelable: true,
repeat: false,
bubbles: true,
view: window,
which: 32,
})
);
}
}
/>
The documentation doesn't help on saying how it can be used to create paragraph, once that's the main use of pressing tab when you're writing something. Event the PR on GitHub that implemented this props says nothing about how to use it for creating paragraphs.
I've used EditControl from "react-leaflet-draw" for drawing polygon and polyline
<FeatureGroup>
<EditControl
ref={editRef}
position="topright"
onCreated={onCreate}
onEdited={onEdited}
onDeleted={onDeleted}
onEditVertex={onEditVertex}
onEditStop={onEditStop}
draw={{
polyline: {
shapeOptions: { color: colorDraw },
allowIntersection: true,
showLength: true,
metric: true,
feet: true,
},
polygon: {
allowIntersection: true,
shapeOptions: { color: colorDraw },
edit: false,
showLength: true,
metric: false,
feet: false,
showArea: false,
},
rectangle: false,
circle: false,
circlemarker: false,
marker: false,
}}
edit={{
selectedPathOptions: {
// this property should be one level up
color: colorDraw,
fillColor: colorDraw,
},
shapeOptions: { color: colorDraw },
}}
/>
</FeatureGroup>
And I used the colorDraw variable for choosing the color every time I draw those shapes.
So is there a way I can change the color of each image when editing those images?
I tried to use selectedPathOptions for the change but it didn't work.
Thanks, everyone!
We have implemented high chart - Stacked bar as below -
const options = {
chart: {
….
},
title: {
text: ''
},
xAxis: {
visible: false,
categories: ['']
},
credits: {
enabled: false
},
yAxis: {
visible: false,
…….
},
legend: {
itemStyle: {
cursor: 'default',
fontWeight: 'normal'
},
reversed: true
},
plotOptions: {
series: {
cursor: 'default',
stacking: 'normal',
enableMouseTracking: false,
events: {
legendItemClick: function () {
return false;
}
},
states: {
hover: {
enabled: false
}
}
}
},
tooltip: {
useHTML: true,
enabled: false,
outside: true,
followPointer: true,
crosshairs: false,
},
accessibility: {
…….
},
exporting: {
enabled: false
},
series: props.series
};
It loads fine, also hovering on any of the block does not change opacity for other blocks.
How can we disable hovering on legends below stacked bar?
Example - http://jsfiddle.net/clockworked247/FGmgC/
In above link, basically hover effect on John, Joe, Jane, Janet legends need to be disabled.
Thanks all.
Below answer helped, and worked.
Above link should help. If you are looking for more solutions you can also achieve it using CSS. Make pointer event none for legends like .highcharts-legend-item:{ pointer-events:none; }
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'm using highcharts-react-official to render a HighchartsReact component. It shows up and works appropriately until I re-render the component. By changing the state at all, the chart will shrink vertically.
I've experimented with setting reflow in the chart options as well as toggling allowChartUpdate and immutable flags on the component itself to no avail.
const ChartView = props => {
const { data } = props;
if(data.highstockData && data.startDate && data.endDate) {
const min = parseInt(moment(data.startDate, 'x').startOf('day').format('x'));
const max = parseInt(moment(data.endDate, 'x').startOf('day').format('x'));
const chartOptions = getChartConfig(data.highstockData, min, max);
return (
<HighchartsReact
highcharts={Highcharts}
options={chartOptions}
/>
)
}
return null;
};
And the parent Component's render return:
return (
<div className="vertical-margin">
{isFetching && !data && <LoadingView/>}
{hasError && !data && <ErrorView/>}
{
data &&
<React.Fragment>
{buttonRow}
<ChartView
data={data}
/>
</React.Fragment>
}
</div>
)
As I said re-rendering for any reason causes the highchart to shrink in height with each re-render. For testing, I call this line:
this.setState({});
I could post the chart config if needed, but it's nothing too fancy.
I haven't been able to find anyone else having this issue and have been pulling my hair out searching for an answer.
It turned out to indeed be a highchart option I was passing into the component. Apparently it was because this option:
scrollbar: {
enabled: true
},
Was not nested under the xAxis section of the options as it should be. It still created a scrollbar correctly but caused this weird, shrinking issue on component render.
chart: {
marginRight: 75,
ignoreHiddenSeries: false,
panning: false,
spacingTop: 10,
height: `${Constants.HIGHCHART_TABLE_HEIGHT}px`,
},
time: {
useUTC: false
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
legend: {
align: 'left',
enabled: true,
itemMarginTop: 5,
itemStyle: {
"color": "#333333",
"cursor": "pointer",
"fontSize": "12px",
"fontWeight": "normal",
"width": "240px"
},
layout: 'vertical',
verticalAlign: 'top',
y: 0
},
navigator: {
enabled: false,
xAxis: {
tickPixelInterval: 100
}
},
plotOptions: {
line: {
marker: {
enabled: true,
fillColor: "#ffffff",
lineColor: null,
lineWidth: 1
}
}
},
rangeSelector: {
enabled: false
},
tooltip: {
formatter: function () {
const sortedPoints = this.points.sort((a, b) => {
return a.point.legendOrder - b.point.legendOrder
});
return [
'<b>',
moment(this.x, 'x').format('MM/DD/YYYY HH:mm'),
'</b><br/>',
sortedPoints.map((item) => {
return [
'<br/><span style="color:'+ item.series.color +';">\u258c</span> ',
'<span>' + item.series.name + '</span>: <b>' + item.y + '</b>',
item.comments ? '<p>(' + item.comments + ')</p>' : ''
].join('');
}).join('')
].join('');
},
shared: true,
crosshairs: {
color: '#ddd',
dashStyle: 'solid'
},
},
xAxis: {
type: 'datetime',
labels:{
formatter: function() {
const parsed = moment(this.value, 'x');
return parsed.format('HH:mm') + '<br/>' + parsed.format('MM/DD');
}
},
min,
max,
reversed: true,
scrollbar: {
enabled: true
},
},
yAxis: [{
alignTicks: false,
max: 60,
min: 0,
opposite: false,
tickInterval: 5,
title: {
text: ''
}
}, {
alignTicks: false,
max: 300,
min: 0,
opposite: true,
tickInterval: 25,
title: {
text: ''
}
}],
//The below properties are watched separately for changes.
series: data,
title: {
text: ''
},
loading: false,
};
Also here's the full options file for reference. It wasn't just that scrollbar option causing it. It was a specific combination of options as I discovered by trying to re-create the problem with a new chart.