i want to draw the line by the order of data. Data is added dynamically so i am using addPoint. for example i have this:
let data = [[1,2], [5,3], [2,5]]
chart.series[0].addPoint(data[0])
chart.series[0].addPoint(data[1])
chart.series[0].addPoint(data[2])
and the result is that all the points on the chart are connected sequentially.
but i want it to be like this:
I made that chart by setData, but creating a separate array and repeatedly calling setData seems to be not the correct way. is there a way to achieve that with addPoint? or any other solution?
You can use scatter series type with lineWidth property:
let data = [
[1, 2],
[5, 3],
[2, 5]
]
let chart = Highcharts.chart('container', {
series: [{
type: 'scatter',
lineWidth: 2,
data: []
}]
});
chart.series[0].addPoint(data[0]);
chart.series[0].addPoint(data[1]);
chart.series[0].addPoint(data[2]);
Live demo: http://jsfiddle.net/BlackLabel/ynrkq40g/
API Reference: https://api.highcharts.com/highcharts/series.scatter.lineWidth
Related
I have a line chart that plots multiple datasets where each dataset has two lines associated with it: a reference line and a measured line.
To plot all of these lines, I added individual series for each subset of data, giving the reference line a dashed appearance and the measured line a solid appearance.
The tooltip formatter displays a popover of detail data for a specific point based on the cursor position. It only displays data for one series.
How might I group the series together in such a way that I can display a tooltip for multiple series, but not necessarily all of the series?
Highcharts seems to have an option for shared that displays a tooltip for all of the series that correspond to the cursor's X coordinate, but is there a way to do some sort of grouping? Is there something I can do to the series configuration so that each series renders two lines on the chart but with different appearances?
Not sure if what I'm trying to do is possible with Highcharts. Might need to be a custom chart.
There is no such default functionality in Highcharts, but for now I see two possible workarounds:
slight change in x value:
series: [{
data: [1, 1, 1]
}, {
data: [[0.0001, 2], [1.0002, 2], [2.0002, 2]]
}, {
data: [3, 3, 3]
}, {
data: [[0.0001, 4], [1.0002, 4], [2.0002, 4]]
}]
Live demo: http://jsfiddle.net/BlackLabel/v1uxp3jh/
wrap of the refresh method to exclude some of the unwanted points:
(function(H) {
H.wrap(H.Tooltip.prototype, 'refresh', function(proceed, points) {
points.forEach(function(p, i) {
if (p.series.name === "Series 2") {
points.splice(i, 1);
}
});
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
});
}(Highcharts));
Live demo: http://jsfiddle.net/BlackLabel/qd4mnx8e/
Docs: https://www.highcharts.com/docs/extending-highcharts
I have data of the form ["10.237.77.82","10.237.79.255"] which I would like to plot on a scatter plot.
Highchart crashes with error 14: String value sent to series.data, expected Number, which is correct as my data are indeed strings.
Is there a way to use strings as the elements of a scatter plot?
In short, values must be numbers. However, dataset looks like a categorized one, then maybe you just need this: http://jsfiddle.net/BlackLabel/8hc7Lzyu/1? As you can see, categories (IP's) are on axes, but markers are numbers.
Snippet:
Highcharts.chart('container', {
xAxis: {
categories: ["10.237.77.82", "10.237.79.255"]
},
yAxis: {
categories: ["10.237.77.82", "10.237.79.255"]
},
series: [{
data: [
[0, 1],
[1, 0]
]
}]
});
Can I set a y axis labels as ["1-10","10-20","20-30","30-40","40-50","50-60"] and bar data depends on these range.
Can you please provide us a JSfiddle demo here?
Yes, you can. Simply use categories on yAxis, and normalize values before rendering chart. For example: http://jsfiddle.net/2x0w7jyu/
var normalizedData = [0, 0, 1, 5, 4, 3, 2, 2, 5]
$('#container').highcharts({
yAxis: {
categories: ["1-10", "10-20", "20-30", "30-40", "40-50", "50-60"]
},
series: [{
name: 'Tokyo',
data: normalizedData
}]
});
I tried to plot a graph with line style for the data more than 300 points. I could not obtain the expected graph but only with markers. However, when I zoom the graph, the line can be seen. I have done a lot work to show the line but I failed. Lastly when I reduced the number of the data points, I could see the line. I have experienced with flot but I have not encountered this kind of problems. Is is a bug in the highcharts? How can I overcome this difficulty? I am looking forward to your suggestions.
Probably you have not enough width of container, and markers "overlap" line. So try to disable markers http://api.highcharts.com/highcharts#plotOptions.line.marker.enabled and check if line appears.
ps. sourcecode will be helpful (could you reproduce it in jsfiddle.net)
thank you very much for your attention for this question. I have solved the problem by myself.
When I checked my data again with JSON.stringify, I found the last plot data is [NaN, NaN]. When I remove this data and plot again, I got the line plot. The reason that I created the data from a text file and forgot to trim the text. When I added /removed [NaN, NaN] from the data array, the line could be shown or disappeared. The phenomena can be reproduced.
Here is the sample code. The data1 can not be shown in line but data2 can.
var chart;
var data1 = [
[0, 1],
[1, 2],
[3, 5],
[10, 9]
];
data1.push([NaN, NaN]); // if the last data is [NaN, NaN], the line will not be shown.
var data2 = [
[2, 3],
[4, 5],
[10, 1]
];
$(function () {
// define the options
var options = {
chart: {
renderTo: 'container'
},
plotOptions: {
series: {
lineWidth: 2,
marker: {
enabled: false
}
}
},
series: [{
name: 'test 1',
data: data1
}, {
name: 'test 2',
data: data2
}]
};
chart = new Highcharts.Chart(options);
});
I'm trying to use highcharts to draw column chart with the following data:
- I have three categories: apples, oranges, peaches
- I have three data series for it: [1, 10, 100], [2, 9, 120], [1, 11, 150]
As you can see y values for different categories have completely different scales and I would like to show them accordingly. I'd like to show three groups of three columns, like this:
1, 2, 1 --- 10, 9, 11 --- 100, 120, 150
But also make sure first group is not completely squeezed into the ground because of the lower values.
Is it possible with highcharts?
You may want to take a look at the dual-axis chart example. Basically, you just need to make sure that you define your data in separate series, with different y-axes.
var chart = new Highcharts.Chart({
//...
yAxis: [
//your yAxis definitions
],
series: [{
name: "Apples",
yAxis: 0, //the index of the yAxis definition you want to use
data: [1,2,1]
}, {
name: "Oranges",
data: [10,9,11]
}, {
name: "Peaches",
data: [100,120,150]
}]
})