I have to draw chart with different line settings (weight, pointSize, etc.). For example first line has to be 3px weight and 5px point size, but second - without points. I didn`t find option to configure chart in such way. There is a compound charts but it is a deprecated API. I also thought that I could call draw() method several times with different data and options, but it cleans previous drawing. So my question - how could I call draw multiple times without rewriting previous drawing or how I could configure chart to use custom formatting for different lines?
Have you check the settings in the "series" option? Doc : https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart
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.
Per How to Change Apache Superset Template from the Superset User Interface? , I was able to change the CSS template for Superset dashboard. But the charts inside the dashboard are not affected. e.g. most of the charts have white colored background(e.g. Piechart) and some people dislike it. How to change the chart background color? I mean change it for all charts or for one chart.
Disclaimer: This should work, but is a bit hacky and could have long-term support implications:
I've been fiddling with a "dark mode" dashboard just to kick the tires on this. Here's a screenshot just for fun:
So... what did I do?
Click "Edit Dashboard" in the top right of your screenshot
When in edit mode, the top right menu has an option to "Edit CSS"
Use your browser's inspector to hack away! That said, here are a couple of key ingredients:
.dashboard-component{ background: whatever} - sets the main background of each viz card, but you'll still see many components still have white backgrounds within these wrappers.
.slice_container svg{
background-color: transparent !important;
} - this overrides the white background of the components I ran into (including Pie charts!).
If viz components use SVG you can get pretty clever with inspecting/overriding various bits. A couple of gotchas with the above:
If a viz component contains multiple SVG elements, this may have side effects.
If a viz uses canvas instead of svg you will run into more trouble
In the worst case scenario, you may need to check out the superset-ui-plugins repo and make tweaks. This dev process isn't super straightforward, but some of us are working to improve that.
Easiest solution for me is using dark reader extension.
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:
I'm trying to automate some PowerPoint charts, but I'm having problems preserving some formatting.
When I add a chart using a chart template, the chart doesn't use the slides color scheme, but rather the colors it was saved with. It doesn't help to change the color scheme for the slide - the chart isn't updated. To make the chart update to the color scheme of the slide, I have to clear formatting for the chart. The problem with doing this is that all font sizes are automatically set to 18pt. I cannot find any easy way restore the font sizes for the chart without saving all sizes before calling clear, and set them back after clearing.
Have you looked into using the Format Painter function it may or may not work depending on a variety of factors from my quick look on the net (google it for lots of articles).
Also if you've done one chart you should be able to copy the formatting from one chart to another using the paste special option as mentioned here http://www.pcreview.co.uk/forums/there-format-painter-equivalent-use-many-charts-t3611646.html .