I have a column chart made with Highcharts and I want to add lines associated with each column showing benchmarks. I know Highcharts has a concept of plot lines, where there is one benchmark value given for the whole chart, but in my case, each column needs it's own benchmark. Here is a super simple example of how I want this to look:
I have some ideas of how I could do this, but they all seem like kind of indirect solutions. I could implement the benchmark lines as another column series, and style them so that only the top of the column shows, or as a scatter series where the "points" are actually lines, but I don't know if either of those are possible and they sound like a complicated way to do something simple. Hopefully I'm just missing an obvious feature of Highcharts.
Does anyone know how to do this? Thanks.
Related
I have lots of svg element containing each one a line chart. I'd like to display these charts at groups of four. If I understand well from the documentation, it'd be better to use a grid for this purpose since I can select position I want (single box of the grid) for a specific graph. Is it true, or is there another better way to do this?
NB: charts are built each one from different datasets and using d3.js and so javascript.
Thank you so much for the help.
If it's possible, I'd like you to show me a code snippet just to understand better.
Thank you again.
Using chart.js, I have a bar chart with datapoints spread across many years:
If you look closely near the x-axis, you can see some grey bars. Here's a line chart with the same data for reference:
While using a line chart for this example could make sense, it makes the charts with less data a bit awkward:
and with bars instead of lines
Is there an option that could be used on bar charts to improve the readability when large x-axis are involved? I am representing occurrences of events over-time, another adapted kind of chart could be acceptable too.
Thanks.
I am not sure there will be an option on chart.js.
One way to deal with it is to render line charts initially and then switch the type to 'bar' when zoomed into certain date ranges.
Depending on the type of data, you could also group up the data by summing (or averaging) the data by day (or week or month). Then pass it into the chart and the time series option should be able to display the x axis dates in a more sensible manner.
Otherwise you will have to look into more power charting libraries that can handle and manipulate bigger datasets like amCharts: https://www.amcharts.com/demos/stock-chart-candlesticks/
Or look into using D3 that is highly customisable, but a bit more complex to work with.
I'm trying to create a custom chart based on the Highstock Basic Line Chart.
To be more exact I'd like to create a drawdown-chart (see drawdown chart on wikipedia). I don't want to discuss the formula :), but the way to change the data display in Highstock/Highcharts following a certain rule. It could be a more simple one: imagine you want to display f(x) = 100 for every data point although your data is completely different.
The following requirements shall be fulfilled:
I want to use as much functionality as possible from Highstock like scaling the chart axes, call redraw on "dragging" the time line, etc.
I want to use the Highstock patterns to extend its charts: wrapping or pushing event listeners and in doing so, ensuring my code stays readable and maintainable.
The best try was to wrap the processData function. In its body I manipulated xData and yData and called the super method as explained here: Extending Highcharts
The chart broke displaying certain time ranges. The original data seemed to be displayed there.
I can't get any further unaided. I would be really happy if someone could help me with that.
Thanks in advance!
Niels
1) You can catch redraw event and then call your actions.
Scalling axis by parameters:
http://api.highcharts.com/highstock#yAxis.height
http://api.highcharts.com/highstock#yAxis.top
Dynamically
http://api.highcharts.com/highcharts#Axis.update
I have 3 similar pie charts. They use same dimension but different groups so, their legends look the same. Instead of having 3 same looking legends, I'd like to bind only a single legend to those charts. I tried creating a legend separately and assign it to the charts, however, it didn't work. Is there actually a way to do such thing?
This is not directly supported by dc.js, but it is very similar to a legend on a composite chart. I think if you were willing to do some hacking, you could override the legendables function on the chart you want to put the legend with, and have it accumulate the legendables from its sibling charts.
Take a look at pieChart.legendables:
https://github.com/dc-js/dc.js/blob/master/src/pie-chart.js#L419
And then compositeChart.legendables
https://github.com/dc-js/dc.js/blob/master/src/composite-chart.js#L363
for inspiration.
If this is too much hacking for you, please file an issue. It would certainly be nice to support!
I am looking into trying to stack completely different series/charts on top of each other but on the same chart. For instance I could have two charts stacked vertically and when I move the cross-hair on one, it will move on the other almost as if the charts are linked. As well, I'd when I zoom in one, it would trigger the other to zoom. Please see the image at the bottom I "doctored" to give you an idea of what I'm trying to accomplish.
Things I've tried:
creating two completely separate charts and stacking them.
This is the closest I've gotten to what I need but they are still separate entities so it won't work for what I need, cross-hairs/zooming/etc. all need to work as though the charts are linked/combined.
In the options I tried the "stacking" option.
this won't work because it "stacks" or groups data, I want to literally have two separate series that might not have anything in common with each other.
Rendering muliple y-axis.
the only issue with this is that it's overlapped data, I'd like it to be offset so we can see it in a stacked layout.
I'm pretty new to using this library so if any of my terminology or explanation doesn't sound right, please sound off and I'll elaborate.
Thanks everyone!