I am using antd Charts in my project to plot timeseries data. My data has datapoints only till 18:30 pm but antd Line Chart plots extra x-axis width which makes it look like the data is missing.
This is my config:
const config = {
width: window.innerWidth - 100,
data: res,
xField: 'time',
yField: 'value',
seriesField: 'key',
yAxis: {
title: { position: 'center', text: labelText, autoRotate: true },
grid: {
line: {
style: {
stroke: '#ddd',
},
},
},
},
xAxis: {
type: 'time',
mask: 'HH:mm Z',
label: {
formatter: (value) => {
if (timezone === 'utc') {
return moment(value, 'HH:mm ZZ').utc().format('HH:mm Z');
}
return moment(value, 'HH:mm').format('HH:mm Z');
},
},
grid: {
line: {
style: {
stroke: '#ddd',
},
},
},
},
tooltip: {
customItems: (originalItems) => {
return originalItems.sort(function (a, b) {
return b.value - a.value;
});
},
},
};
How do I remove the extra x-axis part between 18:30 and 18:47
Related
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?
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)
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 am trying to get my Highcharts/Highstock chart to display a custom tick when the rangeSelector is set to All, I have it setup this way, but is throwing me errors when I try to use the interactive portion of the graph
Received below answer from Highstock Change tick interval on range selector change
componentDidMount() {
// Timezone Offset for PST standard is UTC timezone
Highcharts.setOptions({
global: {
timezoneOffset: 8 * 60
},
lang: {
thousandsSep: ','
}
});
Highcharts.stockChart('chart', {
chart: {
backgroundColor:'rgba(255, 255, 255, 0.0)',
height: 400,
zoomType: 'xy'
},
title: {
text: 'Bitcoin Chart',
style: {
color: 'white'
}
},
navigator: {
trigger: "navigator",
triggerOp: "navigator-drag",
rangeSelectorButton: undefined,
handles: {
backgroundColor: 'white',
borderColor: 'black'
}
},
scrollbar: {
enabled: false
},
rangeSelector: {
buttons: [{
type: 'day',
count: 1,
text: '1d'
}, {
type: 'day',
count: 7,
text: '7d'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 3,
text: '3m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
selected: 6,
// styles for the buttons
buttonTheme: {
fill: 'black',
// stroke: 'none',
'stroke-width': 0,
r: 8,
style: {
color: 'white',
fontWeight: 'bold'
},
states: {
hover: {
},
select: {
fill: 'white',
style: {
color: 'black'
}
}
}
},
// Date Selector box
inputBoxBorderColor: 'black',
inputBoxWidth: 120,
inputBoxHeight: 18,
inputStyle: {
color: 'black',
fontWeight: 'bold'
},
labelStyle: {
color: 'silver',
fontWeight: 'bold'
},
},
series: [{
name: 'Bitcoin Price',
color: 'black',
data: this.props.data.all_price_values,
type: 'area',
threshold: null,
tooltip: {
valuePrefix: '$',
valueSuffix: ' USD',
valueDecimals: 2
}
}],
plotOptions: {
series: {
fillColor: {
linearGradient: [0, 0, 0, 0],
stops: [
[0, '#FF9900'],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
}
}
},
xAxis: {
events: {
setExtremes: function(e) {
if (e.trigger === "rangeSelectorButton" && e.rangeSelectorButton.text === "All") {
var range = e.max - e.min;
// ticks spaced by one day or one hour
var ticksSpacing = range >= 86400 * 1000 ? 86400 : 3600;
this.update({
tickPositioner: function() {
var positions = [],
info = this.tickPositions.info;
for (var x = this.dataMin; x <= this.dataMax; x += ticksSpacing * 1000) { // Seconds * 1000 for ticks
positions.push(x);
};
positions.info = info;
return positions;
}
}, false);
}
}
},
title: {
enabled: true,
text: 'Date (Timezone: PST)',
style: {
color: 'white'
}
},
labels: {
style: {
color: 'white'
}
},
type: 'datetime',
dateTimeLabelFormats: {
day: '%b %e, %Y'
},
tickInterval: 1
},
yAxis: {
floor: 0,
labels: {
formatter: function () {
return '$' + this.axis.defaultLabelFormatter.call(this);
},
format: '{value:,.0f}',
align: 'left',
style: {
color: 'white'
},
},
},
// Mobile Design
responsive: {
rules: [{
condition: {
maxWidth: 600
},
chartOptions: {
chart: {
height: 400
},
subtitle: {
text: null
},
navigator: {
enabled: false
}
}
}]
}
});
}
I am talking about the blue highlighted section, when I move it, it throws an error
I am trying to get the charts to have 2 plots per day on ALL rangeSelector, displaying the first point in the day and the last point in a day. What am I doing wrong?
EDIT 1 : Updated to full config, X Axis is now being disrupted by the original answer, ticks on custom range selector is still in works. Added images to show what's going on
The setExtremes event is raised each time you change the range to be displayed on the graph. It can have several origins:
A button click in the range selector
An handle drag in the navigator
etc..
The actual properties of the event depend on its origin. If you output the event with console.log(e), you'll see that it's not the same for these two origins:
Button click in the range selector
{
trigger: "rangeSelectorButton",
rangeSelectorButton: {
text: "2Hour",
type: "hour",
count: 2,
},
...
}
Handle drag in the navigator
{
trigger: "navigator",
triggerOp: "navigator-drag",
rangeSelectorButton: undefined
}
If you drag the handle in the navigator, there's no rangeSelectorButton attached to the event, because it doesn't make sense: in that case, no button is pressed.
To fix your error, you can add a check on the trigger property:
xAxis: {
events: {
setExtremes: function(e) {
if (e.trigger === "rangeSelectorButton" && e.rangeSelectorButton.text === "All") {
...
}
}
}
How to solved the actual issue
Now, the REAL issue. You want to change the ticks based on what is displayed: either the beginning and end of each day, or hours if not a complete day. You can do that with e.min and e.max, that represent the selected time range.
Like so:
setExtremes: function(e) {
var range = e.max - e.min;
// ticks spaced by one day or one hour
var ticksSpacing = range >= 86400 * 1000 ? 86400 : 3600;
this.update({
tickPositioner: function() {
var positions = [],
info = this.tickPositions.info;
for (var x = this.dataMin; x <= this.dataMax; x += ticksSpacing * 1000) { // Seconds * 1000 for ticks
positions.push(x);
};
positions.info = info;
return positions;
}
}, false);
}
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');