I have a component with barChart, but i have a socket that i receive new values for this barchart. If the value change from 19 to 200, i must do double click for reset zoom. There are any config for do that automatically?
my plotly config is:
layout: {
autosize: true,
xaxis: {
title: bottomText,
autorange: true
},
yaxis: {
title: leftText,
autorange: true
},
dragmode: 'zoom',
hovermode: 'closest',
margin: {
t:20,
b: 150
},
transition: {
duration: 500,
easing: 'cubic-in-out'
}
},
data: [{
x: details.index,
y: details.fw,
type: 'bar'
}],
config: {
displaylogo: false,
locale: 'es',
}
You can reset the zoom by assigning a new value to layout.uirevision when updating your chart. See https://plot.ly/javascript/uirevision/#reset-user-changes
Related
I create some chart in dashboard using react-chart-js.
exmaple
but I have problem now chart not clear. I decided do change chart canvas size move mouse point over the chart . but i can't find solution for that.
i currently use "react-chartjs-2": "3.3.0" and "chart.js": "^3.6.0" packages
i use this option list for draw charts
const options = {
responsive: true,
animation: {
duration: 0,
},
plugins: {
legend: {
fullSize: false,
position: "bottom" as const,
labels: {
display: true,
},
},
title: {
display: true,
color: "white",
font: {
size: 14,
family: "tahoma",
weight: "normal",
style: "italic",
},
text: axis.thresholdValues.sensorName,
},
subtitle: {
display: true,
text: `average: x-axis: ${axis.average.x} y-axis: ${axis.average.y} z-axis: ${axis.average.z}`,
color: "white",
align: "end",
font: {
size: 12,
family: "tahoma",
weight: "normal",
style: "italic",
},
// padding: {
// bottom: 20,
// },
},
zoom: {
pan: {
// pan options and/or events
enabled: true,
speed: 0.01,
},
limits: {
// axis limits
},
zoom: {
// zoom options and/or events
wheel: {
enabled: true,
},
pinch: {
enabled: true,
},
speed: 0.01,
},
},
annotation: {
annotations: {
min: {
// type: 'line',
yMin: axis.thresholdValues.min,
yMax: axis.thresholdValues.min,
borderColor: "#D8D8D8",
// borderWidth: 2,
},
max: {
// type: 'line',
yMin: axis.thresholdValues.max,
yMax: axis.thresholdValues.max,
borderColor: "#DB00FF",
// borderWidth: 2,
},
},
},
tooltip: {
mode: "index",
intersect: false,
},
},
spanGaps: true,
datasets: {
line: {
pointRadius: 0, // disable for all `'line'` datasets
},
},
elements: {
point: {
radius: 0, // default to disabled in all datasets
},
},
transitions: {
zoom: {
animation: {
duration: 0,
},
},
},
scales: {
x: {
title: { display: true, text: "Time", align: "end" },
type: "time",
},
y: {
title: { display: true, text: "second", align: "top" },
},
},
events: ["click"],
hover: {
mode: "nearest",
intersect: false,
},
};
<Line data = {data} option = {option} />
Any one can suggest solution for it.
I have a react chartjs project that uses chartjs-chart-matrix to render a heatmap. My code config looks like so:
const getHeatmapConfig = ({
heatmapData,
getBackgroundColor,
xAxisLabels,
tissues: items,
openMenu,
title
}) => ({
type: 'matrix',
data: {
datasets: [
{
data: heatmapData,
backgroundColor: function (ctx) {
const value = ctx.dataset.data[ctx.dataIndex].v;
return getBackgroundColor(colors, value);
},
}
]
},
options: {
scales: {
x: {
type: 'category',
labels: xAxisLabels,
offset: true,
position: 'bottom',
stacked: true,
ticks: {
autoSkip: true,
maxRotation: 90,
minRotation: 90
},
grid: {
display: false,
drawBorder: false
}
},
y: {
type: 'category',
labels: items,
reverse: false,
offset: true,
grid: {
display: false,
drawBorder: false
},
ticks: {
autoSkip: true
}
}
},
plugins: {
legend: false,
title: {
align: 'center',
font: { size: 15 },
display: true,
text: title
},
tooltip: {
callbacks: {
title() {
return '';
},
}
}
}
}
});
My question is - I want to ensure that their are never more than 50 values and labels on the x axis but there doesn't seem to be a straightforward way of limiting the data like this. Is it possible?
You should limit the array of labels that you pass into your component.
For example: xAxisLabels.slice(0, 50)
In my angularJs project,I have a pie Echarts and I define it like below.The problem is that I may have lots of legend and I see I can use type:'scroll' to make it from here, but I failed and it has no impact.
$scope.pieEcharts1 = {
option: {
title: {
text: 'MyPieChart',
left: 'left',
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'right',
type:'scroll',//does not work
data: []
},
label: {
normal: {
show: true,
formatter: '{d}%'
}
},
labelLine: {
normal: {
show: true
}
},
series: [{
name: 'MyData',
type: 'pie',
radius: '62%',
center: ['50%', '50%'],
data: [],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
}
}
}
//http request to get data
$scope.pieEcharts1.option.legend.data = nameArray
$scope.pieEcharts1.option.series[0] = dataArray
What is the problem in my code?
The scrollable legned is supported from v3.7.0.
https://echarts.apache.org/zh/changelog.html#v3-7-0
I have the following bar chart configuration.
const series = [
{
name: 'Net Profit',
data: [18, 34, 55, 57, 80, 70],
},
];
const options = {
chart: {
type: 'bar',
height: '50px',
toolbar: {
show: false,
},
},
grid: {
show: false,
padding: {
top: 0,
bottom: 0,
},
xaxis: {
lines: {
show: false,
},
},
yaxis: {
lines: {
show: false,
},
},
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '80%',
barHeight: '100%',
},
},
dataLabels: {
enabled: false,
},
stroke: {
show: false,
width: 0,
colors: ['transparent'],
},
fill: {
opacity: 1,
colors: [
'#000000',
'#B32824',
'#1A73E8',
'#B32824',
'#1A73E8',
'#B32824',
],
type: 'solid',
},
tooltip: {
enabled: false,
},
xaxis: {
axisTicks: {
show: false,
},
axisBorder: {
show: false,
},
labels: {
show: false,
},
},
yaxis: {
axisTicks: {
show: false,
},
axisBorder: {
show: false,
},
labels: {
show: false,
},
},
};
I am getting extra padding at the bottom as below. how can I remove that?
If you don't want to show x-axis and y-axis in your chart, you can simply do
const options = {
chart: {
type: 'bar',
height: '250px',
sparkline: {
enabled: true
}
},
}
The sparkline option will remove all paddings/margins around the chart.
I was facing the same issue, and after reading the doc I found that you should set the value of parentHeightOffset as 0, something like this
var opt1 = {
chart: {
type: 'line',
height: 200,
...
parentHeightOffset: 0,
...
},
...
};
I'm using official Highcharts with React on a page to display different measurements. Everything works fine except for IE11 (go figure), which upon a specific scenario crashes the browser.
On the page the user is able to see measurements for daily, weekly, monthly etc. Each of these tabs then renders Highcharts with data for chosen time.
It works fine even in IE11 until user checks tab Monthly and to view the graph in hourly view (standard view for Monthly is a daily chart bar).
When Monthly -> Hourly view, the call responds with an object with about 700 arrays were the data is picked.
I did a test where I stripped the response for that specific scenario so that it showed only 50 entries = still a bit slow but didn't freeze on me.
I've been looking into this since it pretty much matches my issue as well but no luck:
https://github.com/highcharts/highcharts/issues/7725
Also, been trying to figure out how to provide a fiddle for this but the project is quite large which makes it difficult to pick bits and pieces.
So this is basically just a shout out to see if anyone has any other ideas. This works flawlessly in Chrome, Firefox etc.
I think it could be somewhat related to the amount of categories that are being set, just as the Github issue above says. But also, I've tried but no luck (or I did it wrong).
I'll provide the set of options that I have for Highcharts:
const options = {
chart: {
marginTop: 40,
animation: false,
},
title: {
text: ''
},
legend: {
enabled: this.state.resolutionType !== 'allyears',
reversed: true,
floating: true,
padding: 0,
x: 50,
align: 'left',
verticalAlign: 'top',
itemDistance: 5,
symbolRadius: 0,
symbolPadding: 2,
},
series: [{
type: this.state.graphType,
showInLegend: false,
data: this.state.newData,
tooltip: {
valueSuffix: ' :-'
}
},
{
type: this.state.graphType,
name: 'Historical',
visible: this.state.activeHistoricalData || this.state.activePreviousData,
showInLegend: false,
data: this.state.historicalData,
tooltip: {
valueSuffix: ' :-'
}
},
{
type: 'spline',
name: this.props.latestConsumptionContent('shortTemperature'),
visible: this.state.activeTemperature,
showInLegend: false,
showEmpty: false,
data: this.state.newTemp,
yAxis: 1,
tooltip: {
valueSuffix: ' .'
}
}],
plotOptions: {
series: {
maxPointWidth: 40,
connectNulls: true,
events: {
click: event => this.handleChartPointClick(event.point.time)
},
},
column: {
marker: {
enabled: false
}
},
line: {
marker: {
enabled: false
}
},
area: {
fillOpacity: 0.3,
marker: {
enabled: true,
symbol: 'circle'
}
}
},
xAxis: {
categories,
tickInterval: getTickInterval(this.state.resolutionType, this.state.periodTime),
reversedStacks: true,
autoRotation: false
}
},
yAxis: [{
min: 0,
title: {
text: ':-',
align: 'high',
offset: 0,
rotation: 0,
y: -20,
},
labels: {
format: getLabelFormat(this.state.resolutionType, this.state.periodTime),
}
},
{
title: {
text: this.props.latestConsumptionContent('shortTemperature'),
align: 'high',
offset: 0,
rotation: 0,
y: -20,
},
showEmpty: false,
reversed: this.state.reverseTemperatureAxis,
opposite: true
}],
credits: false
};