I have a series data like this [null,0,null,null,null,null,0.86,null,0,null]
As you can see, there are only three points in it.
However it has been displayed as below,
Please see the demo here,
Highcharts.chart('container', {
chart: {
type: 'area',
spacingBottom: 30
},
title: {
text: 'Fruit consumption *'
},
xAxis: {
categories: ["Term 3_week1","Term 3_week2","Term 3_week3","Term 3_week4","Term 3_week5","Term 3_week6","Term 3_week7","Term 3_week8","Term 3_week9","Term 3_week10"]
},
yAxis: {
title: {
text: 'Y-Axis'
}
},
plotOptions: {
area: {
fillOpacity: 0.5
}
},
credits: {
enabled: false
},
series: [{
name: 'John',
data: [null,0,null,null,null,null,0.86,null,0,null]
}]
});
I am quite confused why this been displayed like this.
Can anyone help?
Thanks
First if you look your demo on firefox it will only show 3 points without any area.
Now you may try to use connectNulls Api Doc like that :
chart: {
type: 'scatter',
spacingBottom: 30
},
plotOptions: {
area: {
fillOpacity: 0.5,
connectNulls:true
}
},
Edit: New type of chart
Updated Fiddle
Related
I'm trying to highlight a specific part in a graph by date. The graph is dates in X axis and value in Y axis. I tried doing like this example but I get the error TypeError: Cannot read properties of undefined (reading 'coord')
This is my graph's code:
{
xAxis: {
type: "category",
data: xaxis,
show: true,
axisLabel: {
formatter: function(params:any){
return (new Date(params)).toLocaleString('pt-BR')
}
}
},
yAxis: {
type: "value",
name: 'Eficiência de Consumo (Nm³/ton)',
axisLabel: {
formatter: '{value}'
}
},
dataZoom: [
{
type: 'inside'
}
],
tooltip: {
trigger: "axis",
formatter: function(params:any){
const seriesName = params[0].seriesName
const timeStamp = (new Date(params[0].axisValue)).toLocaleString('pt-BR')
const eficiencia = params[0].value
return `${seriesName} <br/> ${timeStamp}: ${eficiencia} Nm³/ton`
},
axisPointer: {
label: {
backgroundColor: "#6a7985"
}
}
},
legend: {
orient: 'horizontal',
top: 'top'
},
visualMap: {
show: false,
pieces: [
{
min: startAlertTime,
max: endAlertTime,
color: '#FBDB0F'
}
]
},
series: [{
data: yaxis,
name: 'Eficiência de Consumo',
type: "line",
}]}
startAlertTime and endAlertTime are ISO timestamps like so '2022-06-13T10:42:22.772Z'. I'd like to highlight the graph between those two points. This is my graph with no VisualMap:
Graph with no visualmap
This is what I'd like to do based on the timestamps on the X axis:
Desired output
visualMap is going to color the line. If you want to color an area (like in your desired output), you'll have to use series.markArea. Both are used on the example you gave.
I have the code to show data on my page using Highchart and React
var chart_nps_amigo = {
title: { text: '% Alunos x total de horas de acesso' },
chart: { height: 200, type: 'column' },
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
title: { text: 'Número de alunos' }
},
tooltip: {
pointFormat: 'Porcentagem: <b>{point.y:.1f} alunos</b>'
},
series: [{
name: 'Alunos',
data: [
['Nunca acessou', 24.2],
['Até 4h', 10.8],
['Até 8h', 22.5],
['Até 12h', 11],
['Até 16h', 9.3],
['Mais de 16h', 4.8]
],
dataLabels: {
enabled: true,
align: 'center',
format: '{point.y:.1f}', // one decimal
y: 10,
style: {
fontSize: '11px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
}
I can use the following code to show the chart in my page
<HighchartsReact
highcharts={Highcharts}
options={chart_nps_amigo}
allowChartUpdate={true}
/>
With the code below I was able to update the charts
chart_nps_amigo.series[0].data.push( ['32h v1', 55] );
but I wanna update the chart with values that are coming from a web server using Redux and Redux-Saga.
To simulate that, I just create a timer event to update the chart using the following code:
const timer = setTimeout(() => {
chart_nps_amigo.series[0].data.push( ['32h v2', 24.8] );
console.log('This will run after 10 second!')
}, 10000);
But after 10 seconds, the log code shows in the browser console, but the chart is not updated.
How can I make this work ?
You should keep your config in the component state and update your data there, just like it is done here: https://github.com/highcharts/highcharts-react#optimal-way-to-update
I find a solution now. Based in the answer of #SebastianWędzel
The way that I describe data previously, it was an array in javascript, but it's not a valid json object.
series: [{
name: 'Alunos',
data: [
['Nunca acessou', 24.2],
['Até 4h', 10.8],
['Até 8h', 22.5],
['Até 12h', 11],
['Até 16h', 9.3],
['Mais de 16h', 4.8]
],
But since I recover this value from a web server using redux and redux-saga, I need a way to add a valid Json object.
When I look in the Highcharts documentation, I find another way to show the series data using a valid Json object
series: [{
name: 'Alunos',
data: [{
"name": "Nunca acessou",
"y": 24.2
}, {
"name": "Até 4h",
"y": 10.8
}],
Now I attach the value that I get from the web server only to the series data part of the chart
series: [{
name: 'Alunos',
data: chart.myData,
It's working now.
I am trying to plot a line chart and a column chart on separate y-axes in highstock using react. However, the line chart is hidden behind the column chart. Could I have the line chart on the column chart as shown in their example dual chart - https://www.highcharts.com/demo/combo-dual-axes?
I've added a link to my chart to clarify my problem.
const chart_options= {
chart: {
zoomType: 'x'
},
title: {
text: ""
},
tooltip:{
split: false,
shared:true,
valueDecimals: 2
},
legend: {
enabled: true,
layout: 'horizontal'
},
series: [
{
name: 'ABC',
type: 'line',
data: this.props.data1,
yAxis:1,
color:'grey',
lineWidth: 3
},
{
name: 'DEF',
type: 'line',
data: this.props.data2,
yAxis:0,
},
{
name: 'GHI',
type: 'column',
data: this.props.data3,
yAxis:0,
color: '#ffd699',
dataGrouping:{
enabled: false
},
pointWidth: 1
},
],
xAxis: {
type: 'datetime',
gridLineWidth:1,
title: {
text: 'Time'
},
tickPixelInterval: 5
},
yAxis: [
{
labels: {
format: '{value:.0f}%',
},
opposite: false,
tickPixelInterval: 20
},
{
title: {
labels: {
format: '{value:.2f}',
},
tickPixelInterval: 20
},
],
}
Could someone please help?
Thanks.
You can set zIndex propert for the series:
series: [{
zIndex: 1,
...
}, {
zIndex: 0,
...
}]
Live demo: https://jsfiddle.net/BlackLabel/x5aefpLv/
API Reference: https://api.highcharts.com/highstock/series.column.zIndex
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
};
This is the highchart code in angular controller
I am using charts for the first time in angularjs.I want to show data from my mongodb database like on x-axis all the names of tasks and on y-axis the total time required by that particular task to complete i.e- Total Duration.
I have added static data for the html to look like the attached image.
I am developing a project using MEAN Stack.I want to how know how do i add the data i get from database to highcharts.
This is how the output should look without statically giving data:
var tasks = ['Task1','Task2','Task3' ]
var res = [26,61,1]
$scope.chartConfig = {
chart: {
type: 'column'
},
title: {
text: 'Task Duration'
},
xAxis: {
categories: tasks,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Task Duration (Hrs)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span>
<table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">
{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tasks',
data: res
}]
}