Highcharts - Scatter chart with a line connecting the dots in the series - highcharts

I'm trying to recreate an excel chart using Highcharts.
It's a scatter chart, with the dots for each series connected directly (not a trendline). This is the example from excel:
It has to be a scatter charts as the x-axis value are non-periodic (or logarithmic)
Any help gratefully appreciated!

A very helpful Highcharts service team member provided this answer: http://jsfiddle.net/sc5Gv/4/
$(function () {
$('#container').highcharts({
chart:{
type:'scatter'
},
plotOptions:{
scatter:{
lineWidth:2
}
},
series: [{
name: 'Tokyo',
data: [[1.5,7], [2.3,9], [4.2,5.6]]
}, {
name: 'New York',
data: [[0.8,9], [2.1,6.3], [5.0, 10.1]]
}]
});
});

What kind of problem did you come across, because its default chart:
line http://jsfiddle.net/sc5Gv/2/
scatter with enabled lineWidth (http://jsfiddle.net/sc5Gv/1/)

Related

Highcharts heatmap not rendering squares or rectangles

Can someone help me to understand what is wrong here. Everything seems perfect.
http://jsfiddle.net/prakash4mail/nt86gj7z/1/
$(function () {
$('#container').highcharts({
chart: {
type: 'heatmap',
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
series: [{
borderWidth: 1,
data: [[2020-04-01, 18000, 29060],[2020-04-01, 18500, 9920],[2020-04-01, 19000, 32160],[2020-04-02, 18000, 12400],[2020-04-02, 18500, 91880],[2020-04-02, 19000, 54000],[2020-04-03, 18000, 63540],[2020-04-03, 18500, 43420],[2020-04-03, 19000, 43420]],
dataLabels: {
enabled: true,
color: '#000000'
},
}]
});
});
heatMap showing lines instead of squares
The exact answer is rowsize: 500 (from UI perspective - height, YAxis difference between each point) and colsize: 86400000 (one day each, x-axis difference between each point). Missing this was causing box not to appear.
As I understood you would like to achieve something like is rendered here: http://jsfiddle.net/BlackLabel/o6ywag42/
Notice how the data structure looks like in this demo from Highcharts demo base:
https://jsfiddle.net/BlackLabel/uofntb4y/ - if you want to keep the points as a square the 'y' value must be growing one by one, like here: http://jsfiddle.net/BlackLabel/o7bgq1pu/
And to show your truly y scale you can use the categories feature.
yAxis: {
categories: ['18000', '18500', '19000']
},
API: https://api.highcharts.com/highcharts/yAxis.categories
EDIT:
Another solution suggested by #prakash is to use the series.rowsize property and series.colsize to fit the squares.
API: https://api.highcharts.com/highcharts/series.heatmap.rowsize
API: https://api.highcharts.com/highcharts/series.heatmap.colsize

How to unset a dynamically applied point color in a Highcharts pie chart?

I want to be able to toggle colors on and off Points in a Highcharts pie chart.
Here's the sequence of operations
First I will render the chart
Next I will update the series.point color using point.update
this.chart.series[0].points[0].update({color: 'red'});
Then I want to unset the color I applied in step 2
Aside from caching the original color. I have tried
this.chart.series[0].points[0].update({color: void 0});
this.chart.series[0].points[0].update({color: null});
I've tested that this works on on series.update, such as
this.chart.series[0].update({color: void 0})
How can I unset the color on Point?
Currently my workaround is to redraw the whole chart! Feel like this might be a bug in Highcharts.
Fiddle demo to show steps as required
// Initiate the chart
var chart = Highcharts.chart('container', {
chart: {
type: 'pie',
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}]
});
// function for update color
function update() {
chart.series[0].points[0].update({
color: 'red'
});
};
// function for unset color
function unsetColor() {
chart.series[0].points[0].update({
color: Highcharts.Color(Highcharts.getOptions().colors[0]).input
});
}

Display labels in Highcharts 3D scatter plot

I use Highcharts to visualize 3D charts in my project. Particularly I am interested in showing a 3D scatter plot like this. Below the chart you can see the options as well as the respective jsFiddle.
Is there a possibility to display a label with every point's name always i.e. that hovering is not required?
Thanks!
Within the series you can enable the datalabels like this:
series: [{
dataLabels: {
enabled: true,
},
}]
http://jsfiddle.net/oghokm8w/1/
then you could use the formatter to customise the text to be displayed:
series: [{
dataLabels: {
enabled: true,
formatter: function () {
return this.point.x;
},
}
}]

Can we create pie chart and scatter plot combined using highcharts.js?

This question is regarding highcharts. Can we create something like this in highcharts? Pie chart on a scatter plot? Please have a look at the url https://www.dropbox.com/s/mcmzn0t0hz4s2x7/pieChartScatterPlot.png
I would draw a normal scatter plot first, then loop the points placing additional pie charts on top of them:
// initial scatter
series: [{
type: 'scatter',
name: 'Scatter Me',
data: [3, 2, 1, 3, 4]
}]
// in load event, loop our scatter series
// and add a pie chart at each point
chart: {
events: {
load: function(){
var chart = this;
$.each(chart.series[0].data, function(i,datap){
chart.addSeries({
type: 'pie',
minSize: 50,
size: 50,
dataLabels: {enabled: false},
data: [Math.random() * 10, Math.random() * 10, Math.random() * 10],
center: [datap.plotX-21, datap.plotY-21],
}, false);
});
chart.redraw();
}
}
}
Here's a fiddle and how it looks:
The one thing that's got me scratching my head is that I had to introduce a fudge factor to get the pie center to align with the points.

Highchart - data points on one graph showing in the wrong place

I have two datasets (red, blue) that have data starting in 9/11 and one (green) with data starting in 2/13. The green one is starting in the same location as the others, but it should start in 2/13. How can I tell this dataset to do that? I'd rather not use 0's if there is a way around it.
You can put JavaScript's null value if you don't have any value. My English may not be that much good to explain but my example is clear. Also you can look at that page: http://www.highcharts.com/demo/area-missing/gray
<script>
$(function () {
$('.graph').highcharts({
chart: { type: 'line'},
plotOptions: { series: { connectNulls: true }},
xAxis: {categories: [2012,2011,2010,2009] },
yAxis: {title: { text: 'Example Fruit Consumption'}},
series: [
{ name:'Apple', data:[null,null,20000,41000]},
{ name:'Orange', data:[29458,29000,26892,23256]}
]
});
});
</script>
You can define pointStart() http://api.highcharts.com/highcharts#plotOptions.series.pointStart for serie.

Resources