I want to be able to generate a chart and when parts of the chart are hovered (i.e. the point on a line graph), I want corresponding elements to have a class added to it on hover. Presumably by passing an array of elements to the hovered data point.
Is this possible in ChartJS? If not, can you recommend a chart software that is capable of this?
I achieved what I wanted with this answer:
https://stackoverflow.com/a/26258671/874691.
Here is my prototype: http://srgunltd.co.uk/chart.html
Related
I'm looking for a solution in which custom text is rendered instead of a point for a scatter or bubble diagram using chart.js. For example, if plotting baseball players' batting average vs slugging percentage, I want the player's name to appear centered horizontally and vertically over the underlying x,y coordinate, such as 'MANTLE' or 'RUTH', instead of the typical dot/square/triangle/bubble pointstyles. I noticed a callback function lets me program custom axis labels, but I need to do something similar for the actual point of the graph.
If this is not possible, can you recommend another library that can do this.
Thank you in advance...
chartjs-plugin-datalabels does what you're looking for. The positioning of the labels is largely customizable. A custom label formatter function for example lets you display text other than the data values.
Please take a look at the chartjs-plugin-datalabels samples, especially at Custom Labels.
Keep in mind that this plugin registers itself globally, meaning that once imported, all charts will display labels. In case you want it enabled only for a few charts, you first need to unregister it globally. Then, you can enabled the plugin for specific charts.
I have an AMCharts XYChart with one columnseries which is added and shown when I init the chart. I have another lineseries which I also add, but series.hide() when I init the chart. The legend then allows me to show/hide the lineseries.
Two problems:
1) When the chart is first set up, it prezooms to the single columnseries. I want the ability to zoom on the chart, but I don't want it to prezoom when it first loads with the single series. What is the chart configuration to disable this or return the chart to the full zoom extent onready (which would be a bit hacky).
2) The second issue is that sometimes when I click the lineseries in the legend to add it, the zoom doesn't work at first when the lineseries is added to the chart. Instead, it may only correctly zoom on the subsequent click. I may escape this second problem if the first one is fixed.
I have charts I want to sort descending. I've read there's a "more options" option if you click on the chart, which should give you ability to sort.
In chart below, there is no sorting option:
Here is the field the chart is based on (it's a single field):
And here's the way I set up the chart:
I click 'more options' and yet see no option to sort. Who knew such a simple task could be that difficult in PowerBI.
My best guess at this point is that you are using two different fields for Male and Female numbers. If this is the case, you won't get the sorting option since the values are coming from two different fields. If you simply want to interchange the position, you can do so in the values section. If this is not the case, please provide further details, so that we can look into it further.
Edit:
I don't think there is a sorting option without having a value in Axis. However, you can adjust the Inner Padding of the Y-axis (in the formatting pane), to get the visual you are looking for. Setting inner padding to 0% will remove all the gap between the two bars. Also, you can do the sorting now, since there is a value in the Axis box.
Note: If you want different colors, add the field in legend as well.
You are using a clustered bar chart. The columns are arranged alphabetically and can't be changed.
If you want to sort the bars by their values, use a regular stacked bar chart and put the "demo_female" in the Axis, not the Legend.
So I need to create a CUSUM control chart and would like to use ChartJS (https://www.chartjs.org/) to do so (example here: https://www.spcforexcel.com/knowledge/variable-control-charts/keeping-process-target-cusum-charts). Basically this chart has a standard line graph but with an upper target (control limit) and a lower target marked to show when the line has moved outside the desired range.
Is this possible with ChartJS and if so how? I have looked at the examples and I'm not seeing how to do it.
I want to hide couple labels, first 2 and last 2 in axis X.
I want to disable black line at the bottom of the graph.
I'm able to do it after the chart is loaded - using javascript and change it dynamically. When I add new data and use draw method, Graph is overwriting my dynamic stylesheets changes. I was trying to set it as an option in graph initializer but I couldn't find the solution for that.
I use areaChart.
It was 3 years ago. I don't need it anymore. I'm leaving this question for others.
It's a little hard understanding what you're trying to do, but I think I get it.
As I read it, you want to eliminate two variables from your DataTable when you plot your chart (to prevent them from being in the legend)? Assuming that's the case, you can either take them out of the data table, or use a ChartWrapper on your object, and set the view:{columns:[x,y,z]} option to the ChartWrapper. Assuming you can't change the DataTable, or a ChartWrapper isn't an option, and you just want to not have certain plotted objects appear in your chart but not in the legend, you want to set the series option. For example, assuming three columns in your DataTable, you can hide the third item as:
series: [{visibleInLegend:true}, {visibleInLegend:true}, {visibleInLegend:false}],
Second of all, if you want to hide the horizontal axis, you need to have continuous data, and set hAxis.baselineColor to 'clear'.
To hide some of the tick-mark labels, use ticks: ticklist to label the axis, and for some of the labels in ticklist use an {v:value,f:label} structure definition, with a zero-length string for the label.
Here's an example. Note the omitted labels for some of the ticks on each vertical axis. View source to see how I did it:
http://www.sealevel.info/co2_and_ch4c.html
Note the tick list definitions. This one is for the left vertical axis:
var vticklist1 = [{v:235,f:''},{v:250,f:''},275,300,325,350,375,400,{v:425,f:'ppmv'}];
The first & second ticks (at the bottom, for values 235 and 250) display no labels. The next six ticks, for values 275-400, display normally. The last (top) tick displays as "ppmv" instead of 425. The result looks like this: