{ id: "Japan", coordinates: [139.6503, 37.6762], image: './icons/Location-icon.png' },
How to add animate.css class, I try to animate icon.png file. is it possible?
To my understanding, ZoomCharts draws the images you give it on an HTML canvas, which means CSS solutions like animate.css won't apply in this case.
I think you'll have to use the ZoomCharts settings to do any styling or animation on the image. See here: https://zoomcharts.com/developers/en/net-chart/api-reference/settings/style/node.html
Related
I'm using quarto to prepare some slides (i.e., revealjs output), and I can't find a way to scale an embedded image (e.g., from Wikipedia). It seems the "width" parameters should do but neither a percentage
{width="50%"}
nor an absolute value
{width=600}
seems to have any effect on the rendered picture. Any clues?
Cheers.
Option 1: The easy solution: See here for more information.
For slides that contain only a single top-level image, the .r-stretch class is automatically applied to the image. You can disable this behavior by setting the auto-stretch: false option
format:
revealjs:
auto-stretch: false
Option 2:
If you like that general stretching behavior you can
A) deactivate the stretching behavior for an individual slide using
## Slide Title {.nostretch}
B) Create own css class:
The following code uses the same width (30px), but only the one with the own css style works where the trick is the !important to overwrite the default set by .r-stretch class.
.qmd
---
format: revealjs
css: styles.css
---
## using css class
{.width-image}
## using inline css does not work
{width=30px}
styles.css
.width-image{
width: 30px!important;
}
I am converting all the charts in an application to Highcharts 5.x styled mode.
I cannot find how to make the solidgauge stops work in styled mode. When I inspect the SVG, I do not see any class for the colors.
I couldn't find any solidgauge stops example with styled mode.
Anyone can post a working example?
In a solid gauge series color is calculated dynamically based on stop values - currently, I do not think you can do the same with only css. The point fill atribute is calculated and set correctly but in this case css class takes precedence and the point's color has a fixed fill taken from the css file (highcharts-color-{n} class).
Keep stops in options and remove class from the point (or set colorIndex to a non existing number, e.g. 99)
.highcharts-color-0 {
fill: #7cb5ec; //remove fill attribute
stroke: #7cb5ec;
}
or:
data: [{y: 80, colorIndex: 99}], // the point's class will highcharts-color-99 now
example: http://jsfiddle.net/gj8zfw73/
I am trying to figure out the best way to upload and show images in articles. Right now I have the following code under the apostrophe-blog-pages show.html template
<div>
{{ apos.area(data.piece, 'main', {
widgets: {
'apostrophe-rich-text': {
toolbar: [ 'Styles', 'Bold', 'Italic', 'Blockquote', 'Link', 'Anchor', 'Unlink', 'Table', 'BulletedList', 'NumberedList' ],
styles: [
{ name: 'Title', element: 'h3' },
{ value: 'h5', label: 'Subtitle' },
{ name: 'Paragraph', element: 'p' }
]
},
'apostrophe-images': {
size: 'original'
},
'apostrophe-video': {}
}
}) }}
</div>
The issue that I am facing is that I have images with different size and aspect ratio. And apostrophecms or imagemagick automatically decides what the actual aspect ratio of an image should look like and for bigger images it works fine but for smaller image (usually less that 400 px size) images show up pixelated or zoomed in.
Not sure what is the best to show images with their original height and width.
As you know I am the lead developer of Apostrophe at P'unk Avenue.
In the code you gave, Apostrophe is not actually touching your aspect ratio or image sizes in any way. You are setting size to original and you have not set either minSize or aspectRatio, so Apostrophe really has no opinion about your image.
We actually strongly discourage the use of original unless you have a very, very good reason for making your users think extra-hard about the right size of image to upload. If you let your users upload their best image (well, up to about 2000x2000 or so...) and use Apostrophe's sizes like one-half, full and max, and use CSS for the final adjustment, you'll get good page-loading speed without the need for the admin of the site to pre-size everything in Photoshop.
But again... nothing in your code here is cropping the image in any way.
If you think there's a bug here, in that Apostrophe is cropping where it should not be, please prepare a test project in github and open a github issue on the apostrophe project with the details.
Thanks!
Not the best solution but since the issue was with the CSS style. I had to overwrite the img width style and the change fixed the issue.
.apos-slideshow .apos-slideshow-item img {
width: auto !important;
}
I have a line chart with markers disabled.
The legendSymbol is currently a line. I would like to show the symbol as a square. Any pointers?
With the latest Highcharts release you can also exchange the method that draws the legend icon from outside of Highcharts:
Highcharts.seriesTypes.line.prototype.drawLegendSymbol =
Highcharts.seriesTypes.area.prototype.drawLegendSymbol;
To use the element that is drawn for the area chart as an icon for a line graph.
(I have used this in Highcharts Stockcharts but this should be applicable in basic Highcharts as well)
You can use two series (one normal and one fake) with defined custom symbol. First should be hidden in legend. Then only what you need is use legendItemClick and call action.
http://jsfiddle.net/5m9JW/339/
You can change the stroke-width attribute on the path element.
We can provide functions to Highcharts that will be drawn whenever the chart is drawn. Since redraw is not called on the first drawing the load event is needed
chart: {
events: {
load: function () {
$(".highcharts-legend-item path").attr('stroke-width', 10);
},
redraw: function () {
$(".highcharts-legend-item path").attr('stroke-width', 10);
}
}
},
I like this as it's quicker than than the other two answers and adding a "fake series" feels like a hack.
If you need further customization Hendrik's would be great! The original question asked for a square, if all that's really needed is a rectangle (or a large square) this works great.
Also Hendrik's answer didn't work for me out of the box in HighStocks, this does.
I'm trying to generate a donuts highchart, everything is running good but I can't find the way to make the labels rotate in a radial way.
I've tried:
dataLabels:
{
rotate = 'auto'
}
but no lucky
nothing is documented on Highcharts API http://api.highcharts.com/highcharts
Is it possible or I'm just dreaming?
Unfortunately this option is not supported, but you can try to use http://api.highcharts.com/highcharts#yAxis.labels.formatter and useHTML, then use your own css styles to prepare correct rotation.