I would like to switch from React Highcharts to React Highstock because of the compare option I would like to use in Highstock. Here is my config:
var config = {
credits: {
enabled: false
},
title: {
text: '' // No Title
},
chart: {
height: 200,
type: 'line',
backgroundColor: 'rgba(155, 255, 255, 0.0)' // Always transparent Background
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2,
split: true
},
yAxis: {
labels: {
format: '$ {value}' // Always Money
},
title: {
text: '' // No Label
}
},
xAxis: {
type: 'datetime',
labels: {
format: '{value:%Y\'%b}'
},
tickInterval: getTickInterval(this.props.interval),
},
plotOptions: {
series: {
color: transformColor(this.props.color),
lineWidth: 1,
compare: 'percent',
showInNavigator: true
},
line: {
marker: {
enabled: false
}
}
},
legend: {
layout:'vertical',
align: getLegendPosition(this.props.legend).align,
verticalAlign: getLegendPosition(this.props.legend).verticalAlign,
x: getLegendPosition(this.props.legend).x,
y: getLegendPosition(this.props.legend).y,
floating: true,
itemStyle: {
font: 'sans-serif',
fontWeight: 'bold',
fontSize: '9px'
},
symbolHeight: 10,
symbolWidth: 10
},
series: this.props.series
};
return (
<div>
<ReactHighcharts config={config}/>
</div>
)
}
But when I switch to Highstock:
return (
<div>
<ReactHighstock config={config}/>
</div>
)
It gives me an error:
InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/Highstock.a88db6d5.jsx') is not a valid name.
Any ideas?
Nevermind, don't actually use the React-Highstock npm package. Just do this:
const ReactHighstock = require('react-highcharts/ReactHighstock');
Related
How to correctly display large amount of data on ReactApexChart , Bar Chart. At image below, I am passing 552 entries. When amount of entries under 50 everything displays just fine, above this number starts look like a hell and performance is getting low. I am using React Js Class Component.
this.state = {
series: [{
name: props.name,
data: props.chartValue,
}, ],
options: {
grid: {
row: {
colors: ["#D6EAF8 ", "#D6EAF8"],
},
},
chart: {
type: "bar",
height: 350,
},
plotOptions: {
bar: {
borderRadius: 4,
horizontal: true,
colors: {
ranges: [{
from: 0,
to: Number.MAX_VALUE,
color: "#29ABE2",
}, ],
backgroundBarColors: [],
backgroundBarOpacity: 1,
backgroundBarRadius: 0,
},
},
},
dataLabels: {
enabled: true,
formatter: function(val) {
return val + ` min`;
},
offsetX: 15,
style: {
fontSize: "12px",
colors: ["#FFFFFF"],
},
},
xaxis: {
categories: props.ids,
labels: {
style: {
colors: [],
fontSize: "15px",
fontWeight: 500,
},
},
},
yaxis: {
categories: props.differenceInTime,
labels: {
style: {
colors: [],
fontSize: "15px",
fontWeight: 500,
},
},
axisTicks: {
show: true,
borderType: "solid",
color: "#78909C",
width: 10,
offsetX: 0,
offsetY: 0,
},
},
},
};
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="bar" />
</div>
Here is 552 entries
why put max integer for the colors? That could be a performance issue
ranges: [{
from: 0,
to: Number.MAX_VALUE,
color: "#29ABE2",
}
Chart.js doughnut text visibility. Tell me how to make it so that when the values intersect, the text comes out and changes its position.
const myChart = new Chart(canvas,
{
type: 'doughnut',
data: {
labels: dataNameDB,
datasets: [{
data: dataCountDB,
backgroundColor: backgroundColor,
borderWidth: 0,
}],
},
plugins: [ChartDataLabels, DoughnutLabel],
options: {
cutout: 340,
responsive: true,
animation: false,
plugins: {
legend: {
display: false,
},
datalabels: {
formatter: (val, ctx) => {
return Math.round((ctx.chart.data.datasets[0].data[ctx.dataIndex] * 100) / summChart()) + "%";
},
display: (val,ctx) =>{
return 'auto';
},
clamp: true,
clip: true,
anchor: 'center',
align: 'center',
offset: 1,
font: {
size: 65,
weight: 'bold',
color: '000000'
},
color: '000000',
labels: {
value: {
color: '#000000'
}
}
},
doughnutlabel: {
labels: [{
text: summChart,
font: {
size: 140,
weight: 'bold',
color: '000000'
}
}]
}
}
}
},
);
Now it outputs something like this, but I need it to be like this:
Although the documentation says that display 'auto' is responsible for this, how to catch it when the text is hidden in order to move it?
A beginner in react... I am able to reach a function post-click event of a bar but unable to route to a link or page.
I may have other defined routes to which I want to go, like a page consisting of a table, listing all the sales and it automatically gets filtered. How am I supposed to do that? Please guide me through. I have searched for this a lot and finally was able to reach a function but now I am stuck.
class SalesWidget2 extends Component {
routeChange(index){
console.log('I am here');
// let history = useHistory();
// history.push('google.com');
}
constructor(props) {
super(props);
this.state = {
colors:['#FEB019'],
series: [{
name: 'Sales ',
type: 'column',
data: [1.4, 2, 2.5, 1.5, 2.5, 2.8, 3.8, 4.6],
}],
options: {
chart: {
type: 'bar',
height: 350,
fontFamily: 'Roboto, sans-serif',
fontSize: '14px',
events:{
click: (event, chartContext, config) =>{
this.routeChange(config.dataPointIndex);
}
},
},
plotOptions: {
bar: {
borderRadius: 4,
horizontal: false,
}
},
dataLabels: {
enabled: false
},
title: {
text: 'My Store Performance',
align: 'left',
offsetX: 50,
fontSize: '14px',
},
xaxis: {
title: {
text: 'Time',
style: {
fontSize: '14px',
},
},
categories: ['June 2021', 'July 2021','August 2021', 'September 2021', 'October 2021','November 2021','December 2021', 'January 2022'],
},
yaxis:{
title: {
text: 'Sales',
style: {
fontSize: '14px',
}
},
labels:{
formatter: function(val) {
return val.toFixed(1);
}
}
},
tooltip: {
x:{
title:{
text: 'Sales',
}
},
y: {
formatter: function(val) {
return "$" + val.toFixed(0) + " million";
}
}
},
fill:{
colors:['#FEB019'],
},
stroke:{
colors:['#FEB019'],
},
legend: {
horizontalAlign: 'left',
offsetX: 40,
fontSize: '14px',
},
responsive: [{
breakpoint: 1000,
options: {
plotOptions: {
bar: {
horizontal:true,
vertical: false,
}
},
legend:{
position: "bottom"
},
yaxis:{
labels:{
formatter: function(val) {
return val.toFixed(0);
}
}
},
xaxis:{
labels:{
formatter: function(val) {
return val.toFixed(1);
}
}
},
},
}],
},
};
}
render() {
return(
<Chart options={this.state.options} series={this.state.series} type="bar" height="350" />
)
}}
using same options in js-fiddle and react app y-axis break is not working in react app but is working fine in js-fiddle.
highchart version i am using is 7.2.1
[enter link description here][1] jsfiddle where break is working
Highcharts.chart('container', {
chart: {
height: 250,
animation: false,
borderColor: '#EFF3F5',
plotBorderColor: '#EFF3F5',
plotBorderWidth: 1,
style: {
},
marginLeft: undefined,
},
legend: {
enabled: false,
},
credits: {
enabled: false,
},
title: {
text: '',
},
subtitle: {
text: '',
},
xAxis: [{
categories: [],
type: 'datetime',
crosshair: {
color: '#96abb6',
width: 1,
snap: false,
},
labels: {
style: {
fontSize: '10px',
color: '#334252',
fontFamily: 'DecimaMono',
textTransform: 'uppercase',
lineHeight: '12px',
whiteSpace: 'nowrap',
},
formatter: function() {
return this.value;
},
},
alternateGridColor: '#F7F9FA',
}, ],
yAxis: [{
tickPositioner: function() {
const positions = [];
let tick = Math.floor(this.dataMin);
const max = Math.min(200, this.dataMax);
const increment = Math.ceil((max - this.dataMin) / 6);
if (this.dataMax !== null && this.dataMin !== null) {
for (tick; tick - increment <= max; tick += increment) {
positions.push(tick);
}
}
if (this.dataMax > 200) {
positions.push(this.dataMax);
}
return positions;
},
title: {
text: null,
},
labels: {
style: {
fontSize: '10px',
textAlign: 'right',
},
},
breaks: [{
from: 200,
to: 1700,
}],
}, ],
series: [{
name: 'Attraction 1',
data: [-0.3543, 5.4184, -31.3792, 95.2435, 135.5852, 104.7914, 84.5844, 8.5129, -38.4724, -54.1816, -13.1134, 677.986, 1763, 1420.0503, 760.9013, 100.8341, 10.4576, 89.8975, 97.4758, 55.4993, 51.4611, 24.1278, 9.9771, 26.9394, 22.042, 32.9894, 145.3526, 88.1315, 135.0617, 119.6472, 29.8568, 43.94, 26.4247, 43.4719, 128.6346, 119.7356, 33.2159, 58.6534, -7.6348, 2.1865, 31.7992],
color: '#e63c45',
lineWidth: 3,
}, ]
});
[enter image description here][2]
[2]: https://i.stack.imgur.com/TIKkO.png screenshot from react app
I reproduce your code in the React environment and everything looks fine, same as in the jsFiddle.
Demo: https://codesandbox.io/s/highcharts-react-demo-83jnr?file=/demo.jsx
I m developing report page. In this page I m using highcharts and highmaps together. At first load there is no more problem but when user click the another page, then back to again this report page highmaps area scroll down.
I have single page application, so every link using ajax call.
I found this solution, but this way I cannot store any rootscope element. Also I dont want to use cookies or localstorage.
$('#mapsmaps').highcharts('Map', {
title : {
text : 'City Lived',
style: {
color: '#008bff'
}
},
subtitle : {
text : ''
},
legend: {
title: {
text: ' ',
style: {
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
},
floating: true,
valueDecimals: 0,
valueSuffix: '',
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255, 255, 255, 0.85)',
symbolRadius: 0,
symbolHeight: 10,
},
mapNavigation: {
enabled: false,
buttonOptions: {
verticalAlign: 'bottom'
}
},
tooltip: {
// backgroundColor: 'none',
// borderWidth: 0,
// shadow: false,
useHTML: true,
padding: 0,
pointFormat: '<span class="f32"></span>'
+ ' {point.name}'
},
colorAxis: {
dataClasses: [{
from: 1,
to: 1000,
color: "#5FA08F"
}, {
from: 1000,
to: 2000,
color: "#82A970"
}, {
from: 2000,
to: 3000,
color: "#E5AF47"
}, {
from: 3000,
to: 4000,
color: "#EC8A37"
}, {
from: 4000,
to: 5000,
color: "#F55126"
}, {
from: 5000,
color: "#F30505"
}]
},
series : [{
data : data,
mapData: Highcharts.maps['countries/en/en-all'],
joinBy: 'hc-key',
name: 'City',
states: {
hover: {
color: '#BADA55'
}
},
animation: {
duration: 1000
},
dataLabels: {
enabled: false,
format: '{point.name}'
}
}],
navigation: {
buttonOptions: {
enabled: false
}
}
});
}