Adding Color to the Bar Chart

Step by step guide how to build simple Bar Chart Visual

Adding Color to your Visual

Color is exposed as one of the services available on IVisualHost.

See commit for what was added at this step.

Add Color to Data Points

Each data point will be represented by a different color. Add color to the BarChartDataPoint interface.

/**
 * Interface for BarChart data points.
 *
 * @interface
 * @property {number} value    - Data value for point.
 * @property {string} category - Corresponding category of data value.
 * @property {string} color    - Color corresponding to data point.
 */
interface BarChartDataPoint {
    value: number;
    category: string;
    color: string;
};

Color Palette

colorPalette is a service that manages the colors used on your visual. An instance of it is available on IVisualHost.

Assigning Color to Data Points

We defined visualTransform as a construct to convert dataView to a view model Bar Chart can use. Since we iterate through the data points in visualTransform it is also the ideal place to assign colors.

let colorPalette: IColorPalette = host.colorPalette; // host: IVisualHost
for (let i = 0, len = Math.max(category.values.length, dataValue.values.length); i < len; i++) {
    barChartDataPoints.push({
        category: category.values[i],
        value: dataValue.values[i],
        color: colorPalette.getColor(category.values[i]).value,
    });
}
COMMENTS