How to make remove background color?

Question

could you please tell me how to give different colour to line in. Actually I am using highchart library in my app.I want to display three colour of strip line or line. I am not able to give color to individual line but I am able to give background colour to individual section. Actually I want to give different line colour instead of background colour.

I don’t want background colour (green, prink ,black). I want three type of line having green, pink and black color

here is my code:

{

        chart: {
            renderTo: 'container',
                type: 'gauge',
                backgroundColor: 'transparent',
                plotBackgroundColor: null,
                plotBackgroundImage: null,
                plotBorderWidth: 0,
                plotShadow: false,
                height:240,
                width:290
        },
      credits: {
          enabled: false
      },

        title: {
            text: ''
        },

        pane: {
            center: ['50%', '75%'],
                size: '100%',
                startAngle: -120,
                endAngle: 120,
                background: [{
                borderWidth: 0,
                backgroundColor: 'transparent'
            }],
        },

different color of strips and lines. I don't want background color instead of I need to give color to lines ,,,can we give this? I need to change the line color or small strip colour there are around 100 small line. I need to display in different colours

Instead of stops you should use minColor and maxColor. refer this http://stackoverflow.com/questions/23411055/highcharts-solidgauge-how-can-i-disable-gradient-fill — Nishith Kant Chaturvedi, Sep 24 '15 at 16:26
I need to change the line clor or small strip colour there are around 100 small line .I need to display in different colours — user944513, Sep 24 '15 at 16:32
Ok I got , you issue. You want to change small line's color.. I will update fiddle soon — Nishith Kant Chaturvedi, Sep 24 '15 at 16:44
minorTickLength: 15 //to any value greater than yours. you want to change color use minorTickColor:'#55BF3B'; I tried to make that chnage, but couldn't succeed yet to put multiple color in minorTickColor — Nishith Kant Chaturvedi, Sep 24 '15 at 18:11

score 1 · Accepted Answer · answered Sep 25 '15 at 09:26

Defaulty you can set single color per minorTicks / ticks. I add option like tickStops, where you define min/max and color of range (like in plotbands). Then by snippet, we apply color by attr() function, directly on SVG element.

Option:

yAxis:{
                    tickStops: [{
                        min: 0,
                        max: 100,
                        color: 'rgba(70,204,185,1)'
                    },{
                        min: 100,
                        max: 150,
                        color: 'rgba(232,140,240,1)',
                    },{
                        min: 150,
                        max: 200,
                        color: 'rgba(69,72,93,1)',
                    }],
}

Snippet:

var yAxis = chart.yAxis[0],
        ticksStops = yAxis.options.tickStops,
        each = Highcharts.each;

    for(var tick in yAxis.minorTicks) {

        var value = parseFloat(tick);

        each(ticksStops, function(tStop, i) {
            if(value >= tStop.min && value <= tStop.max) {
                yAxis.minorTicks[tick].mark.attr({
                    stroke: tStop.color
                });     
            }
        });
    }

Example: http://jsfiddle.net/kbvC3/837/

Awesome ,was expected final answer from @Sebastian – Nishith Kant Chaturvedi Sep 25 '15 at 10:19 — Nishith Kant Chaturvedi, Sep 25 '15 at 10:19

How to make remove background color?

1 Answers1