ZingChart: How to create black-and-white or grayscale charts?

When creating charts for printing or presentations, you may want the charts to appear without color, i.e., as grayscale charts or black-and-white charts. Patterns are a useful option, and can be used in lieu of background colors, especially on chart types such as bar and pie.

To create patterned charts, you'll need to include the ZingChart patterns module. There are a variety of ways to use the various predefined modules with ZingChart discussed here. A simple example is shown here.

zingchart.loadModules('patterns', function() {
  zingchart.render({ 
      id : 'myChart', 
      data : myConfig, 
      height: 400,  width: "100%" 
     });
});

Once included then you may set patterns as background images in your series objects using the appropriate pre-defined pattern names. For example, 

series : [ 
    { "values":[30], "background-image":"PATTERN_SHINGLE"},
    { "values":[34], "background-image":"PATTERN_SOLID_DIAMOND"},
    { "values":[15], "background-image":"PATTERN_VERTICAL"},
    { "values":[14], "background-image":"PATTERN_WEAVE"},
    { "values":[5], "background-image":"PATTERN_DARK_HORIZONTAL"}
]

 This demo illustrates a few uses of patterns.

Documentation

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us