I'm trying to change the background color of a bar chart made with chart.js based on the value.
I found a lot of examples, but I read on chart.js documentation (https://www.chartjs.org/docs/latest/charts/bar.html?h=backgroundcolor) that the background color is scriptable.
I cannot find where and how to configure options in order to achieve this result.
The solution proposed by #uminder can be one solution, but this requires that all data mist be preprocessed and an array of colors filled before the creation of the graph.
With this solution https://github.com/chartjs/Chart.js/blob/55dd7ded0e7c6133c615c28aa3d46ab97ea08a82/test/fixtures/controller.bar/backgroundColor/scriptable.js#L10 no preprocessing is needed and the color is selected "on-the-fly".
I was looking for this type of solution I've just found in the test suite of chartjs.
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.
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.
When using echarts, in several lines of code the following can be achieved: https://ecomfe.github.io/echarts-examples/public/editor.html?c=pie-doughnut , more specifically notice the entrance animation and the hover behaviors and the legends hover and the smooth tooltip movement and legend click behavior and the quick chart rerendering.
On the other hand echarts lacks touch events support and some other stuff and thus I wanted to use chart.js to build this same doughnut chart to see if chart.js is capable of it. The chart.js examples I saw online have very basic animations and interactions.
I saw in chart.js website that support is given by creating appropriate stackoverflow question with chart.js tag, so I am creating this question to ask if its possible to create a dougnut chart with the described behaviors using chart.js
I am trying to plot stuff using matplotlib and mpld3. This is the code I use to generate my graph:
_fig = plt.figure()
_pl = _fig.add_subplot(111)
_pl.plot(_times, _values)
_pl.set_xlabel("Time")
_pl.set_ylabel("Value")
_pl.tick_params(direction="out", axis="both", colors="white", which="both")
_pl.xaxis.label.set_color("white")
_pl.yaxis.label.set_color("white")
_data = mpld3.fig_to_html(_fig)
.... send to client to be rendered
A graph is created and all the dynamic controls work. "Time" and "Value" labels get printed in white but tick labels in black.
If I skip mpld3 and test it with plt.show(), all tick labels get printed in white. When I check the javascript code generated by mpld3, I do not seem to detect the colour setting there for tick labels.
If I use another parameter, like font size, in tick_params it does have an effect. Only the colour gets ignored, which causes the labels to be printed in black on a dark blue background.
How do I change this?
Edit:
When inspecting the actual page rendered, there seems to be a "fill" property that determines the colour.
div#fig_el249691400950908834083380374260 .mpld3-xaxis text
{font-family:sans-serif; font-size:10px; fill:black; stroke:none; }
I tried overriding this in css but I could not figure out how to do it. This seems to override whatever I set elsewhere. It appears mpld3 sets the colour of the tick label, but how do I modify this?
Hannu
mpld3 only supports a subset of matplotlib's full capabilities, and tick formatting is one of the many things that is not yet supported. There is a partial list of these missing features on the mpld3 wiki.
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 .