Note that there are some explanatory texts on larger screens.

plurals
  1. POjqPlot - How to change opacity or z-index of canvasOverlay?
    primarykey
    data
    text
    <p>I would like to show 3 color zones on my graph on the background according to y axis value, as I understand, I cannot control the background color by different colors.</p> <p>My idea is to draw 3 horizontal lines with canvasOverlay - that is working. The problem is I want to place this lines behind my graph curve, now it seen on the front and it overlays my points line.</p> <p>Can I change the property of z-index or the opacity?</p> <p>Maybe some other ideas?</p> <pre><code> $.jqplot( 'ChartDIV', [data], { series: [{ showMarker: true}], highlighter: { sizeAdjust: 10, show: true, tooltipLocation: 'n', useAxesFormatters: true }, tickOptions: { formatString: '%d' }, canvasOverlay: { show: true, objects: [ { horizontalLine: { name: 'low', y: 1.0, lineWidth: 100, color: 'rgb(255, 0, 0)', shadow: false } }, { horizontalLine: { name: 'medium', y: 2.0, lineWidth: 100, color: 'rgb(250, 250, 0)', shadow: true } }, { horizontalLine: { name: 'high', y: 3.0, lineWidth: 100, color: 'rgb(145, 213, 67)', shadow: false } }, ] }, axes: { xaxis: { label: 'Dates', renderer: $.jqplot.DateAxisRenderer, rendererOptions: { tickRenderer: $.jqplot.CanvasAxisTickRenderer }, tickOptions: { formatString: '%d/%m/%Y', angle: -30, fontFamily: 'Arial', fontSize: '13px', fontWeight: 'bold' }, min: d[0] + "/" + d[1] + "/01", tickInterval: '2 month', labelOptions: { fontFamily: 'Arial', fontSize: '14pt', fontWeight: 'bold', textColor: '#0070A3' } }, yaxis: { label: 'Level', labelRenderer: $.jqplot.CanvasAxisLabelRenderer, tickOptions: { formatter: $.jqplot.tickNumberFormatter }, rendererOptions: { tickRenderer: $.jqplot.CanvasAxisTickRenderer }, labelOptions: { fontFamily: 'Arial', fontSize: '14pt', fontWeight: 'bold', textColor: '#0070A3', angle: -90 } } } } ); </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload