I'm trying to get the label text within my Chartjs Bar chart's to be discoverable via a normal ctrl+F or cmd+F search. I'm not really sure how to approach this, as it seems that the text generated within the canvas isn't rendered as text within HTML elements.
Chartjs uses HTML5 canvas to create it's graphics. The HTML 5 canvas, by design, is a drawing board, so any text inside the canvas is considered a drawing, therefore, not searchable, unfortunately.
Related
I'm using the rectpack python library to obtain the optimal rectangle packing positions for div elements that contain d3 charts. I have the height, width, bottom-left corner x coordinate, bottom-left corner y coordinate for the div elements on a 1200px wide canvas that looks like the plot below.
Note: Due to the nature of the project I have to iframe the d3 chart HTML in my grid. I only have the width and height info for the charts and they may also be later replaced by another kind of charts like bokeh chart HTML outputs for example. So, positioning the divs is my only options for this.
I need to translate this into a HTML grid but since I'm not a web developer I'm kind of stuck as to how to create such a grid with the information above. I'm using the jinja2 templating engine to create this. However, I'm stuck trying to position the divs exactly since there doesn't seem to be an obvious place to add the position information outside css. But since each element is unique, dynamically creating css for each element doesn't seem to be optimal.
What would be the best approach in this scenario?
I'm currently using a Polar Area chart from the chart.js lib, and I'm looking to style the scale numbers via CSS.
Below are two examples:
What it currently looks like:
What I want it to look like:
I'm not sure how to access those elements and apply CSS to them.
Some help to understand that process would be much appreciated.
Thanks! 😀
Charts.js produces a bit mapped image of a chart on a canvas element. Canvas elements are not subdivided into component elements that can individually styled using CSS (which is used for styling document elements in the DOM).
Styling of chart elements is actually achieved using canvas drawing options when the element is painted. Charts.js allows you to specify these.
A quick tour of documentation suggests you can specify the appearance of legend text using legend configuration options.
Worth looing into, the HTML legend call back may provide the means of making painted legends respond to CSS styling. See this related question Custom Legend with ChartJS v2.0
Is it a bad practice to create a chart legend using html and not svg?
For example instead of
d3.select('g.chart-legend').append('text')
.text('ID');
with html
d3.select(div.chart-legend').append('span')
.text('ID');
No it's not. It depends upon the requirements. In general, if you are using svg based legends, it will be easier to draw shapes and place legends relative to your svg elements and if you go with html based legends, text reflow would be easier in case of dynamically obtained legends. Might be useful if you might end up with a lot of legends with long text and/or looking at responsive layouts.
Note that you would have to add your legends outside of your root svg element in case you want to add html based legends. So a part of your chart will outside of the svg. So if you're looking at any way of saving the svg or serializing it, you'll miss out on the legends.
I'm currently creating a visualization of some objects on my project and I'm using the InfoVis toolkit to handle the graph visualization part. So far I have the nodes plotted correctly and relating to each other correctly, but there is a graphical error that is bothering me. When a node is partly off of the canvas, the background of the node is hidden (as it should be) because it is a canvas element itself. However, the contents (which are HTML) are shown completely and they hang off of the canvas element.
You can see the visualization here: Link
Drag around the graph until one of the nodes is partly off the screen and you'll see it. It is more obvious on the right/bottom sides.
Here is a picture of the problem: The black border is the canvas border.
How can I stop this from happening?
Try setting overflow: hidden on the div with the ID infovis-canvaswidget. It looks like the Canvas element is injected into it.
I have an image on my canvas . the canvas is annotated with text on top of the image. I wrote the text using canvas.fillText(). How do i save this text to the google chrome cache. I can use HTML5 or js.
You have to save the text in variables as you write it on to the canvas. The canvas element does not retain the internal structure of what you've written on to it, once something is drawn it's just pixels, the only way to get it back would be to implement some sort of OCR in JavaScript.
If you want to retain the structure of the elements you're adding to a dynamic picture then use SVG instead.