Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
195
Scatter chart change color of bubbles
posted

I'm using a chart of type scatterBubble and I want different random colors to fill the bubbles instead of all the same or white.

Now I'm getting this:

Not all bubbles have a color... I want to get something like this:

Is this possible? How can I change this?

My code for this chart is this:

function CreateChart(selector, seriesType, title, minimumHeight, maxHeight) {
$(selector).igDataChart({
width: "100%",
height: "400px",
title: title,
horizontalZoomable: false,
verticalZoomable: false,
windowResponse: "immediate",
dataSource: top100List,
axes: [
{
name: "xAxis",
type: "numericX"
}, {
name: "yAxis",
type: "numericY",
minimumValue: minimumHeight,
maximumValue: maxHeight,
abbreviateLargeNumbers: true
}
],
series: [
CreateSeries(seriesType)
]
});
}

CreateChart("#top100ResultsChart", "scatterBubble", "", chartMinHeight, chartMaxHeight);

Thanks!

Parents
  • 21795
    Verified Answer
    Offline posted

    Hello Ronny,

    You can change the color of the scatterBubble chart by setting fillScale and fillMemberPath properties of the series. fillMemberPath property determines the member in your data source where the chart should look for the fill color index. fillScale is an object where you should provide the brushes chart should use to fill the bubbles. Note, as you need a lot of colors you should provide an array with all the colors you need. Then in your data source you should fill the fillMemberPath of each data row with the index of the color in the array you provided. Please check the attached sample where I have implemented this for and let me know if this is what you are looking for or if I am missing something.ScatterBubbleChartFillScale.zip

Reply Children
No Data