I have just started using Highchart in my project and I am very much new to it.
I am stuck with two scenarios for drill down charts:
First I need to show a column chart, and on click of the column I have to show a pie chart with legends. I am looking on below example:jsfiddle
legend: {
enabled: true
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
},
showInLegend: true
},
Second I have requirement to show drill down to three levels: Column chart to Column chart to Column Stacked Chart. I have not been able to find out a way to set the plotOptions correctly to achieve this.
Thanks in advance.
Related
I want to disable or hide marked x-axis on the following image:
But I still need to be able to show a plot line.
I tried to play around with "xAxis" Highcharts property and I am able to hide marked x-axis, but then I can not add a plot line. It seems to me this axis is somehow connected with the plot.
Thanks a lot for help.
The plotLines are connected to an axis, but you can separately disable the grid and the labels:
xAxis: [{
...,
grid: {
enabled: false
},
plotLines: [{
color: 'red',
value: today + day * 7,
width: 5
}],
labels: {
enabled: false
},
tickLength: 0
}, {
visible: false
}]
Live demo: https://jsfiddle.net/BlackLabel/c2xLruvp/
API Reference: https://api.highcharts.com/gantt/xAxis.visible
I am using the Highstock and I've been reading the API documentation to look for the plot labeling however, was unsuccessful.
When I do something like
xAxis: {
labels: {
enabled: true,
name: plot one name,
floor: 0,
}
}
or
series: [{
data: XData,
name: plot one name
}
it does not give me the label at the bottom.
It works in the highchart, but highstock. Is there a documentation / APi to add plot label inside the graph ?
for example, in the following link of the highchart is the plot label of "tokyo" and "london" http://www.highcharts.com/demo/line-labels
The labels you are looking for is called the legend (API).
It is disabled by default in Highstock. You can enable it by adding this code:
legend: {
enabled: true
}
I have a chart that is a column chart rendered on top of a area chart. Here is an example:
http://jsfiddle.net/78p42/4/
Is there a way to make the outer edge of the area chart to match up with the outer edges of the first and last columns in the column chart? In case you are not sure what I mean, please see this image I created.
I figured there would be a way to do it in the plotOptions for the area charts, but I can't find a way.
plotOptions: {
column: {
borderWidth: 0,
pointPadding: 0.1,
groupPadding: 0,
states: {
hover: {
enabled: false
}
}
},
area: {
lineWidth: 0,
marker: {
enabled: false
},
states: {
hover: {
enabled: false
}
},
pointPlacement: 0 // I have noticed that this will shift the whole graph over, but then there is a huge gap on one side of the graph
}
},
Thanks for your time.
I'm trying to create a chart using highcharts that includes both a column series and a scatter series with a custom point marker. The series will contain slightly different sets of data, but will overlap for the most part and will always have the same x-axis values.
I've set it up, but the problem is that it's not lining up perfectly. Some of the scatter series' points are shifted one or two pixels to the left of the corresponding bar.
Any ideas about how to fix this?
{
chart: {
animation: false
},
xAxis: {
tickInterval: 1
},
series: [{
type: "column",
borderWidth: 0,
pointWidth: 20,
name: "col"
},
{
type: "scatter",
states: { hover: { enabled: false } },
marker: { symbol: 'url(symbol.png)' }
}]
}
And here's a screenshot of what's happening:
Indeed it looks like a bug, also with standard markers, so I've decided to report it to our developers https://github.com/highslide-software/highcharts.com/issues/1843
I'm trying the Highcharts tools to display some graph with huge amount of data and series comparison.
the king of graph I need is exactly the one given in this example.
Except that mine has to be displayed in vertical ( with the time line on y axis, from the top to the bottom, and value on the x axis)
like the 'spline inverted' example ( seen here ) show, it's quite useful to display altitude related data for example.
I can easily imagine to invert values and exchange axis legends, but I don't think the time line navigator will follow...
I also tried to set the graph as inverted like in the 'Spline with inverted axes' example :
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
inverted: true
},
...
but it didn't work.
Is there a way to display the exact same graph in vertical with the time line navigator on the y axis ?
EDIT : its seems its not possible to use invert on HighStock graphs (as seen in doc),
So I adjust my question :
Can we use an HighCharts inverted graph to display as many points that in HighStock charts ? (even if we won't get any scroll navigator on the y-axis)
Highstock doesn't support inverted charts, see: http://api.highcharts.com/highstock#chart
EDIT:
It is possible to use inverted Highcharts with dataGrouping, it of course requires Highstock in files, but just create chart using Highcharts.Chart(). Don't forget to enable dataGrouping from Highstock. See example: http://jsfiddle.net/PATyv/2/
Code:
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
inverted: true
},
title: {
text: 'USD to EUR exchange rate'
},
tooltip: {
style: {
width: '200px'
},
valueDecimals: 4
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
xAxis: {
type: 'datetime'
},
series: [{
name: 'USD to EUR',
data: data,
id: 'dataseries',
dataGrouping: {
enabled: true
}
}]
});