Im trying to add the drilldown option to my piechart but the drilldown does not trigger.
HEre is my codesandbox.io
https://codesandbox.io/s/highcharts-react-demo-43bgg
You need to import the drilldown module and add the drilldown data also for each entity.
Please check updated code sandbox:
https://codesandbox.io/s/highcharts-react-demo-tq52i
To import the drilldown module:
import drilldow from "highcharts/modules/drilldown";
drilldow(Highcharts);
To add the drilldown data:
drilldown: {
series: [
{
id: "DataA",
data: [["v65.0", 0.1], ["v64.0", 1.3]]
},
{
id: "DataB",
data: [["v11.0", 6.2], ["v10.0", 0.29]]
}
]
For each series, data add the drilldown id also.
API Reference: https://api.highcharts.com/highcharts/drilldown
You need to import and initialize the drilldown module:
import drilldown from "highcharts/modules/drilldown";
// init the module
drilldown(Highcharts);
Docs: https://github.com/highcharts/highcharts-react#how-to-add-a-module
Related
In this Highcharts column chart the user can drill down by clicking on the column.
This works fine, however all the data, including the data of the drilled column, needs to be available when the chart is firstly created.
What I need is to capture the drilldown event click and populate the chart with that information, sending the data only when the user clicked on a specific column. Is this possible?
Yes, it is possible and simple. You need to use drilldown event callback function, call API request in it and use addSeriesAsDrilldown method - as in the example below:
chart: {
type: 'column',
events: {
drilldown: function(e) {
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
...
},
series = drilldowns[e.point.name];
// Show the loading label
chart.showLoading('Simulating Ajax ...');
setTimeout(function() {
chart.hideLoading();
chart.addSeriesAsDrilldown(e.point, series);
}, 1000);
}
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/e9m74kgp/
API Reference:
https://api.highcharts.com/highcharts/chart.events.drilldown
https://api.highcharts.com/class-reference/Highcharts.Chart#addSeriesAsDrilldown
I'm importing a csv file using Highcharts cvsURL for a line chart. I'm using styledMode and I defined the default colors. Highcharts is using my stylesheet. Is there an easy way to tell each series which color to use?
I have lots of lines, so highcharts cycles through its 10 default colors. I need one of the colors to only be assigned to 2 specific series though.
Here is my code so far:
Highcharts.chart('container', {
chart: {
type: 'line',
styledMode: true //this totally separates the design from the svg.
},
data: {
itemDelimiter: ',',
csvURL: 'http://deq.at.utah.gov/wp-content/themes/deq/parts/charts/Ozone-4th-Highest-8hr-Front.csv'
},
title: {
text: 'Ozone 4th Highest 8-hr Concentration Wasatch Front'
},
yAxis: {
title: {
text: '(Ozone PPM)'
}
}
});
I think the API said something about assigning classes to a series. Maybe that would work because I could make custom CSS for only those series, but I can't see how to do that using csvURL.
You can define color or className for series in this way:
data: {
csvURL: '...'
},
series: [{
color: '#00c735'
}, {
color: '#c4392d'
}]
Live demo: https://jsfiddle.net/BlackLabel/kj9udgat/1/
API Reference:
https://api.highcharts.com/highcharts/series.line.className
https://api.highcharts.com/highcharts/series.line.color
I built a map bubble with Highmaps that works fine as long as it gets the data from this js file:
<script src="https://medien.lb.madsack.de/rnd/jchrist/coronaweltkarte.js"></script>
see the fiddle
In the next step I want to import data from this google spreadsheet:
https://docs.google.com/spreadsheets/d/1vkOXfueP5dsAdaRH433kP4SY1KJCxN6W7hPwj79zd_g/edit#gid=480378207
For that I added this code:
data: {
googleSpreadsheetKey: '1vkOXfueP5dsAdaRH433kP4SY1KJCxN6W7hPwj79zd_g'
},
see fiddle
Unfortunately it does not work. What else do I have to do?
You need to use seriesMapping property to correctly create bubble series from your data. Also, add the map series, for example in complete callback function.
data: {
googleSpreadsheetKey: '1vkOXfueP5dsAdaRH433kP4SY1KJCxN6W7hPwj79zd_g',
seriesMapping: [{
z: 0,
land: 4,
lat: 5,
lon: 6,
infder: 3,
totins: 1,
genins: 2
}],
complete: function(options) {
options.series[0].name = 'Infizierte';
options.series.push({ // Add map series
name: 'Länder'
});
}
}
Live demo: https://jsfiddle.net/BlackLabel/v3m59kyw/1/
API Reference: https://api.highcharts.com/highmaps/data.seriesMapping
Building upon my previous question here SO
I want to reach this desired affect on mouse hove. Draw multiple series like so
Could you please recommend highstock best practice for the same?
Thanks
You can add an additional series in the first mouseOver event and then update its data. For example:
series: [{
data: [...],
point: {
events: {
mouseOver: function() {
var chart = this.series.chart;
if (!chart.series[1]) {
chart.addSeries({
data: additionalData[this.index].slice()
});
} else {
chart.series[1].setData(
additionalData[this.index].slice()
);
}
}
}
}
}]
Live demo: http://jsfiddle.net/BlackLabel/ufa2ygvm/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries
https://api.highcharts.com/class-reference/Highcharts.Series#setData
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/)