Develop Reference

old yAxis ticks do not get removed (chartjs, react-chartjs-2 wrapper)

When i draw a chart with 4 lines, each with its own data ofc, i programmatically create the options for the LineChart that has 4 Yaxis, first one on the left and the rest on the right side. Now, after the chart is drawn and i de-select some datasources from the list (less lines to draw), the now-obsolete yAxis ticks stay there, even when the chart correctly draws only the selected lines, and the options are updated as well correctly. I cant think of a way to remove them!
I have googled for 2 days and cant find a solution. I am using react in functional style and it makes things more complicated because every advice seems to be in the classic style.
I am using react-chartjs-2 wrapper as well, if this helps.
I am also quite new to react, and asking in Stackoverflow, so please cut me some slack :)
I assume the chart is being re-rendered or something because the amount of lines etc do change.
In the images, the "createYaxis" that is shown in the console.log is the generated yAxes- part of the options object (which is functional otherwise). The problem yAxises are on the right side in red and yellow. Images show before and after situation.
Image of the options-object generated by the code below the img:
var yAxisItems = [];
function createYaxises (num){
var arr = [];
for (var i=0;i<num.length;i++){
if (i===0){
arr.push({
display: true,
id: i,
type: 'linear',
position: 'left',
gridLines: {
display:false,
//color: 'blue'
},
ticks: {
fontColor: lineColourArray[i],
fontSize: 14,
}
})
}
else {
arr.push({
display: true,
id: i,
type: 'linear',
position: 'right',
gridLines: {
display:false,
//color: 'blue'
},
ticks: {
display:true,
fontColor: lineColourArray[i],
fontSize: 14,
}
})
}}
yAxisItems = arr;
console.log("createyaxis arr: " , arr);
console.log("createyaxis: " , yAxisItems); //JSON.stringify(yAxisItems));
}
//get data for selected sensors and set it to chart data
const handleGetSelectedSensorData = function () {
var d = getSelectedSensorData();
console.log("d: ", d);
var dSets = [];
if (d[0]){
d.map((dItem,index)=> {
var newDsetData =[];
if (dItem.data){
dItem.data.map((innerDataItem)=> {
var dSet = {};
dSet.x = innerDataItem.timestamp;
dSet.y = innerDataItem.v;
newDsetData.push(dSet);
})
var newset = {
data: newDsetData,
label: dItem.sensorTag,
borderColor: lineColourArray[index],
fill: false,
pointRadius: 1.5,
backgroundColor:lineColourArray[index],
borderWidth: 2,
showLine: true,
pointHoverRadius: 5,
lineTension: 1,
};
dSets.push(newset);
}})
var dDataTemp = {};
var optionsTemp = new Object();
dDataTemp.datasets =dSets;
//create yaxises only once
createYaxises(dDataTemp.datasets);
//more than one set (TODO)
//console.log("dDataTemp.datasets : ", dDataTemp.datasets)
if (dDataTemp.datasets.length >1){
console.log("dset > 1");
for(var i=0;i< dDataTemp.datasets.length;i++) {
dDataTemp.datasets[i].yAxisID = i;
console.log("setting options");
optionsTemp ={
tooltips: {
enabled: true,
intersect:false,
mode:'x',
callbacks: {
title: function(tooltipItem, data) {
var toSplit = tooltipItem[0].label.split(",");
return (toSplit[0]);
},
label: function (tooltipItem) {
var split = tooltipItem.xLabel.split(',');
//return ( Number(tooltipItem.yLabel).toFixed(3));
return (split[2] + " : " + Number(tooltipItem.yLabel).toFixed(3));
}
},
},
hover: {
mode: 'nearest',
intersect: true,
},
title:{
display:true,
text:'Valittu sensoridata',
fontSize:20
},
legend:{
display:true,
position:'right'
},
scales: {
xAxes: [{
display: true,
type: 'time',
ticks: {
}
}],
yAxes:
yAxisItems
}
}
}
setOptions(optionsTemp);
console.log("options: " , optionsTemp);
setdData(dDataTemp);
}}
else {
console.log("error in handleGetSelectedSensorData()");
}
}
And the Line is just added like this:
<Line data={dData} options = {options} />

Instead of setting display: true set display: 'auto', this will make the axis dissapear as long as there is no dataset visable that is linked to that scale, as soon as a dataset becomes visable that is linked to that scale it will show the scale again.
Doc: https://www.chartjs.org/docs/master/axes/cartesian/#common-options-to-all-axes

Multiple series of data in Highcharts but second line graph is displayed squashed?

I'm pretty new in using Highcharts API and, just started to embark using its cool features. I have a ASP.NET MVC web application which plot a line graph from a data source. In my application a user selects a key value from a list box and, out of that key an array of values will be retrieved and used the data as series for the graph.
[Chart 1] This is the plotted highchart.
[Chart 2] This is the expected output
As you can see in the above screenshots, CDT158 series displayed the graph correctly, more similar to Chart 2. But, Series 2 in Chart 1 is squashed, it is supposed to be like in Chart 2 - SINUSOID.
This is my functions that prepares and display the chart
var myChart;
function prepareChartData(dataChart)
{
var xAxis = [];
var dataSeries = [];
var xTitle;
for (var i = 0; i < dataChart.length; i++) {
var items = dataChart[i];
var XcategoriesItem = moment(items.Time).format("DD-MMM-YYYY HH:mm:ss");
var seriesData = parseFloat(items.Value);
xAxis.push(XcategoriesItem);
dataSeries.push(seriesData);
xTitle = items.Name;
}
if (myChart == undefined)
{
plotChartData(xAxis, dataSeries, xTitle);
return;
}
myChart.addSeries({
title: xTitle,
data: dataSeries
});
};
function plotChartData(Xaxis, dataseries, xtitle)
{
myChart = new Highcharts.Chart({
chart: {
renderTo: 'svgtrendspace',
type: 'line',
zoomType: 'xy',
panning: true,
panKey: 'shift',
plotBorderWidth: 1
},
title: {
text: 'Sample Chart'
},
legend: {
layout: 'horizontal',
align: 'bottom',
horizontalAlign: 'middle',
borderWidth: 0
},
plotOptions: {
series: {
dataLabels: {
enabled: false,
format: '{y}'
},
allowPointSelect: false
}
},
xAxis: {
type: 'category',
categories: Xaxis,
labels: {
rotation: -65,
style: {
fontSize: '8px',
fontFamily: 'Verdana, sans-serif'
}
},
tickInterval: 60
},
yAxis: {
gridLineColor: '#DDDDDD',
gridLineWidth: 0.5
},
series: [{
name: xtitle,
data: dataseries,
//name: '',
//data: [],
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b><br/>',
valueDecimals: 2
}
}]
});
};
This is the div element that displays the chart
<div id="svgtrendspace" style="overflow:auto;display:table-row; height:100%;"></div>
The jquery post function that retrieves data from AE controller.
$.post("/AE/UpdateTrend", { TrendRequestData: jdata },
function (data) {
if (data.length > 4) {
var results = $.parseJSON(data);
console.log(results);
prepareChartData(results);
trendData = results;
}
else {
trendData = "";
FillNoData("#svgtrendspace");
$('#MinimumHorizontalLine').val("");
$('#MaximumHorizontalLine').val("");
}
});
What could go wrong in my highcharts configuration that made the second series line graph squashed?
Any help is greatly appreciated.

I think it's caused by using categories, but actually you want to use datetime axis. Categories for first series and the second one don't match and that's the result. In other words, I would:
Change data format for array of points:
for (var i = 0; i < dataChart.length; i++) {
var items = dataChart[i];
var xDate = +moment(items.Time);
var seriesData = parseFloat(items.Value);
dataSeries.push([xDate, seriesData]);
xTitle = items.Name;
}
Change type to "datetime" and remove categories:
xAxis: {
type: 'datetime', // type
// categories: Xaxis, // remove
labels: {
rotation: -65,
style: {
fontSize: '8px',
fontFamily: 'Verdana, sans-serif'
}
},
// tickInterval: 60 // remove that too - you don't want ticks every 60 milliseconds ;)
},

Highcharts second series name labeled to 'Series 2'?

Just started a week ago to learn and use Highcharts. In my application a user selects a key value from a list box and, out of that key an array of values will be retrieved and, used the data to create a multiple series of line graph. In the screenshot below the first series (in light blue color) has the name of CDEP158 and, on the second series (in black color), the series name shouldn't be 'Series 2', it should be CDT158. 'Series 2' for the second series is the issue here.
This is the chart data preparation code which accepts dataChart (result) from jquery post callback function called in a click event.
function prepareChartData(dataChart)
{
var dataSeries = [];
var xTitle;
for (var i = 0; i < dataChart.length; i++) {
var items = dataChart[i];
var xDate = +moment(items.Time);
var seriesData = parseFloat(items.Value);
dataSeries.push([xDate, seriesData]);
xTitle = items.Name;
}
if (aeChart === undefined || aeChart === null)
{
plotChartData(dataSeries, xTitle);
return;
}
aeChart.addSeries({
title: xTitle,
data: dataSeries
});
};
Function that creates a new instance of Highchart and its configuration:
function plotChartData(dataseries, xtitle)
{
aeChart = new Highcharts.Chart({
chart: {
renderTo: 'svgtrendspace',
type: 'line',
zoomType: 'xy',
panning: true,
panKey: 'shift',
plotBorderWidth: 1
},
title: {
text: ''
},
legend: {
layout: 'horizontal',
align: 'left',
itemDistance: 10,
borderWidth: 0,
itemMarginTop: 0,
itemMarginBottom: 0,
padding: 20
},
plotOptions: {
series: {
states: {
hover: {
enabled: false
}
},
dataLabels: {
enabled: false,
format: '{y}'
},
allowPointSelect: false
}
},
xAxis: {
type: 'datetime',
labels: {
rotation: -65,
style: {
fontSize: '9px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
gridLineColor: '#DDDDDD',
gridLineWidth: 0.5
},
series: [{
name: xtitle,
data: dataseries,
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b><br/>',
valueDecimals: 2
}
}]
});
};
Why is that the first series gets the correct name but on the second one it did not? Is my highcharts configuration wrong? How should I properly configure or format it to address the issue?
I have googled it for similar issues related with multiple series but I couldn't find any similar questions or answers that would help me.

The fact that it works for the first series implies that the issue isn't with your code, but rather is with your init.
Can you put a console.log('Title: ' + xTitle); statement right before you call aeChart.addSeries() in the above function to check on what you are passing in? My suspicion is that the second series is not being passed a title, and that HighCharts is therefore putting in Series2 on its own.
Maybe you should not be setting the value of xTitle in every single iteration of the initial for loop?

Highcharts of type area range not displaying markers like circles

I am trying to display markers on highchart of type Area-range and not able to do so.
jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/arearange/
chart with markers for series data

I don't think you can do this from a marker options point of view, as the Highcharts API doesn't include the marker for charts of type 'arearange'.
I think the only way you can do this is to plot the max and min values on your chart as lines overlaying the range, and link them together.
JSFiddle example here:
http://jsfiddle.net/8pm9rohu/1/
I tried with your original example (based on a provided dataset) but it was way too big a dataset to look good with markers plotted on the chart.
In the unlikely event that you will be getting a predefined data array like this, and not constructing it yourself, you can just loop through the data and extract the min and max values into arrays of their own to plot as lines on the chart.
I.e. (given that 'ranges' is the dataset provided):
var maxArray = [];
var minArray = [];
var dataArrayLength = ranges.length;
for (var i = 0; i < dataArrayLength; i++) {
minArray[i] = [ranges[i][0], ranges[i][1]];
maxArray[i] = [ranges[i][0], ranges[i][2]];
}
Hopefully though, you will be creating this dataset yourself and you'll be able to create the min and max arrays of data in the same function as creating the range array, and pass these extra arrays to the chart.
P.S. Remember to make sure your min and max series use the same patterns (i.e. marker type, colours, etc)! Otherwise it'll look silly...
series: [{
name: 'Max',
showInLegend: false,
data: maxArray,
zIndex: 1,
color: Highcharts.getOptions().colors[0],
marker: {
fillColor: 'white',
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[0],
symbol: 'circle'
}
}, {
name: 'Min',
showInLegend: false,
data: minArray,
zIndex: 1,
color: Highcharts.getOptions().colors[0],
marker: {
fillColor: 'white',
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[0],
symbol: 'circle'
}
}, {
name: 'Range',
data: ranges,
type: 'arearange',
lineWidth: 0,
linkedTo: ':previous',
color: Highcharts.getOptions().colors[0],
fillOpacity: 0.3,
zIndex: 0
}]

Displaying array values in Bar chart of HighCharts

I am trying to display values which I am getting dynamically. In the below code I am trying to store the values in array and I am trying to use the array values in "series: data".
Nothing is getting displayed in the graph.
I know this is very simple question but I did not get any satisfactory answer when I googled it. Please help
var x = window.location.search.replace( "?", "" );
x = x.substring(3);
var array = x.split(","); // I am storing my dynamic values in this array
$(function () {
//alert(array); ----- I am able to see the values here
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Wireless Experience Meter'
},
subtitle: {
text: 'Sub - Time to Download'
},
xAxis: {
categories: ['Text'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Time (ms)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' ms'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Attempt 1',
//data: [635, 203, 200]
data : [array[0]] // I need to pass the variables here to get it displayed
}, {
name: 'Attempt 2',
//data: [133, 408, 698]
data : [array[1]]
}, {
name: 'Attempt 3',
//data: [973, 914, 4054]
data : [array[2]]
}]
});
});

You don't tell us what the variable array equals but since its generated from x.split(","), it's elements are going to be strings and not the numeric values Highcharts needs.
So convert it with parseInt or parseFloat:
var numericData = [];
for (var i = 0; i < array.length; i++){
numericData.push(parseFloat(array[i]));
}
...
series: [{
name: 'Attempt 1',
data : numericData
},
...

[array[0]] is not an array, that looks like console output not javascript. But [[0]] or [0] technically would be. However, since a call to array (array(0)) generates an array then I think you want data: array(0).
Outside shot at data : [array(0)] if you didn't show the example data correctly. I've never used HighCharts so I don't know what it's expected but I still go with data : array(0)