I'm creating a stacked bar graph, and I was wondering if I could modify the legend so I would be able to place an image/icon instead of the default box.
Default look:
What I want it to look like:
There is no API that would allow inserting images instead of series symbols in legend. Quickest solution that comes to mind is to create custom legend inside a chart using Renderer (API: http://api.highcharts.com/highcharts#Renderer) or outside a chart using HTML elements. Other than that is it possible to extend Highcharts (How-to: http://www.highcharts.com/docs/extending-highcharts/extending-highcharts) and enable this additional feature.
Example with custom legend outside a chart: http://jsfiddle.net/hs941kka/
Related
How do I add a button inside a chart.js graph?
I want to create a pie chart with drill down. The drill down effect is actually pretty easy with a chart onClick function. But I want to add a button to go to the top level to the canvas. I do not want to place it outside the canvas
I found a similar example of a different chart library.
https://www.highcharts.com/demo/pie-drilldown
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
I'm creating a custom legend for my charts, but I'd like to retain the ability to highlight part of the chart when I hover over a legend item. I know there is setSelection() but is there some kind of setHover() function?
does anyone know of any drag events that can be used on a column chart created using Highcharts.js or even how to potentially mimic that event over the chart?
We have a split column chart. The smaller lower chart controls the date range on the master chart above. Currently the only way to adjust the range is to click and select segments of the smaller chart. Image below is what we have so far:
We would like to be able to make a draggable interface with handles to stretch and adjust the segment either way.
There is identical functionality in Highstock.js (screenshot below):
In highcharts you can use only master-details type of chart http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/dynamic-master-detail/
But you have ability to use highstock.js and use column chart in navigator / serie. Take look at example
http://jsfiddle.net/UNBP7/
navigator:{
series:{
type:'column'
}
},
http://api.highcharts.com/highstock#navigator.series
I am trying to add the actual value of all the bars in my chart to the
end of each bar. I want this to either replace, or to add to the tool-
tip functionality.
I see that this is possible in the image chart, it is the
functionality described in the following link that I wish to
replicate:
http://code.google.com/apis/ajax/playground/#image_bar_chart
I am wondering if this is possible in the Javascript based version of
the bar chart?
Many thanks,
H.
It looks like there's no built in functions to draw text ad-hoc on top of google's different charts. Behind the scenes, it's generating SVG so you could try to insert some valid SVG on your own.
Another option would be to use a more flexible (but less featureful) library like raphael.js:
http://raphaeljs.com/