Ticket T978783

Visible to All Users

Chart - How to apply a gradient background color to each Area series

Chris

created 4 years ago

Hi, is it possible to add a subtle gradient to the Area series of a dxChart as shown in the image attached?

If not, is this something that is likely to be implemented soon? Or something I could implement myself? We already use Chart.js elsewhere on the site and it supports this functionality, so I really need to be able to replicate it somehow.

Many thanks

Clipboard-File-1.png

Answers approved by DevExpress Support

DevExpress Support Team

created 4 years ago (modified 2 years ago)

Hi Chris,

You can do this by adding a gradient via svg and linking it to a chart series via the color option. For example:

Razor
<svg>
            <defs>
                <linearGradient id="Gradient2" x1="0" x2="1" y1="0" y2="0">
                    <stop offset="0%" stop-color="red"/>
                    <stop offset="50%" stop-color="black" stop-opacity="0"/>
                    <stop offset="100%" stop-color="blue"/>
                </linearGradient>
            </defs>  
          </svg>

          // series configuration
          s.Add()....Color("url('#Gradient2')")

Updated:
We created a Chart example that demonstrates how to customize the component appearance by configuring different SVG patterns: Chart for DevExtreme - How to configure different SVG patterns for appearance customization.

Regards,
Luis

Show previous comments (13)

Chris 4 years ago

Hi Luis,

That works great thanks. Any idea how I can change the colour of the legend to be a solid colour – e.g. the border colour specified for the series which forms the series line?

Also, is it possible to reference the SVG gradient in an external SVG file? Or does the SVG need to be inline in the HTML and hidden using <svg width=”0” height=”0”>?

Many thanks

Chris

DevExpress Support Team 4 years ago

Hi Chris,

I researched this and as I've found, there are browser support issues when trying to reference an SVG in an external file. If you wish to learn more about this issue, I recommend that you search the internet for more information since this isn't related to our components. See also these links:
External SVG with Gradients and CSS variable styling
Why can't I reference an SVG linear gradient defined in an external file (paint server)?

So, I recommend that you keep them defined inline and hide them by setting their height and width values to 0 just as you described.

Regards,
Luis

Chris 4 years ago

Hi Luis,

Thanks for confirming that – I’ve found external SVG def support to still be patchy in 2021 – some of the Chrome bug reports on similar functionality go back over 10 years without a full resolution!

Is there an easy way of changing the colour of the series key in the legend to be a solid colour? Currently it reflects the gradient but I would like it to reflect the Line colour at the top of the Area gradient.

Many thanks
Chris

DevExpress Support Team 4 years ago

Hi Chris,

Thank you for the update. Here, use this option to customize each legend marker: markerTemplate.

Regards,
Luis

Chris 4 years ago

Hi Luis,

That's what I was looking for, thanks!

Chris

DevExpress Support Team 4 years ago

You're welcome, Chris!

Chris 4 years ago

What is the best way to add these defs to the SVG when exporting the chart? (The gradients appear transparent when the chart export function is used)

TypeScript
let markup = chart.svg();
// Merge SVG markup with defs svg here?
DevExpress.viz.exportFromMarkup(markup, {
    format: 'png',
    width: 1024,
    height: 600,
    margin: 0,
    fileName: name.replace(/[?%*|<>]/g, '').replace(/[/\\:"]/g, '-')
});

Should I manually add the SVG defs to the SVG markup at the commented point in the code above? Or is there an easier way?

Many thanks again!

DevExpress Support Team 4 years ago

Hi,

Thank you for the code snippet. Please refer to Export Custom Markup demo and let us know if it helps. Otherwise, could you please send us a simple sample illustrating your current scenario? We'll examine it and find the most suitable solution for your case.

Regards,
Patrick

Chris 4 years ago

Hi Patrick,

When using gradients defined in an SVG as per Luis' answer above, the export function on the chart does not render the gradient or any colour at all - so you end up with no bars or lines etc. being visible (basically an empty chart).

In order for these gradients to display, the SVG with the gradients defs needs to be copied to the SVG in preparation for export and passed to the exportFromMarkup function. I just wondered if what I outlined above was the best way to get the gradient defs into the SVG export code.

Cheers
Chris

DevExpress Support Team 4 years ago

Hi,

Currently, there's is no easier way than what you have implemented. The SVG markup with defs SVG should be merge with the Chart's SVG markup in order to achieve the expected scenario.

If you have questions or need further assistance, we will be happy to follow up.

Regards,
Patrick

Chris 4 years ago

Thanks Patrick, implemented as below:

TypeScript
const xml = $.parseXML(chart.svg());
(xml.documentElement.childNodes[0] as any).innerHTML += $('#svg-gradients').find('defs').html();
const svg = $('<svg>').append($(xml.documentElement).clone()).html();
const markup = svg.replace(/\n\s+/g, '').replace(/\s\s+/g, ' ');
DevExpress.viz.exportFromMarkup(markup, { ... })

Whitespace is removed from the markup because the DevExpress.viz.exportFromMarkup function attempts to read it as a child element.

DevExpress Support Team 4 years ago

Hi,

Thank you for sharing your solution with us. Please feel free to contact us if you have any further questions.

Regards,
Patrick

Chris 4 years ago

The charts are nolonger blank, but the gradient colour is not rendered (see attached). Is this to be expected (e.g. the export markup to PNG render does not support gradients?) or is there a way around this?

Clipboard-File-1.png

DevExpress Support Team 4 years ago

Hi,

Thank you for the screenshot. I tested your solution in this CodePen sample and the Chart exports properly. So, could you please send us a simple sample illustrating your current scenario? You can modify this sample as a starting point. It will help us find the most suitable solution for you.

Regards,
Patrick

Chris 4 years ago

Hi Patrick,

Thanks for getting back to me - your sample has provided clarification.
The specific issue is with the stop-opacity attribute on the gradient e.g.:

XML
<stop offset="0%" stop-color="red" stop-opacity="0"/>
<stop offset="100%" stop-color="red" stop-opacity="1"/>

This gets drawn in the chart but is not rendered in the export. Presumably the stop-opacity attribute is not supported by the export markup to PNG functionality. I can replace it with the colours directly if this is the case.

Many thanks again!

DevExpress Support Team 4 years ago

Hi,

You're welcome! Please feel free to contact us if you encounter any further issues.

Regards,
Patrick

Created: March 3, 2021 5:26 PM

Modified: December 19, 2022 5:04 PM

Platform: ASP.NET Core

Product: DevExtreme Charts & Gauges

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Chart - How to apply a gradient background color to each Area series

Answers approved by DevExpress Support

Recently viewed tickets